基于 jQuery支持移动触摸设备的Lightbox插件：Swipebox使用说明 - 前端开发 - IT工作生活这点事
现在位置 /
给您更多信息和帮助
在这里您可以找到更多: 技术交流群:
投稿：承接：企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询
echarts教程系列
[] [] [] [] [] [] [] [] []
本月最热文章
微信扫一扫，徜徉悠嘻网，您的休闲乐园
技术交流群:
专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询在上文中， Kayo 介绍了一部分 jQuery Mobile 表单组件，接下来将会继续介绍余下的组件以及相关的技巧。
6.选择列表
选择列表是基于 HTML select 元素的，具有原生菜单和自定义菜单两种形式，原生菜单与自定义菜单都有一个样式美化了的选择按钮，不同的是在自定义菜单中原生的 option 元素将被隐藏， jQuery Mobile 会生成一个由 CSS3 和 HTML5 构成的菜单代替，并且这个菜单是 ARIA 的。
关于 ARIA ，这里小科普一下： ARIA， 即 Accessible Rich Internet Application （ 加强无障碍网页应用程序 ），它是 W3C 的无障碍网页倡议（WAI）工作小组在倡导大家使用的无障碍网页应用技术。它是一套独立的规范，可以帮助 Web 程序，尤其是使运用了大量前端技巧（ Ajax ）的网页更具备可访问性，通俗点说，读屏设备等不大能理解前端语义的设备将可以了解到页面的内容，这样残疾人士不仅可以浏览网页甚至与页面进行交互。
HTML select 元素会被自动增强为原生的选择列表组件，若需要自定义样式菜单，可以在 select 上添加 data-native-menu="false" 属性。
若需要禁止选择某一个选项，可以在选项的 option 标签上添加 disabled="disabled"。
下面给出一个自定义菜单的例子：
&div data-role=&fieldcontain&&
&label for=&select-choice-1& class=&select&&选择列表&/label&
&select data-native-menu=&false& name=&select-choice-1& id=&select-choice-1&&
&option value=&12h&&12小时&/option&
&option value=&1d&&一天&/option&
&option value=&2d&&两天&/option&
&option value=&week&&一周&/option&
自定义菜单
若需要多项选择，则可以在 select 标签上添加 multiple="multiple" ，但原生的选择菜单不支持该功能。对于多项选择菜单，还有几点要注意的：
jQuery Mobile 会在菜单里创建一个 jQuery Mobile header ，并在 header 的左边添加一个关闭菜单按钮。
当用户选择两个或以上选项时选择按钮右侧会出现一个小图标，图标内显示已选择选项的个数。
所有选择的选项文本会显示在选择按钮上，如果文字超出按钮长度，会以省略号代替多余的内容。
如果选项过多，菜单会以新页面的形式显示。
多项选择列表实例
&div data-role=&fieldcontain&&
&label for=&select-choice-2& class=&select&&多项选择列表&/label&
&select data-native-menu=&false& multiple=&multiple& name=&select-choice-2& id=&select-choice-2&&
&option value=&12h&&12小时&/option&
&option value=&1d&&一天&/option&
&option value=&2d&&两天&/option&
&option value=&week&&一周&/option&
另外我们还可以对选项进行分组，使用以下标签标签把同一组的选项包裹起来，其中 label 的值为该分组的标题。
&optgroup label=&Group1&&&/optgroup&
分组选择列表实例
&div data-role=&fieldcontain&&
&label for=&select-choice-3& class=&select&&分组选择列表&/label&
&select data-native-menu=&false& name=&select-choice-3& id=&select-choice-3&&
&optgroup label=&Group1&&
&option value=&12h&&12小时&/option&
&option value=&1d&&一天&/option&
&option value=&2d&&两天&/option&
&option value=&week&&一周&/option&
&/optgroup&
&optgroup label=&Group2&&
&option value=&1m&&一个月&/option&
&option value=&1q&&一季度&/option&
&option value=&1y&&一年&/option&
&/optgroup&
在 jQuery Mobile 中，type="range" （ HTML5 属性值 ） 的 input 元素会被增强为划杆组件，该组件可以通过一些属性值配置，value 设置滑杆的初始值， min 和 max 分别设置滑杆的下限和上限。另外滑杆组件还支持键盘响应，键盘的右箭头，上箭头，Page Up 键都可以增加滑杆的当前值，相应的，左键头，下箭头， Page Down 键可以减少滑杆的当前值，使用 Home 键和 End 键则可以设置当前值为最小值（下限）和最大值（上限）。
&div data-role=&fieldcontain&&
&label for=&slider&&滑杆&/label&
&input type=&range& name=&slider& id=&slider& value=&0& min=&0& max=&100&
具有两个 option 的 select 元素添加 data-role="slider" 属性后会被增强为 jQuery Mobile 的开关组件，用于表示布尔型数据（ ture or false ），拖动滑动条可以在“开”与“关”之间选择，其中第一个 option 会被渲染成“开”的样式。
&div data-role=&fieldcontain&&
&label for=&slider&&开关&/label&
&select name=&slider& id=&slider& data-role=&slider&&
&option value=&off&&关闭&/option&
&option value=&on&&开启&/option&
三.提交表单
jQuery Mobile 自动采用 Ajax 的方式提交表单，默认的 method 为 get ，action 为当前页面的相对路径，在表单页面和结果页面之间会有平滑的转场过渡，并且可以在表单上使用 data-transition 指定转场效果。如果不想使用 Ajax 的方式提交表单，可以在全局事件禁用 Ajax （如何全局禁止 Ajax 并不在本文讨论范围，但会在本系列的后续文章中作详细说明）或是在 form 上添加 data-ajax="false" 属性，下面是 data-transition 的所有可取值。
slide 滑动（默认值，从左至右滑出）， slideup（从下至上滑出）， slidedown（从上至下滑出）， pop（从中心渐显展开）， fade（渐显）， flip（翻转）。
四.主题样式
关于主题样式，在上一文中已经介绍过了，这里引用一下：
“data-theme=“” 属性， 所有的 jQuery Mobile 组件均支持该属性，用于设置组件的颜色， 该属性默认有五个值 a, b, c, d, e，分别代表由深到浅五种颜色，另外开发者还可以通过在 CSS 里添加相应的 Class 来自定义颜色。”
五.刷新表单组件
由于 jQuery Mobile 对原生的 HTML 表单元素进行了渲染和追加元素，所以开发者想通过 js 直接控制表单组件会比较麻烦（如使用了 Web SQL Database 储存了数据在本地，在打开网页时希望通过 js 获取数据并给表单组件赋值的情况），因此 jQuery Mobile 设计了用 js 给表单组件赋值的 API ，下面逐一举例介绍：
1.单选按钮
选择第一个选项
$(&input[type='radio']:first&).attr(&checked&,true).checkboxradio(&refresh&);
2.复选按钮
选择第一个选项
$(&input[type='checkbox']:first&).attr(&checked&,true).checkboxradio(&refresh&);
3.选择列表
选择第一个选项，注意选项的索引是从1开始
var myselect = $('select#select-choice-1');
myselect[0].selectedIndex = 1;
myselect.selectmenu('refresh');
设置值为40
$(&input[type=range]&).val(40).slider(&refresh&);
选择第一个选项
var myswitch = $('select#shakeToClear');
myswitch[0].selectedIndex = 1;
myswitch.slider('refresh');
注： refresh 方法不能直接使用在 Ajax 获取的内容上，例如 js 要操纵的表单组件在另一个 Page， js 只在首页加载时载入，这样 jQuery Mobile 会出错（不会有直接报错，只是该段 js 会失效），我们可以使用 live('pagebeforeshow', function(){}) 方法使到该段 js 在过场到表单组件所在页面时才载入（ pagebeforeshow 是 jQuery Mobile 事件之一，此外还有 pagebeforehide， pageshow， pagehide 三种方法）。下面给出一个例子：
$('#setting').live('pagebeforeshow', function(){
// 在页面显示时选择菜单中第一个选项
var myselect = $('select#select-choice-1');
myselect[0].selectedIndex = 1;
myselect.selectmenu('refresh');
六.完整 Demo
（建议使用 PC 上的 Firefox、Chrome 等现代浏览器和 IE9+ 或 Android , iPhone/iPad 的系统浏览器浏览）
发表，本文链接：
你可能也喜欢移动端开发：使用jQuery Mobile还是Zepto - 推酷
移动端开发：使用jQuery Mobile还是Zepto
jQuery Mobile和Zepto是移动端的js库。jQuery Mobile相当于PC端的jQuery UI，它提供了很多页面的UI库，能够很快的开发出漂亮的界面，适合公司没有UI设计师的前端开发人员来进行移动端的开发。Zepto相当于PC端的jQuery，它提供了很多方法和功能，能够很快的实现各种需求和功能，适合公司有UI设计师的前端开发人员来进行移动端的开发。
jQuery Mobile性能上没有zepto好。
zepto.js是一个专为mobile WebKit浏览器(如：Safari和Chrome)而开发的一个JavaScript框架。它标榜自己在其简约的开发理念，能够帮助开发人员简单、快速地完成开发交付任务。更重要的是这个JS框架，是超轻量级的，只有5KB。zepto.js的语法借鉴并且兼容
jQuery Mobile这个框架能够帮助你快速开发出支持多种移动设备的Mobile应用用户界面。
jQuery Mobile不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。虽然jQuery Mobile相对较新，但开发人员可以用jQuery Mobile为许多移动设备（包括智能手机和平板电脑）开发网站应用程序，RSS阅读器等应用。
jQuery Mobile是目前最流行的一个移动开发的框架，文档丰富，社区活跃，有很多的UI控件供我们使用，并且提供对多页面的支持（通过Ajax方式读取内容，并提供页面切换的过渡动画）。我认为jQuery Mobile的最强大之处就在于其UI方面的支持，但这一部分恰恰不是我所需要的，它对UI的限制比较多。Sencha Touch是ExtJs的移动版，对于不熟悉ExtJs的人来说有一定的学习成本。
jQuery Mobile的缺点，主要有两点：一是重，二是UI限制太大。
我们选择了zepto.js作为底层库，使用sea.js进行模块的管理和发布，当然也可以使用requirejs来进行模块的管理和发布，requirejs比seajs的对应的工具多一些，因为requirejs是外国的，而其他相应的工具也是外国的，因此使用seajs，相对应的工具会少一些。但是开发起来容易一些，都是中文资料。此外，我们使用backbone.js为基础的MVC架构，用来剥离应用的数据部分；使用underscore.js做为前端模板引擎（backbone重度依赖）；使用iScroll.js为我们提供模拟滚动的功能（此库在低端移动设备上，反应慢）。这些都是一些专业的“小库”，很适合移动端的开发。当然，具体情况需要具体分析，没有万能的框架，只有万能的开发者。如果时间允许，也可以自己来定制一套满足自身需求的基础库。毕竟在移动端，一切以 “精简”为主。
对于单页应用来说，iScroll确实是一个非常优秀的解决方案，但是iScroll却有一个最大的缺陷——慢，滚动的性能与浏览器原生实现相比，在低端的移动设备上有明显卡顿。
不过要兼容低端的移动设备，原生的滚动还是有优势的。尝试放弃使用iScroll组件，使用原生的Scroll。因为较新的浏览器已支持
{overflow: -webkit-overflow-scrolling:}
iScroll的诞生，主要是因为早期的webkit内核浏览器没有一种原生支持固定高度的容器。到目前为止，iScroll最大的问题就是慢，在千元以下Android设备上表现尤为突出。使用局部滚动来替代iScroll滚动是最好的一种方式，但很可惜，现在只有iOS5、6支持局部滚动，并且支持程度并不好，而Android压根就不打算支持。这样，我们就不得不使用iScroll。
问题来了，现在到底使用iScroll呢？还是不使用？使用的话，大部分Android设备在滚动时会很卡，如不使用，部分功能又实现不了。其实，这个问题也不必太纠结。
首先， 对于header、footer需要固定位置的页面，可以直接使用position:fixed实现。部分不支持fixed定位的浏览器问题也不大，这部分设备一般都是Android2.x的系统，配置也较低，相对交互而言，速度显然更加重要；
对于需要依赖固定高度实现切换动画效果的交互，应尽量保证滚动条在页面顶部时处理。必要时做出一些牺牲，舍弃部分影响用户使用流畅的交互；
尽量使用浏览器原生支持代替iScroll；
如果必须使用iScroll才能实现的功能，一定要控制在最小范围，不要在常用场景应用iScroll；
虽然iScroll在iOS下表现得非常出色，但是都应当尽量使用浏览器原生支持特性来实现功能，这样才能最大化保证交互操作的流畅性。
很长一段时间都有一个争论，有页面跳转是不是WebApp？我认为单独讨论single page webapp还是页面跳转是没有意义的，所有产品都是建立在用户需求之上。对于现有的single page webapp产品，浏览器没有准备好，硬件配置也没有准备好，函数运算效率、页面渲染都跟不上，尤其是Android设备。基于用户需求出发，一些意识形态的东西该抛弃就抛弃，放开的使用页面跳转，只要能让程序运行流畅的东西，就应该毫不犹豫的使用。
但凡事也没有绝对，在一定的功能范围之内，也可以使用炫一些的切换动画，在一个页面实现多个子功能。
基于以上对移动端浏览器混乱程度的理解，移动web产品要做到全平台适配，工作量无遗是巨大的，并且，由于HTML5的支持程度，也会导致大部分低端用户无法使用到一些高级特性，或表现效果不佳。而且，没必要为了适应低端Android用户让高端iOS用户也忍受着简陋无比的交互及界面。那么，将iOS、Android、Windows Phone分为不同的版本，做相应的功能适配还是很有必要的。
在iOS下，自由度比较高，能随意发挥，很多有创意的交互及设计，都能在Safari下表现得比较好；
Android下由于设备硬件配置及浏览器版本差异比较大，就会选择相应保守的方式，舍弃部分影响用户使用流畅的交互，以及影响页面渲染的界面设计；
对于Windows Phone我们是从WP8起步，这样会更好做浏览器兼容。 做分版本适配的目的，是为了在保证功能交互的前提下让每个用户都能得到最流畅的操作体验。
用原生控件做外壳和交互，保证流畅的用户体验和完整的推广渠道；使用HTML5来展示内容，保证内容的迅速迭代更新，即时响应用户需求。于是就诞生了Hybrid& App，这也是目前最流行最合适的一种App形式。
下面提出我个人的建议：
如果你的团队刚刚组建或者框架知识了解不深入，那么开发移动端，使用单一的库就行了。
比如：jQuery mobile或Zepto。
使用jQuery mobile可以省略很多UI设计或者说重构的一些工作，在公司团队中，如果没有这方面的成员时，可以使用此库。但是此库性能不好，兼容性一般，UI限制大，请慎重使用。
使用Zepto开发，性能上最好的，而兼容性比较好，跟jQuery有同样的API，只是需要自己设计UI，以及重构。touch功能上有一定的兼容性问题。推荐使用此库，这样你可以任意发挥你的想法。
如果你的团队具有一定的框架基础，像模块化开发的代表requirejs和seajs，那么，完全可以把这个项目进行模块化开发，把这两个库的任意一个加入到项目中，将对你项目的协同开发，以后的代码维护都将有很好的贡献。这两个库的学习成本不大，很容易上手。
如果你的团队，个个都是高手了，那么就可以进行mvc模式的开发了。在你的项目中，加入backbone+underscore，这是目前为止，最简单的mvc模式的开发组合。但是大家都知道，使用backbone，你就必须按照backbone的模式来进行项目的开发，具有一定的限制。也就是说，开发和维护，都需要了解backbone这个框架。
如果你的团队，个个是大牛的话，那么就可以使用angularjs或react了。这种模式的开发，现阶段是前端开发的最新研究成果了。此种框架，学习成本大，但是代表着公司的实力和创新。
当然，除了以上这些基础库和基础框架，我们可能还需要添加一些第三方库，比如iscroll，此库兼容性好，唯一缺点就是在低端设备上，会卡，所以项目不能全局使用iscroll实现滚动效果。我们需要添加原生的scroll来实现项目中的滚动效果，如果使用原生scroll不能实现的，那么才使用iscroll来实现。
比如：faskClick，它解决点击事件延迟的bug，当然zepto的touch模块也可以解决。
比如：模板引擎，像underscore，handlerbars等。
比如：HTML5的application cache本地缓存机制。
移动开发总结：
（1）jQuery mobile或者Zepto+自己设计UI
（2）seajs或requirejs+Zepto
（3）seajs或requirejs+Zepto+Backbone+underscore
（4）angularjs或react
我个人希望能够使用第三种，然后项目成熟了，再使用第四种。毕竟新技术的实践，还是很有想象空间的。
当然，如果对技术不需要深入，只要实现功能，那么使用第二种我觉得还是不错的。 至于第一种，我个人觉得模块化开发还是非常必要的，之前在公司里面看之前的前端负责人开发的一套系统，代码写的太混乱了，简直看不得，维护起来非常不方便，所以模块化开发，我个人觉得，必须使用。
关于移动端的UI组件，我推荐腾讯的frontUI。百度的gmu很久没更新了，也没人维护了，而且耦合性比frontUI大，不推荐。
关于移动端的调试工具，我暂时只用过weinre。由于公司网络不行，我使用的是低版本的weinre，只支持safari调试，而且反应比较慢。但是，还是能够解决问题的，只是效率不高。网上有很多教程，百度一下就知道怎么用了。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致前端在线资源
本文地址：
一、起始之语
我一直都是在PC上折腾网页的，这会儿怎么风向周边捣鼓起手机网页开发呢？原因是公司原先使用Java开发的产品，耗了不少人力财力，但是最后的效果却不怎么好。因为，Android系统一套东西，iPhone又是新的一套，折腾死人呐。
于是总监发狠，让我把手上的活都交出去，专心折腾web版的，看看最后效果如何。
加上我觊觎手机上的开发学习很久了，于是，一拍即合，搞起了手机开发方面的学习。
分享是很好的提高自身学习的方法。因为分享过程中梳理了所学，往往会有些意想不到的心得与收获。如此利人利已的事情，自然乐意为之。于是，自己在文章id > 2000 的这一历史性时刻，新建了一个“mobile相关”的分类目录，把移动相关的一些东西总结，整理，分享出去，大家共勉。
二、我的选择
显然，当下手机web开发移不开CSS3 + HTML5以及JavaScript。目前，也应运而生了很多开发的框架，有胶水层的，也有显示层的（不罗列）。因为个人偏好以及筛选，决定使用PhoneGap实现与设备相机，通讯录等交互，jQuery Mobile实现页面UI的显示以及相关交互。
如果时间足够，我想我会针对项目本身重新搞个更轻便灵活的交互框架。考虑到现实情况，还是决定使用他人的UI框架。
下截图为今儿个上午( 11:11)跑通的第一个PhoneGap下的Android手机程序：
不过PhoneGap是与胶水层打交道的东西，要说到这东西还需要些时日。我们可以先把目前投向与页面显示相关的UI框架上。例如，本文要说起的jQuery Mobile。
三、我眼中的jQuery Mobile
目前为止，jQuery Mobile的正式版还没有出来，但是这并不妨碍对其的使用。上说其代码轻量(lightweight code)。可能跟Sencha Touch相比确实轻量。但是，在我看来（本身为框架的原因），其实代码还是蛮啰嗦的（例如CSS文件min后有49K之多）。对于实际的项目而言，皮肤风格不可能几种并存的，所以，其a~e的五种模板选择实际有些多余，很多都是打酱油的命。
而且，实际项目中的设计师设计东东的时候不可能是总是跟着jQuery Mobile的UI来的。因此，我们难免会碰到对其模板进行修改或是新添加的情况。
不过，我可以确信的是，如果在个人网站或是其他一些非对外的中小项目上使用jQuery Mobile的话，一定会爽歪的！
然后，还有一点我得承认。jQuery Mobile的上手可比Sencha Touch快多了。其UI显示基本上就是基于HTML5的data-自定义属性来的，跟它的老爸爸jQuery一样，确实是write less, do more.
页面元素的UI显示完全可以根据HTML代码内容和属性而来，不需要任何额外的JavaScript代码或是CSS代码，有模有样的手机页面效果就可以出炉。而且，要出效果页面，你只要静下心花个1整天的时间把官方的介绍文档看一篇就可以了。真这么简单。
例如下面这个纯显示的页面们（PC建议使用Chrome浏览器围观）。
您可以狠狠地点击这里：
手机可以访问以下地址：
这是在桌面版opera 10.1 mobile下的显示效果：
默认进入：
选择“文章搜索”项 → 点击搜索框后：
如果是在Android系统或是iPhone上，渐变效果，平滑切换效果都会显露出来的。
上面加起来差不多有10多个HTML页面，捣鼓了几个小时就出来的，当然是在无敌模式下。为什么快呢？因为基本上没有动一点新的CSS代码或是JavaScript代码。直接write HTML即可。如果你对jQuery Mobile熟悉的话，可以更快。
要想使用jQuery Mobile，很重要的一点就是要注意语义化。到不是使用HTML5之类的标签（考虑到渐进增强，jQuery Mobile使用的还是XHTML时代的标签），而是div, p, ul ,li, h1~6等的使用。
在jQuery Mobile标签下，不同的标签所对应的UI效果很多都已经定死了。例如：
&div data-role="header">
&h1>鑫空间-鑫生活&/h1>
&a href="#" data-icon="arrow-r" data-iconpos="right">中文&/a>
上面这段data-role为header的div中，h1标签不仅仅是个标题了，而是直接会修改当下页面的title值，因此，上面几行代码对应的页面的title就是“鑫空间-鑫生活”，即使你头部的title写的是“今天是小光棍节，呼啦啦~~”。
而后面的a标签文字虽然没有指定data-role="button"，但是，谁叫他生在data-role="header"的div下呢，于是，它就是个显示按钮的命。而且，JMobile自动将其定位到右侧了。
语义化的标签决定了其位置，显示等。确实方便，但是有所限制。可谓有利有弊。
还有列表li标签中的第一个图片，会自动变成列表缩略图等，好多好多，你试一下就会发现这东西还是挺有意思的。
嘛，不过吗，不用急，冰冻三尺非一日之寒，什么东西都是慢慢积累的。才刚开始，说多了未必是好。所以，本文就唠叨这么多。
原创文章，转载请注明来自[]
本文地址：
（本篇完）
相关文章 (0.297) (0.228) (0.223) (0.223) (0.149) (0.101) (0.089) (0.089) (0.089) (0.086) (RANDOM - 0.012)
标签： , , , , , , , , ,
赞助商广告()：
如果你月薪不足20K，不妨
这里有最全的web前端开发视频
如果你有1~3年前端开发经验，不妨
听说、你想学JS？不妨
热门总排行