说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

移动开发必备!15款jQuery Mobile插件

HTML文档下载 WORD文档下载 PDF文档下载
本文细数了15款非常优秀而又实用的jQuery Mobile插件,类型甚广,从抽屉式导航菜单、iOS style、手风琴导航、隐藏/显示密码、灯箱特效,到颇为酷炫的交互式地图、页面震动、相册/画廊展示等,总有一款会让你着迷。

移动互联网的发展,来自PC端的网页并不能完全自适应移动端页面需求,使得响应式设计体验产生并成为潮流,也正是这样一种需求,促成了jQuery Mobile的流行。jQuery Mobile这样一款基于jQuery和jQuery UI的框架,继承了jQuery的“write less,do more”精髓,具有良好的扩展性和可定制性,全面兼容各种平台设备,对于不支持的手机类型,也会予以基础样式。


本文细数了15款非常优秀而又实用的jQuery Mobile插件,类型甚广,从日期/时间选择、即时声音通知、抽屉式导航菜单、iOS style、手风琴导航、隐藏/显示密码、灯箱特效,到颇为酷炫的交互式地图、页面震动、Native、相册/画廊展示等,总有那么一款会让你着迷。

1. Mobiscroll

对于许多开发者而言,Mobiscroll并不陌生,甚至可以说是相当熟悉。Mobiscroll是一款很不错的jQuery Mobile插件,主要用于触屏设备的旋转滚动/日期和时间选择。通过它,用户只需滑动数字即可进行日期和时间选择(点击链接查看Demo)。


Mobiscroll不仅支持任意自定义值,让用户完全自定义主题,还可用于下拉列表本地选择控制。此外,使用起来也是非常方便,不仅为开发者提供了相当高大上的配色方案,而且可完全通过CSS文件进行样式修改。支持包括iOS、Android、WP8、Windows 8、BlackBerry等在内的所有主流移动及桌面浏览器。

2. Ion.Sound

今时今日,无论是Web还是移动网站,都充斥着各种各样的事件,比如新邮件、新聊天信息、内容更新等。但却常常存在着这样一个问题,就是即时通知无法立即引起用户注意。而通过Ion.Sound插件,则可以很好地实现这一任务。


Ion.Sound是一款用于播放事件声音的jQuery插件,采用MIT许可证,包含有25种免费声音。截至目前,Ion.Sound已成功运用于Google Chrome、Mozilla Firefox、Opera、Safari、IE(9.0+)等桌面浏览器,并支持所有主流移动浏览器。

3. jQuery.mmenu

jQuery.mmenu是一款用于创建平滑的抽屉式导航菜单的jQuery插件,只需短短一行JavaScript代码,即可在移动网站中实现类似于移动App外观的非常酷炫的滑动菜单。


通过jQuery.mmenu,开发者可以将无序列表转换成菜单项,并进行自定义设置。jQuery.mmenu不仅为开发者提供了诸如打开、关闭、切换等常用菜单的定制,还提供了菜单位置(居左/居右)、是否显示菜单项计数器等选项的设置。

4. Naver

Naver是一款专门用于创建响应式导航的jQuery插件。通过它,开发者可以轻易地制作出对移动端非常友好的导航效果,还可制作动态导航。Naver兼容Firefox、Chrome、Safari、IE(7+),基于MIT许可证发布,无论是个人或商业项目中,均可自由免费使用。


5. iosOverlay.js

iosOverlay.js是一款用于创建iOS风格的提示/通知效果的jQuery插件,支持IE7+、Google Chrome、Firefox、Opera、Safari(桌面版及移动版)。需要提醒的是,如果想要防止图标在加载时闪烁,开发者需要预加载图像资源。


此外,iosOverlay.js还存在两个可选的依赖项,即Spin.js和jQuery。如果开发者想使用其下拉列表对象,就必须要用到Spin.js,而对于不兼容CSS动画的浏览器,则需jQuery提供支持。

6. Easy Responsive Tabs

Easy Responsive Tabs是一款轻量级的响应式Tab选项卡/手风琴导航jQuery插件,支持同一页面使用多个范例,跨平台支持Web、平板电脑及移动设备。该插件能够自适应屏幕大小,默认样式为水平/垂直Tab选项卡,随着窗口变小,会自动切换为手风琴样式。


