移动端网站开发总结2

这段时间一直在做移动端的网站,顺便写一点总结吧,随便写的,想到什么写什么,所有若有幸被各位所看到,可以无视哈。。。。

1.

1 $(document).bind("click",function(e){
2         var target = $(e.target);
3         if(target.closest(".pop").length == 0){
4              $(".pop").hide();
5         }
6     }) 

这段代码,是在做右上角菜单时候用到的,  意思是除了“.pop”元素块之外的文档任何地方点击一下“.pop”隐藏掉、、、

1 target.closest(".pop").length == 0

这段代码可以说是这个小功能的中最难懂的一段代码,target  是目标对象,详细解释:

e.target的含义

$(function(){
    $("li:has(ul)").click(function(e){
        if(this==e.target){
            $(this).children().toggle();
            $(this).css("list-style-image",($(this).children().is(":hidden")?"url(plus.gif)":"url(minus.gif)"))
        }
        return false;    //避免不必要的事件混绕
    }).css("cursor","pointer").click();    //加载时触发点击事件

    //对于没有子项的菜单,统一设置
    $("li:not(:has(ul))").css({
        "cursor":"default",
        "list-style-image":"none"
    });
});

===========================

具体问题具体分析;当前目标
在event事件中代表点击对象;
loader事件:加载对象;
e只是参数,任意取值;对应即可;

e.target 是目标对象,e.event是目标所发生的事件。

2.文字溢出部分隐藏并添加省略号: overflow:hidden;white-space: nowrap;text-overflow: ellipsis;

时间: 2024-08-30 09:52:46

移动端网站开发总结2的相关文章

移动端网站开发前端学习总结

1.关于适配: 移动端适配可以使用lib-flexible(也可配合百分比宽度一起使用)十分适用于webapp适配 Font-size默认为12px 以rem为单位. 关于lib-flexible详解:http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html 注意:应用lib-flexible与响应式布局(媒介查询应用不同的样式)难以兼容,因为lib-flexible会改变媒体查询关键的width属性 使其不准确 参考 li

移动端网站开发常见问题解决【知识点】

安卓浏览器看背景图片,有些设备会模糊因为手机分辨率太小,如果按照分辨率来显示网页,字会非常小,安卓手机devicePixoRadio比较乱,有1.5的,有2的也有3的.想让图片在手机里显示更为清晰,必须使用2x的背景图来代替img标签(一般情况下都是2倍的),或者指定background-size:contain;都可以 2.防止手机中页面放大和缩小 <meta name="viewport" content="width=device-width,initial-sc

HTML5移动端手机网站开发流程

最近一直在研究移动手机网站的开发,发现做手机网站没有想象中的那么难.为什么会这么说呢?我们试想下:我们连传统的PC网站都会做,难道连一个小小的手机网站难道都搞不定吗?其实手机网站就是一个微缩版的PC网站罢了!至于为什么觉得难.觉得无从下手. 段亮觉得有以下几点: 一.没有完整的思路和流程 就像做网站的流程一样,如果你能知道它的流程,我相信就不会觉得做手机网站难!真正难的是你没有思路. 二.把html5这门技术想的高深莫测 好像觉得学会用html5+css3做手机网站,就相当于学会了顶尖的绝世武功

酷六类视频网站Android端软件开发视频教程

风网大话优酷 酷六类视频网站Android端软件开发视频教程本系列教程主要讲解一个类似于酷六.优酷等视频网站Android端软件的整体架构.开发流程及代码编写的全过程.具体涉及网络的上传.下载.多线程.SQLite数据库.SDcard操作.UI界面的显示和事件响应.设计模式的介绍和实战,IoC的精妙应用等. 课程目录:1.软件的演示以及和其他软件的比较 133MB2.Android娱乐多媒体的开发的重要的战略意义分析 45.3MB3.软件的概述 47.1MB4.该软件与Android就业 38.

webApp手机网站开发、最新H5+CSS3开发微信端网站

手机网站移动端webApp开发实践来啦,助您更快.更好的学习HTML5+css3手机网站开发知识!!! 移动端web网站(移动端web开发/APP开发).移动端App模版.手机网站模版.HTML5+CSS3网站模版,手机端网站开发模板.手机网站.移动webApp开发.移动端网站.HTML5+CSS3.手机web开发...... WebApp与Native App有何区别呢? Native App:1.开发成本非常大.一般使用的开发语言为JAVA.C++.Objective-C.2.更新体验较差.

项目二:企业级java电商网站开发(服务端)

声明:项目源于网络,支持正版教程,学习使用,仅记录在此 项目介绍 企业级java电商网站开发(服务端),模块划分:用户管理,商品管理,商品品类管理,订单管理,订单详情管理,购物车管理,收货地址管理,支付管理 集成工具使用idea,一个springboot项目,使用maven进行依赖管理,持久层使用mybatis(接口+mapper xml),没有前端页面,仅服务端开发,最后返回封装好的数据,以json方式呈现,可以使用postman工具,google浏览器的Restlet Client插件等进行

移动端 h5开发相关内容总结——CSS篇

移动端 h5开发相关内容总结——CSS篇 标签: css移动 2016-01-06 15:59 5536人阅读 评论(3) 收藏 举报  分类: HTML+CSS(17)  版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 1.移动端开发视窗口的添加 h5端开发下面这段话是必须配置的 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=n

移动端Web开发调试之Chrome远程调试(Remote Debugging)

本篇主要说一下Chrome RemoteDebugging 的方法,之前也遇到一些坑,自己总结了一些经验,分享如下. Chrome DevTools调试移动设备Brower Page Tabs/WebViews 安卓远程调试目前支持所有操作系统(Windows,Mac, Linux, and Chrome OS.)中调试,支持: ● 调试站点的页面 ● 调试安卓原生App中的WebView ● 实时将安卓设备的屏幕图像同步显示到开发机器. ● 通过端口转发(port forwarding)与虚拟

在PC上测试移动端网站和模拟手机浏览器的5大方

查了很多资料,尝试了大部分方法,下面将这一天的努力总结下分享给大家,也让大家免去看那么多文章,以下介绍的方法,都是本人亲自测试成功的方法,测试环境winxp. 一.Chrome*浏览器 chrome模拟手机总共有四种方法,原理都一样,通过伪装User-Agent,将浏览器模拟成Android设备.以下标星的为推荐方法. 1.新建Chrome快捷方式 右击桌面上的Chrome浏览器图标,在弹出的右键菜单中选择"复制",复制一个图标副本到桌面.右击该副本,选择"属性",