在线情况
楼主
  • 头像
  • 级别
  • 徽章
  • 职务总版主
  • 声望+14
  • 积分1530
  • 经验278129
  • 文章2378
  • 注册2003-06-14
jQuery Mobile 1.2版本新特性(Popup)
Widgets
?jQuery Mobile最核心的地方就在于widgets。提供了与用户交互的界面。在最新的版本中,加入了一个全新的widget:popup modal。
Popups (弹出层)
?弹出层是一个覆盖于页面其它内容的小的区域。可以用来设计提示栏,显示照片,地图或者其它内容。在jQuery mobile 1.2中,实现了这个超棒的widgets。
?在本篇文章中,我们将使用如下代码框架来演示代码:

< html>
< head>
? ? ?
? ? ?jQuery Mobile 1.2
? ? ?
? ? ?
? ? ?
< /head>
< body>
? ? ?

? ? ? ? ?
? ? ?

< /body>
< /html>
这里我们使用CDN来加载javascript。
?友情提示:请大家使用Chrome来访问以下的“在线调试”地址,谢谢!
?为了添加popup弹出层,我们需要添加如下属性来定义所参考类型是popup:
data-rel="popup"
然后定义具体的插件类型,如下:
data-role="popup"
展示的触发层内容,可以是表单,菜单或者图片,完整代码如下:
Open Popup
< div data-role="popup" id="simplepopup">
? ? ?

This is a completely basic popup, no options set.


< /div>
在线调试[IMG]http://www.2cto.com/uploadfile/2012/1121/20121121040042550.png[/IMG][P][LINE-HEIGHT=28px][FACE=宋体][COLOR=rgb(51, 51, 51)][SIZE=14px]Tooltips(工具提示条)
?使用popup我们还可以创建工具提示条,如下:
Find out more
< div data-role="popup" id="tooltip" data-theme="e">
? ? ?

You found out more!.


< /div>
在线调试
Menus(菜单)
?下面我们生成一个菜单,如下:
Menu
< div data-role="popup" id="menu" data-theme="a">
? ? ?
< /div>
在线调试[IMG]http://www.2cto.com/uploadfile/2012/1121/20121121040046680.png[/IMG][/SIZE][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=28px][FACE=宋体][COLOR=rgb(51, 51, 51)][SIZE=14px]当然,你也可以生成可缩放list,如下:
Nested Menu
< div data-role="popup" id="nestedmenu" data-theme="none">
? ? ?

? ? ? ? ?

? ? ? ? ? ??

Colors


? ? ? ? ? ??

    ? ? ? ? ? ? ? ? ?
  • Red

  • ? ? ? ? ? ? ? ? ?
  • Blue

  • ? ? ? ? ? ??

? ? ? ? ?

? ? ? ? ?

? ? ? ? ? ??

Shapes


? ? ? ? ? ??
? ? ? ? ?

? ? ?

< /div>
在线调试[IMG]http://www.2cto.com/uploadfile/2012/1121/20121121040047247.png[/IMG][/SIZE][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=28px][FACE=宋体][COLOR=rgb(51, 51, 51)][SIZE=14px]Form(表单)
?我们也可以生成弹出式样的登录表单,如下:
Login
< div data-role="popup" id="login" data-theme="a">
? ? ?

? ? ? ? ?

Please sign in


? ? ? ? ?
? ? ? ? ?
? ? ? ? ?
? ? ? ? ?
? ? ? ? ?
? ? ?

< /div>
在线调试[IMG]http://www.2cto.com/uploadfile/2012/1121/20121121040048916.png[/IMG][/SIZE][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=28px][FACE=宋体][COLOR=rgb(51, 51, 51)][SIZE=14px]Dialogs(对话框)
?对话框也是我们常用的,如下:
Dialog
< div data-role="popup" id="dialog" data-overlay-theme="a" data-theme="c">
? ? ?

? ? ? ? ?

Delete Page?


? ? ?

? ? ?

? ? ? ? ?

Are you sure you want to delete this page?


? ? ? ? ?

This action cannot be undone.


? ? ? ? ?No
? ? ? ? ?Yes, Delete it
? ? ?

< /div>
在线调试[IMG]http://www.2cto.com/uploadfile/2012/1121/20121121040049806.png[/IMG][/SIZE][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=28px][FACE=宋体][COLOR=rgb(51, 51, 51)][SIZE=14px]Photos(图片展示)
?使用悬浮方式展示图片,如下:
Photo
< div data-role="popup" id="photo" data-overlay-theme="a" data-theme="d" data-corners="false">
? ? ?Close
< /div>[/SIZE][/COLOR][/FACE][/LINE-HEIGHT][/P]
LeadBBS 官方论坛(asp论坛)感谢您的参与
在线情况
2
  • 头像
  • 级别
  • 徽章
  • 职务总版主
  • 声望+14
  • 积分1530
  • 经验278129
  • 文章2378
  • 注册2003-06-14
在线调试[IMG]http://www.2cto.com/uploadfile/2012/1121/20121121040056422.png[/IMG][P][LINE-HEIGHT=28px][FACE=宋体][COLOR=rgb(51, 51, 51)][SIZE=14px]List Views (可缩放列表)
?这个效果肯定你也会需要:

? ? ?

Favorite Spice Girl?


? ? ?
< /div>
在线调试[IMG]http://www.2cto.com/uploadfile/2012/1121/20121121040059640.png[/IMG][/SIZE][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=28px][FACE=宋体][COLOR=rgb(51, 51, 51)][SIZE=14px]功能加强
?其它的更新包括了一些功能上的加强。
jQuery支持更新
?开始支持jQuery1.8。sizzle.js的重写带来了性能的提升及其其它。并且开始考虑放弃支持1.6,如果你使用旧版本的话,可能会不舒服。
?列表视图的自动分隔
data-autodividers="true"
原来:
[IMG]http://www.2cto.com/uploadfile/2012/1121/20121121040100489.png[/IMG][/SIZE][/COLOR][/FACE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=28px][FACE=宋体][COLOR=rgb(51, 51, 51)][SIZE=14px]现在:
[IMG]http://www.2cto.com/uploadfile/2012/1121/20121121040104553.png[/IMG][/SIZE][/COLOR][/FACE][/LINE-HEIGHT][/P]
LeadBBS 官方论坛(asp论坛)感谢您的参与
Page created in 0.0117 seconds with 4 queries.