7. Hide/Show Password

Hide/show Password插件可以让你轻易隐藏和显示密码输入框中的内容。该插件最酷的地方就是“innerToggle”选项。当设置为开时,开发者可以自定义创建非常漂亮的隐藏/显示控件。而且在触屏浏览器中进行滑动时还可保持输入焦点。


8. Swipebox

Swipebox是一款精美的jQuery灯箱特效插件,可用于桌面、移动和平板设备。在移动设备上,支持滑动手势导航,而在桌面上则可使用键盘导航。不支持CSS3过渡特性的浏览器可使用jQuery降级处理,支持视网膜显示,能够通过CSS轻松定制。


当用户点击目标图片时,照片将会以全尺寸的方式展示,此外,用户还可对同组的图片进行左右切换来进行查看,非常适合用于做照片画廊以及查看大尺寸图片。

2013中国大数据技术大会讲师议题正式发布 “2013中国大数据周”即将开幕 正式发布中国大数据现状白皮书 搜狐畅游发布3D游戏引擎Genesis-3D 基于MIT协议开源 传闻微软将收购AOL旗下的Winamp和Shoutcast 【BDTC讲师】大数据时代“掘金机”:百度、360、一淘搜索技术分享 谷歌董事长:审查,将会在十年内消失 50万奖金+天使投资:创维天赐家庭互联网创新大赛开幕 专利案苹果获胜:获赔2.9亿美元 三星不服将继续上诉 Google正打造Spark:一个基于Chrome App的集成开发环境 研发周报:成为一名PHP专家其实并不难 将Vistual Studio打造成为Node.js IDE 度量Web性能的关键指标 路由器未火够!高通发布互联网处理器 Unite2014大会:移动开发者的饕餮盛宴 玩与学并存 Kano kit让你自制Raspberry Pi电脑 【BDTC讲师】Hortonworks Gunther&Ted:HBase、Stinger的发展与实践 人人网推出开放平台2.0 多项重大改进吸引开发者回流 红帽高管:将Linux价值理念和做法延伸到OpenStack Fundation 5发布:号称最快版本,响应式用户体验更完善 程序员远程工作必会编程语言JavaScript 苹果确认收购3D传感技术公司PrimeSense 从电影《饥饿游戏》里学到的IT知识 细数IE11的七大变化 2013中国大数据技术大会,你不可错过的10个理由 Unity 2D全球发布,开发者梦想照进现实 Kraken:改变PayPal开发文化的Node.js框架 微软高管:我们将不会再有三个Windows平台 中兴明年推智能手表 暂只能与自家手机搭配使用 移动开发必备!15款jQuery Mobile插件 Chrome新变化:在地址栏里增加搜索按钮 电信行业大数据实践走进大数据大赛:电信网络寻呼黑洞分析 please help me 怎么样才可以把系统存储过程的结果写到结果集里? 如何声明和使用自定义对象(如:Tdataset)的事件(beforecancel)?? 一个奇怪的问题? 各位兄弟,谁知道哪里有pb7的下载? 天呐 我提的问题从来没人回答 SQL Server小小问题 请问那里有DELPHI第二张光盘下载! 如何是使用describe来获取datawindow中的带区参数? 谁有早期的TeeChart5.ocx,文件大小为2,576,384,发行日期在2001-06-17号以前的,我这里有个crack软件,但是新下载的不行,所以重金寻求!!! 请问C语言中有字符串查找函数吗? 请问如何动态的改变应用程序的图标,一定给分 Query主从表编辑问题,从不丢失! 急急急!!!! 高分求禁止IE的自动谈出的广告,有个软见也行,或者告诉实现方法。请告诉下载的网址。 打印一些清单在delphi中用哪些控件比较好? 如何打印到文件 如何得到WINDOWS的拼音字库 如何在BCB中进行SDK编程? 一个简单关于对话框的问题------->> 用asp将图片插入数据库,到底错在哪?苦恼啊!以前这个也通过了(win2000server+Sql7.0)但...(高分!!!!) 为什么我在Access2000的mdb中只能最多得到一条记录? 男人25岁就大吗? 关于 C 类IP的屏蔽 配置为COM+组件后,CoCreateInstance 失败! 关于C 类 IP的屏蔽 有谁知道本.拉登的QQ,俺找他有事?重奖`~~~~~~~~~~~~~~~~~~~! 有没有人告诉我,HTTP头跟正文中间夹的什么? 请问asp和php能访问webservice吗??? 如何一打开NOTE客户端就执行我的数据库(不能设书签)? true dbgrid控件怎么使一个网格又下拉的列表弹出来 关于计数器的代码 那里有含有K线图的图表控件和像OFFICE的工具栏控件下载? 十万火急!如何在Dialog上显示Menu??(我只能给到27分了) 十万火急!如何在Dialog上显示Menu??(我只能给到27分了)十万火急! 问一下,笔记本上的软驱通用吗? maskedit的问题? delphi中报表的问题 关于常用的几种压缩编码? tomcat启动出错,请问什么原因? 一个小问题。回答就给分? 在JSP页面中,能否嵌入ActiveX控件 增加控件的成员变量对程序有什么影响?会使EXE变大吗? shr 是什么意思? 我想用delphi删除一文件夹下面的全部文件,我可以删除一条记录,但无法自动删除全部,数据,我该如何做??? 77分征收四个Delphi中buttons的bmp图标--顶张、下张、上张、末张! 有谁用C++Builder做过corba SQL Server编程求解!!!!! 请问如何测试C#代码的运行瓶颈以便进行优化 80端口是干什么用的 我快要疯了!有关最简单的mdb数据库连接也出问题 win2000 sever 的问题(高手请进) 花生是不是又称为长生果? 用一根长48厘米的铁丝焊接长一个长方体,已知长,宽,高的比是3:2:1,求这个长方体的表面积和体积. 用8个棱长是1厘米的正方体拼成一个长方体,平成的长方体的表面积最大是多少? 书为什么会被人类称为“长生果”? 棱长是a的两个小正方体拼成一个长方体,长方体的表面积比两个小正方体的表面积之和减少了多少? 用10块棱长为1厘米的正方形体积木堆平成一个长方体,这个长方体的表面积最小是( ) 沿圆柱的直径把圆柱切成两半后,截面是个正方形,表面积增加50平方分米,圆柱的表面积和体积 一个小正方体的棱长是3cm,用3个这样的小正方体拼成一个长方体,长方体的表面积比3个正方体的表面积之和减少多少平方厘米? 育才小学115人去秋游,怎样租车跟省钱?大客车坐40人 每辆1000元 小客车坐25人 每辆650元 请用表格解答表格里的内容是怎样算出来的要说 帮帮忙我把家底都掏出来了 花生的英文名是什么? 有一桶水,用同样大小的瓶子去装,如果灌满8瓶后,桶内还剩七分之六,如果灌满7瓶后,桶内还剩2分之49.这桶水有多少千克 有一桶水,用同样大小的瓶子去装.如果灌满后还有七分之一,如果灌满7瓶后还剩6升,这桶水原有多少升? 一个长方体的长、宽、高分别是a米、b米、h米.如果高增加3米,新长方体的表面积增加多少平方米? 英语翻译做包装的英文 有一桶水,用同样大小的瓶去装,如果灌满8瓶后,桶内还剩6/7,如果灌满7瓶后,桶 某书店以“20元办会员享受8折优惠”的方式进行促销,你认为在什么情况下办会员卡消费合算? 史努比所在的书的英文名是什么?是叫花生还是叫Snoopy?我想买英文原版的, 实验小学组织春游活动,共有230名师生参加.现在要去公交公司租车,公交公司提供了一下2种车型(数学高手来大巴车:限坐52人,每辆车每天租金250元.中巴车:限坐34人,每辆车每天租金200元.1) 一个长方体的长宽高分别是6米,5米,4米.如果高增加2米,新长方体的表面积比原来增加多少平方米? 有机花生是啥意思? 实验小学师生共198人去春游,有两种车供选.大客车:限乘55人 中巴车:限乘35人大客车租金400元/辆,中巴车租金280元/辆.请设计一个最省钱的租车方案,并算一算租金是多少钱.(要算式+答案) 某书店以“20元办会员卡8折优惠”的方式进行促销,你认为在什么情况下办会员卡和算 一个圆柱,底面半径是3分米,侧面展开是正方形.这个圆柱的表面积是()平方厘米?体积是()立方厘米.把它截成2段,表面积增加了()平方厘米 实验小学六年级的同学们乘大客车去春游,如果每辆车坐60人,则有15人不能上车,如果每辆车多坐5人,恰好多出一辆车,一共有几辆车?一共有多少个学生? 一桶油,第一次用去5分之2,第2次比第1次多2千克,桶里还剩下3千克.这桶油原来有多少千克? 一个圆柱的表面积比侧面积大12.56dm的平方,高是3dm,这个圆柱的体积是多少立方厘米? 三个同样大的正方体拼成一个长方体后,表面积减少了114cm²,这个长方体的表面积是多少平方厘米?要详细的介绍每一步求什么 土豆,芋头这些淀粉类的吃多了会导致长胖啊? 一个长方体的棱长之和是36厘米,长、宽、高的比是5:3:1,这个长方体的表面积是( ),体积是( )谢谢了! 芋头可以和莲藕一起吃吗?我想把芋头,莲藕排骨一起熬汤不知道可不可以?希望有人可以替我解答下~!谢谢咯~!~! 用果实、茎和根给油莎果、南瓜、芋头、红薯、莲藕、萝卜、姜和土豆分类 一个长方体的长、宽、高的比是3:2:1,它的棱长总和是48厘米 ,求此长方体的表面积 藕、洋葱、番薯、胡萝卜、芹菜等植物中,供我们食用的部分分别属于植物的哪一种营养器官?为什么? 已知圆柱底的半径是3dm,高是10dm,求表面积 小客车每辆600元,限乘12人;大客车每辆1300元,限乘30人.共有师生73人,怎样租车最省钱?租金共多少元2门票问题太.信息;门票每人40元,团体票价格如下表.算一算:购票至少需多少元?人数30--50 51-- 莲藕的食用部分是什么 一个圆柱的高是10dm,底面积的半径是3dm,它的表面积是多少 一个圆柱底面直径是20分米,高是6分米,沿着底面直径把圆柱切成两半,这个圆柱的表面积增加了多少? 下列各项中,除哪种植物外,我们食用的部分是植物的茎A藕B马铃薯C甘薯D甘蔗 圆柱底面积半径3dm 求表面积? 落花生名字的由来 下面是一个长方体的展开图,求围成的长方体的表面积和体积.(单位:厘米) 一个长方体的棱之和是36厘米.已知长是4厘米,宽是3厘米.求这个长方体的表面积. 落花生的名字由来 下面是一个展开图求围成长方体的表面积和体积长是7厘米、宽是5厘米、高是3厘米 把一个长10dm,底面半径3dm的圆柱锯成四段小圆柱,表面积增加了多少 《落花生 》名字的来历 求下面长方体的表面积和体积,长2分之1,宽5分之1,高5分之1,要算式,递等式 一个长方体的棱长之和是36厘米.已知长是4厘米,宽是3厘米,求这个长方体的表面积急1 课文《落花生》名字由来五年级语文《落花生》名字的由来. 下图是一个长方体的表面展开图,根据条件,求出这个长方体的表面积和体积. 一个长方体的棱长和是36厘米,已知长是4厘米,宽是3厘米.求这个长方体的表面积.(快!) 一桶水,把水加到原来的2倍,连桶重10千克,要时把水加到原来的4倍,连桶重18千克,桶里原有多少水? 用两个完全一样的长方体平成一个大长方体,这个长方体的表面积最小是多少平方厘米?长方体的长6厘米,宽2厘米, 某书店以“50元办理会员卡,享受七五折优惠“,你认为在什么情况下办理会员卡消费合算 用一根长48厘米的铁丝焊接成一个长方体,已知长、宽、高的比是1:2:3,长方体的表面积是多少?体积是多少 把两个表面积是30平方厘米的正方体,平成一个长方体,这个长方体的表面积是多少?我急用.快 某书吧的会员卡100元一张,会员的消费打八折,那么当消费达到多少元以上时买会员卡比较划算.A.100 B.300 C.500 D.600 将一根长48厘米的铁丝焊成一个长方体,已知长宽高得比是3;2;1,这个长方体的表面积是多少平方厘米 用三个长5厘米,宽3厘米,高2厘米的长方体平成一个表面积最大的长方体,这个长方体的表面积是多少
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn