【初探移动前端开发05】jQuery Mobile (整合版)

时间：2022-09-06 22:09:54

前言

为了方便大家看的方便，我这里将这几天的东西整合一下发出。

里面的例子请使用手机浏览器查看。

什么是jQuery Mobile？

jquery mobile是jquery在移动设备上的版本，他是基于jquery、HTML5、CSS3构建的，他提供了一个丰富的交互性强的接口用以兼容不同移动平台。

于是我们去下载一番：

【初探移动前端开发05】jQuery Mobile (整合版)

我这里就直接下载的这个压缩文件了，完了我们看看他有些什么东西，我们这个还是要依赖jquery的，所以还是准备一个吧。

这个东东是个好东西哦，他还有配套的样式呢，依赖他我们可以开发一套不错的手机应用呢。

自定义属性

在jquery mobile中，是使用自定义属性驱动页面的（data-....），比如：

data-role

定义元素在页面中的角色，该属性允许定义不同的组件元素及页面视图：data-role="page"

data-title

定义jquery mobile视图页面标题

data-transition

定义视图切换的动画效果

data-rel

定义具有浮动效果的视图

data-theme

指定元素或者组件内主题样式风格

data-icon

在元素内增加小图标

data-iconpos

定义小图标位置

data-inline

指定按钮根据内容自适应其长度

data-type

定义分组按钮水平或者垂直方向排布

data-rel

定义具有特定功能的元素，例如data-rel="back"返回按钮

data-add-back-btn

指定视图页面自动在页眉左侧添加返回按钮

data-back-btn-text

指定由石头页面自动创建的返回按钮的文本内容，该属性的使用通常都需要和data-add-back-btn配合

data-position

该属性是实现在滑动屏幕时工具栏的显示和隐藏状态

data-fullscreen

用于指定全屏视图页面

data-native-menu

指定下拉选择功能采用平台内置的选择器

data-placeholder

设置下拉选择功能的占位符

data-inset

实现内嵌列表功能

data-split-theme

设置列表右侧图标的主题样式风格

data-filter

开启列表过滤功能

搞了这么多自定义属性，我们也不知道什么是什么，所以不如来试一试吧。

页面与视图

页面与视图作为移动web应用程序最重要的用户界面之一，他主要承担整个web应用程序的界面呈现工作。

jquery mobile提供一套自定义元素属性用于搭建各种页面和视图。

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link href="jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css" />

     <script src="jquery-1.7.1.js" type="text/javascript"></script>

     <script src="jquery.mobile-1.3.1.js" type="text/javascript"></script>

 </head>

 <body>

     <div data-role="page">

         <div data-role="header">页头

         </div>

         <div data-role="content">内容

         </div>

         <div data-role="footer">页脚

         </div>

     </div>

 </body>

 </html>

http://sandbox.runjs.cn/show/itndsvbq

【初探移动前端开发05】jQuery Mobile (整合版)

不要说还是有点感觉的。。。

我们在实例中使用div元素作为视图页面的布局元素但是我们这里改为html的元素更加好：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"  href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

     <script id="jquery_182" type="text/javascript" class="library"  src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <script id="jquerymobile_120" type="text/javascript" class="library"  src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

 </head>

 <body>

     <section data-role="page">

         <header data-role="header">页头

         </header>

         <article data-role="content">内容

         </article>

         <footer data-role="footer">页脚

         </footer>

     </section>

 </body>

 </html>

多视图web页面

前面只有一个视图，我们现在来看看多视图页面怎么处理：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <script id="jquerymobile_120" type="text/javascript" class="library"

     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

 </head>

 <body>

     <section data-role="page" id="v1">

         <header data-role="header">视图一

         </header>

         <article data-role="content">

             <a href="#v2">去视图二</a>

         </article>

         <footer data-role="footer">页脚

         </footer>

     </section>

      <section data-role="page" id="v2">

         <header data-role="header">视图二

         </header>

         <article data-role="content">

             <a href="#v1">去视图1</a>

         </article>

         <footer data-role="footer">页脚

         </footer>

     </section>

 </body>

 </html>

http://sandbox.runjs.cn/show/l4vejd6v

【初探移动前端开发05】jQuery Mobile (整合版)

我们点击超链接可以在视图一与视图二切换，你会发现还有一点点动画效果呢！！！

PS：在此若是设置了data-title将改变手机上title的标题

动画

我们可以设置6钟动画效果：

① Slide 从右到左切换

② Slideup 从下到上切换

③ Slidedown 从上到下切换

④ Pop弹出框方式打开

⑤ Fade 渐变褪色方式

⑥ Flip飞入飞出方式

这里我就不截图了，我私下试试去。

<a href="#v1" data-transition="pop">去视图1</a>

效果感觉不错哦！！！

dialog对话框

只要在标签的data-rel设置了dialog属性，视图就具有dialog浮动层效果。

<a href="#v2" data-rel="dialog">去视图二</a>

【初探移动前端开发05】jQuery Mobile (整合版)

这里有点表现不佳，我们暂时不管他。

页面主题

<section data-role="page" id="v1" data-theme="a">

关于自定义属性的东西暂时写到这里，我们来看看我们比较重要的按钮。

按钮

按钮在移动web应用程序中式非常重要的用户界面组件，主要用作为用户提供各种操作入口和视图交互功能，我们的jquery mobile提供了很多不错的按钮。

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <script id="jquerymobile_120" type="text/javascript" class="library"

     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

 </head>

 <body>

   <div data-role="button">我是按钮</div>

 </body>

 </html>

【初探移动前端开发05】jQuery Mobile (整合版)

于是我们的按钮就出现啦，在页面上独占一行。

input 中button、submit等也都变成了这个样式了

小图标

jquery mobile提供了一套小图标：

【初探移动前端开发05】jQuery Mobile (整合版)

图标太多，我这里简单列两个：

delete：删除，data-icon="delete"

plus：加号，data-icon="plus"

PS:设置data-iconpos="notext"便可以只要图标不要文字

   <div data-role="button" data-icon="delete">删除</div>

   <div data-role="button" data-icon="delete" data-iconpos="notext">删除</div>

   <div data-role="button" data-icon="delete" data-iconpos="right">删除</div>

http://sandbox.runjs.cn/show/xd9axexu

【初探移动前端开发05】jQuery Mobile (整合版)

若是系统提供的图标不能满足条件的话，便可以自定义图标

data-icon="myapp-email"

myapp-email就是自定义图标的名称（需要上传）

css中对应的样式是.ui-icon-myapp-email

自定义图标大小是18*18，建议png-8

按钮分组

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <script id="jquerymobile_120" type="text/javascript" class="library"

     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

 </head>

 <body>

     <div data-role="controlgroup" data-type="horizontal">

         <div data-role="button" data-icon="plus">

             添加</div>

         <div data-role="button" data-icon="delete">

             删除</div>

         <div data-role="button" data-icon="refresh">

             修改</div>

     </div>

     <div data-role="controlgroup" data-type="horizontal">

         <div data-role="button" data-icon="plus">

             添加</div>

         <div data-role="button" data-icon="delete">

             删除</div>

         <div data-role="button" data-icon="refresh">

             修改</div>

     </div>

 </body>

 </html>

http://sandbox.runjs.cn/show/u7cydmrv

【初探移动前端开发05】jQuery Mobile (整合版)

感觉还不错的说，这里还可以为各个按钮设置主题，看起来就更加有分别了。

Bar 工具栏

工具栏也是一重要组件，我们这里结合前面的按钮来完成一完整的工具栏。

jquery mobile提供两组工具栏：

Headers bar

充当视图页面的标题作用，在一般情况下header bar位于页面的顶部，一般包含2按钮
Footer bar

这个工具栏一般位于尾部，就是与header bar对应的东东

初体验：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <script id="jquerymobile_120" type="text/javascript" class="library"

     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

 </head>

 <body>

 <div data-role="page">

   <header data-role="header">

     <h1>header bar</h1>

   </header>

   <div>内容区域</div>

   <footer data-role="footer">

     <h2>footer bar</h2>

   </footer>

 </div>

 </body>

 </html>

【初探移动前端开发05】jQuery Mobile (整合版)

我们在此基础上改下：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <script id="jquerymobile_120" type="text/javascript" class="library"

     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

 </head>

 <body>

 <div data-role="page">

   <header data-role="header">

     <h1>header bar</h1>

   </header>

   <div>内容区域</div>

   <footer data-role="footer">

     <div data-role="controlgroup" data-type="horizontal" >

         <div data-role="button" data-icon="plus" data-theme="a">

             添加</div>

         <div data-role="button" data-icon="delete" data-theme="b">

             删除</div>

         <div data-role="button" data-icon="refresh" data-theme="c">

             修改</div>

     </div>

   </footer>

 </div>

 </body>

 </html>

http://sandbox.runjs.cn/show/icqp5f8v

【初探移动前端开发05】jQuery Mobile (整合版)

导航工具条

navbar是非常有用的，他提供不同数量的按钮组合，一般位于header或者footer中

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <script id="jquerymobile_120" type="text/javascript" class="library"

     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

 </head>

 <body>

 <div data-role="page">

   <header data-role="header">

     <h1>header bar</h1>

   </header>

   <div>内容区域</div>

   <footer data-role="footer">

     <nav data-role="navbar">

         <ul>

             <li>

                 <a href="#" class="ul-btn-active" data-icon="home">主页</a>

             </li>

             <li>

                 <a href="#"  data-icon="search">查找</a>

             </li>

             <li>

                 <a href="#"  data-icon="info">信息</a>

             </li>

         </ul>

     </nav>

   </footer>

 </div>

 </body>

 </html>

http://sandbox.runjs.cn/show/pwbcm0mo

【初探移动前端开发05】jQuery Mobile (整合版)

各位感觉还行吧。。。

fixed工具栏

这个家伙提供后，我们在轻触屏幕或者滑动屏幕时，header和footer都会出现或者消失

<header data-role="header" data-position="fixed">

内容区域格式布局

网格布局

jquery mobile提供一种多列布局功能，由于移动设备的屏幕大小原因，一般情况还是不要使用多列布局啦。

jquery mobile提供一种css样式规则来定义多列布局，对应css为ui-block，每列的样式是通过定义前缀+“-a”等方式对网格的列进行布局，a字母根据网格的列数而定。

例如两列布局CSS为：ui-block-a与ui-block-b

两列网格布局

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <script id="jquerymobile_120" type="text/javascript" class="library"

     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

 </head>

 <body>

     <div class="ui-grid-a">

         <div class="ui-block-a">

             <input type="button" value="确定" />

         </div>

         <div class="ui-block-b">

             <input type="button" value="取消" />

         </div>

     </div>

 </body>

 </html>

http://sandbox.runjs.cn/show/tdwazgd4

【初探移动前端开发05】jQuery Mobile (整合版)

我们看见了他这些都是使用float布局的。

两列布局，需要指定外层div样式是ui-grid-a，ui-grid-a样式用于指定行列采用两列布局样式。

以上两个按钮各占屏幕的50%，采用data-line属性对按钮进行水平排列，按钮宽度根据实际文本而定。

ui-grid-a 两列

ui-grid-b 三列

ui-grid-c 四列

ui-grid-d 五列

我们来看一个三列网格布局：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <script id="jquerymobile_120" type="text/javascript" class="library"

     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

 </head>

 <body>

     <div class="ui-grid-b">

         <div class="ui-block-a">

             <input type="button" value="确定" />

         </div>

         <div class="ui-block-b">

             <input type="button" value="取消" />

         </div>

         <div class="ui-block-c">

             <input type="button" value="取消" />

         </div>

     </div>

 </body>

 </html>

http://sandbox.runjs.cn/show/wxkkjlfy

【初探移动前端开发05】jQuery Mobile (整合版)

折叠功能

折叠块是移动端经常用到的效果，只要使用jquery mobile约定的编码规则并且利用HTML5的dataset特性，程序就能生成折叠快了。

其中data-role设置为collapsible，便可以创建一个可折叠的内容区，来个例子吧：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <script id="jquerymobile_120" type="text/javascript" class="library"

     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

 </head>

 <body>

   <div data-role="collapsible">

     <h3>可折叠区域</h3>

     <p>刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗</p>

   </div>

 </body>

 </html>

http://sandbox.runjs.cn/show/omulbkhg

【初探移动前端开发05】jQuery Mobile (整合版)

【初探移动前端开发05】jQuery Mobile (整合版)

form表单

我们手机上的form表单其实都很漂亮了，但是我们的jquery mobile还是给他渲染了下下，是非常不错的。

我们来一个例子看看：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <script id="jquerymobile_120" type="text/javascript" class="library"

     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

 </head>

 <body>

     <label for="name">

         姓名</label>

     <input type="text" name="name" id="name" />

     <label for="password">

         密码</label>

     <input type="password" name="password" id="password" />

     <label for="content">

         密码</label>

     <textarea name="content" id="content"></textarea>

     <label for="number">

         年龄</label>

     <input type="number" name="number" id="number" />

     <label for="tel">

         手机</label>

     <input type="tel" name="tel" id="tel" />

     <label for="tel">

         email</label>

     <input type="email" name="email" id="email" />

     <label for="tel">

         url</label>

     <input type="url" name="url" id="url" />

     <label for="search">

         搜索</label>

     <input type="search" name="search" id="search" />

 </body>

 </html>

http://sandbox.runjs.cn/show/by9mvtu8

【初探移动前端开发05】jQuery Mobile (整合版)

我这里喷一下《HTML5移动Web开发指南》这本书！

唐骏开写的，这家伙写的这本书不行，书中很多例子有问题。

Toggle类型

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <script id="jquerymobile_120" type="text/javascript" class="library"

     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

 </head>

 <body>

     <div data-role="fieldcontain">

         <label for="slider">

             打开开关：</label>

         <select name="slider" id="slider" data-role="slider">

             <option value="off">关闭</option>

             <option value="on">开启</option>

         </select>

     </div>

 </body>

 </html>

http://sandbox.runjs.cn/show/ty7aywwm

【初探移动前端开发05】jQuery Mobile (整合版)

单选按钮类型

我们要创建一组单选按钮需要这样做：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <script id="jquerymobile_120" type="text/javascript" class="library"

     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

 </head>

 <body>

     <fieldset data-role="controlgroup">

         <legend>请选择你的年龄范围：</legend>

         <input type="radio" name="radio1" id="radio1" value="any" checked="checked" />

         <label for="radio1">

             不限</label>

         <input type="radio" name="radio1" id="radio2" value="16-22" />

         <label for="radio2">

             16-22岁</label>

         <input type="radio" name="radio1" id="radio3" value="23-30" />

         <label for="radio3">

             23-30岁</label>

         <input type="radio" name="radio1" id="radio4" value="31-40" />

         <label for="radio4">

             31-40岁</label>

         <input type="radio" name="radio1" id="radio5" value="40" />

         <label for="radio5">

             40岁以上</label>

     </fieldset>

 </body>

 </html>

http://sandbox.runjs.cn/show/nwfuhvep

【初探移动前端开发05】jQuery Mobile (整合版)

我们看到，他还是挺好看的哈。。。

我们先是竖排，我们设置一个横排的单选按钮看看：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <script id="jquerymobile_120" type="text/javascript" class="library"

     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

 </head>

 <body>

     <fieldset data-role="controlgroup" data-type="horizontal">

         <legend>请选择你的年龄范围：</legend>

         <input type="radio" name="radio1" id="radio1" value="any" checked="checked" />

         <label for="radio1">

             不限</label>

         <input type="radio" name="radio1" id="radio2" value="16-22" />

         <label for="radio2">

             16-22岁</label>

         <input type="radio" name="radio1" id="radio3" value="23-30" />

         <label for="radio3">

             23-30岁</label>

     </fieldset>

 </body>

 </html>

http://sandbox.runjs.cn/show/vz3bjotg

【初探移动前端开发05】jQuery Mobile (整合版)

复选框

单选完了我们来看看复选框：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <script id="jquerymobile_120" type="text/javascript" class="library"

     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

 </head>

 <body>

     <fieldset data-role="controlgroup" data-type="horizontal">

         <legend>爱好：</legend>

         <input type="checkbox" name="radio1" id="radio1" value="any" checked="checked" />

         <label for="radio1">

             足球</label>

         <input type="checkbox" name="radio1" id="radio2" value="16-22" />

         <label for="radio2">

            篮球</label>

         <input type="checkbox" name="radio1" id="radio3" value="23-30" />

         <label for="radio3">

             编码（危险）</label>

     </fieldset>

 </body>

 </html>

http://sandbox.runjs.cn/show/1zpxdut8

【初探移动前端开发05】jQuery Mobile (整合版)

下拉菜单

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <script id="jquerymobile_120" type="text/javascript" class="library"

     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

 </head>

 <body>

     <div data-role="controlgroup">

         <label class="select">

             请选择兴趣

             <select>

                 <option>电影</option>

                 <option>体育</option>

                 <option>旅游</option>

             </select>

         </label>

         <label class="select">

             请选择兴趣（多选）

             <select>

                 <optgroup label="一般类">

                     <option>电影</option>

                     <option>体育</option>

                     <option>旅游</option>

                 </optgroup>

                 <optgroup label="特殊类">

                     <option>C</option>

                     <option>C++</option>

                     <option>Java</option>

                 </optgroup>

             </select>

         </label>

     </div>

 </body>

 </html>

http://sandbox.runjs.cn/show/zu0zsl2w

【初探移动前端开发05】jQuery Mobile (整合版)

我们这里做一点改变，样式会发生变化：

http://sandbox.runjs.cn/show/ynvpsuyw

【初探移动前端开发05】jQuery Mobile (整合版)

List列表

在移动设备平台下，由于移动设备屏幕比较小，我们又是用手在上面点击的触屏方式，传统的列表模式在手机上就不太友好了。

虽然HTML5与CSS3提供了强大的界面实现方案，jquery mobile作为jquery框架的一个移动web插件，他根据移动屏幕大小优化了UI组件，

列表组件就是jquery mobile根据移动设备的特性而实现的组件库之一。

我们来一个个看看我们的列表吧

普通链接列表

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <script id="jquerymobile_120" type="text/javascript" class="library"

     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

 </head>

 <body>

     <div data-role="page">

         <header data-role="header">

             <h1>

                 普通链接列表</h1>

         </header>

         <div data-role="content">

             <ul data-role="listview" data-theme="g">

                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>

                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>

                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>

                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>

                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>

             </ul>

         </div>

     </div>

 </body>

 </html>

http://sandbox.runjs.cn/show/icriwnze

【初探移动前端开发05】jQuery Mobile (整合版)

多层次嵌套列表

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <script id="jquerymobile_120" type="text/javascript" class="library"

     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

 </head>

 <body>

     <div data-role="page">

         <header data-role="header">

             <h1>

                 普通链接列表</h1>

         </header>

         <div data-role="content">

             <ul data-role="listview" data-theme="g">

                 <li><a href="01.htm">刀狂剑痴叶小钗</a>

                     <p>

                         子级list</p>

                     <ul>

                         <li><a href="01.htm">清香白莲素还真</a></li>

                         <li><a href="01.htm">清香白莲素还真</a></li>

                     </ul>

                 </li>

                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>

                 <li><a href="01.htm">刀狂剑痴叶小钗</a>

                     <p>

                         子级list</p>

                     <ul>

                         <li><a href="01.htm">清香白莲素还真</a></li>

                         <li><a href="01.htm">清香白莲素还真</a></li>

                     </ul>

                 </li>

                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>

                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>

             </ul>

         </div>

     </div>

 </body>

 </html>

http://sandbox.runjs.cn/show/wc1n0sto

【初探移动前端开发05】jQuery Mobile (整合版)

这个嵌套列表，我们点击第一个后便可以看到这个啦。

列表分隔符

我们有时候会碰到需要对列表进行分组的功能，具有分组效果的列表可以在li元素上设置data-role属性为list-divider来实现。

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <script id="jquerymobile_120" type="text/javascript" class="library"

     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

 </head>

 <body>

     <div data-role="page">

         <header data-role="header">

             <h1>

                 列表分割</h1>

         </header>

         <div data-role="content">

             <ul data-role="listview" data-theme="g">

                 <li data-role="list-divider">霹雳三巨头</li>

                 <li><a href="01.htm">清香白莲素还真</a> </li>

                 <li><a href="01.htm">百世经纶一页书</a> </li>

                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>

                 <li data-role="list-divider">火影三巨头</li>

                 <li><a href="01.htm">宇智波斑</a> </li>

                 <li><a href="01.htm">初代火影</a> </li>

                 <li><a href="01.htm">六道仙人</a> </li>

                 <li data-role="list-divider">金光三巨头</li>

                 <li><a href="01.htm">史艳文</a> </li>

                 <li><a href="01.htm">藏镜人</a> </li>

                 <li><a href="01.htm">黑白郎君南宫很</a> </li>

             </ul>

         </div>

     </div>

 </body>

 </html>

http://sandbox.runjs.cn/show/x34523jv

【初探移动前端开发05】jQuery Mobile (整合版)

列表搜索

当设置data-filter为true时便具有了搜索功能了

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <script id="jquerymobile_120" type="text/javascript" class="library"

     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

 </head>

 <body>

     <div data-role="page">

         <header data-role="header">

             <h1>

                 列表分割</h1>

         </header>

         <div data-role="content">

             <ul data-role="listview" data-theme="g" data-filter="true">

                 <li><a href="01.htm">清香白莲素还真</a> </li>

                 <li><a href="01.htm">百世经纶一页书</a> </li>

                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>

                 <li><a href="01.htm">宇智波斑</a> </li>

                 <li><a href="01.htm">初代火影</a> </li>

                 <li><a href="01.htm">六道仙人</a> </li>

                 <li><a href="01.htm">史艳文</a> </li>

                 <li><a href="01.htm">藏镜人</a> </li>

                 <li><a href="01.htm">黑白郎君南宫很</a> </li>

                 <li><a href="01.htm">清香白莲素还真</a> </li>

                 <li><a href="01.htm">百世经纶一页书</a> </li>

                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>

                 <li><a href="01.htm">宇智波斑</a> </li>

                 <li><a href="01.htm">初代火影</a> </li>

                 <li><a href="01.htm">六道仙人</a> </li>

                 <li><a href="01.htm">史艳文</a> </li>

                 <li><a href="01.htm">藏镜人</a> </li>

                 <li><a href="01.htm">黑白郎君南宫很</a> </li>

             </ul>

         </div>

     </div>

 </body>

 </html>

http://sandbox.runjs.cn/show/f8oxhkfs

【初探移动前端开发05】jQuery Mobile (整合版)

这个是界面上的搜索与数据库没关系。

内嵌列表

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <script id="jquerymobile_120" type="text/javascript" class="library"

     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

 </head>

 <body>

     <div data-role="page">

         <header data-role="header">

             <h1>

                 列表分割</h1>

         </header>

         <div data-role="content">

             <ul data-role="listview" data-theme="g" data-inset="true">

                 <li><a href="01.htm">清香白莲素还真<span class="ui-li-count">30</span></a> </li>

                 <li><a href="01.htm">百世经纶一页书<span class="ui-li-count">30</span></a> </li>

                 <li><a href="01.htm">刀狂剑痴叶小钗<span class="ui-li-aside">本命</span></a> </li>

             </ul>

             <ol  data-role="listview" data-theme="g" data-inset="true">

                 <li><a href="01.htm">宇智波斑</a> </li>

                 <li><a href="01.htm">初代火影</a> </li>

                 <li><a href="01.htm">六道仙人</a> </li>

             </ol>

             <ul data-role="listview" data-theme="g" data-inset="true">

                 <li><a href="01.htm">史艳文</a> </li>

                 <li><a href="01.htm">藏镜人</a> </li>

                 <li><a href="01.htm">黑白郎君南宫很</a> </li>

             </ul>

         </div>

     </div>

 </body>

 </html>

http://sandbox.runjs.cn/show/lpjnjowv

【初探移动前端开发05】jQuery Mobile (整合版)

列表的性能问题

jquery mobile虽然提供了非常丰富的列表类型，但大部分类型都是针对不同需求而实现的内容格式列表。

实际上，jquery mobile并没有实现列表的分页功能，当数据量非常大时需要有分页功能，在前面说过，jquery mobile提供一种可搜索过滤列表类型的列表。

前面我们就说了没有通过数据库检索，可能出现数据量非常大的情况，对性能，对流量都不好，检索时候可能出现假死的情况。

所以使用list功能需要慎重。

Event事件

好了，基本UI方面的我们就看完了，现在我们来看看事件方面的东西。

jquery mobile提供了丰富的事件处理机制，并且根据不同的移动设备，整合各种事件，使得开发者不必解决不同设备之间的事件处理差异。

页面加载事件

我们在页面中会使用

$(document).ready()

它的作用是当加载完成一个web页面的Dom结构后就运行该方法。

在移动web应用程序时，仍然可以使用这个功能，但是jquery mobile的机制是每个视图和页面的内容都是使用ajax请求加载的，这样每次显示一个新视图或者新页面都没办法调用readey方法，这不是我们想要的结果。

所以针对jquery mobile提供了这个方法解决这个问题：pageCreate事件，该事件的含义是当视图或页面被切换时触发的。

 $('#page').live('pagecreate', function (e) {

     alert('触发之');

 });

touch事件

jquery mobile提供了最基本的触摸事件：touch事件

tap：

快速触摸屏幕并离开，类似于一次完整的点击事件

taphold：

触摸屏幕并保持一段时间

swipe：

在1秒内水平移动30px屏幕像素以上时触发

swipeleft：

向左侧滑动

swiperight：

向右侧滑动

方向改变事件

orientationchange事件函数当移动设备方向发生改变时触发。

在事件回调函数内的第二个参数返回一个用于识别当前方向的参数，该参数只会返回两种值：portrait（纵向）和landscape（横向）

但是该事件不是所有浏览器都支持，所以使用要慎重。

滚动事件

目前jquery mobile支持两种滚动事件

scrollstart

开始滚动时触发，需要注意是ios上该事件不稳定，原因是ios在滚动时会禁止dom操作

会将dom操作放入队列中，待滚动结束后才执行这些操作，但是估计现在解决了。

scrollend

在滚动结束时触发

显示/隐藏事件

在基于jquery mobile的移动web应用中，我们知道一个web页面存在多个不同的视图或页面，但每次只会显示一个。

当显示其中一个视图时其余都会隐藏，每次视图切换都会触发显示/隐藏事件

pagebeforeshow

当视图通过动画效果开始显示在屏幕之前触发事件

pagebeforehide

当视图通过动画效果开始隐藏之前触发事件

pageshow

当视图通过动画效果显示在屏幕之后触发事件

pagehide

当视图通过动画效果隐藏后触发事件

没切换一次页面，4钟事件都会被触发，例如：

当a视图切换到b视图时，首先触发a视图的pagebeforeshow事件和b视图的pagebeforehide事件

当b视图完成切换动画效果后完整的显示在屏幕中时，会触发a视图的pagehide事件和b视图的pageshow事件

虚拟鼠标事件

jquery mobile提供了一种虚拟点击事件来整合不同设备中mouse和touch事件

vmouseover

统一处理触摸和鼠标悬停事件

vmousedown

统一处理触摸和鼠标按下事件

vmousemove

处理触摸和鼠标移动事件

vmouseup

处理触摸和鼠标松开事件

vclick

处理触摸和鼠标点击事件

vmousecancel

处理触摸和鼠标离开事件

结语

我们队jquery mobile的学习暂时到这里，接下来我们在学习下phonegap，然后就实战一下下。

【初探移动前端开发05】jQuery Mobile (整合版)的更多相关文章

  1. 【初探移动前端开发】jQuery Mobile 二

    本文例子请使用手机查看 List列表 在移动设备平台下,由于移动设备屏幕比较小,我们又是用手在上面点击的触屏方式,传统的列表模式在手机上就不太友好了. 虽然HTML5与CSS3提供了强大的界面实现方案 ...

  2. jQuery Mobile &lpar;整合版&rpar;

    jQuery Mobile (整合版) 前言 为了方便大家看的方便,我这里将这几天的东西整合一下发出. 里面的例子请使用手机浏览器查看. 什么是jQuery Mobile? jquery mobile ...

  3. 【初探移动前端开发05】jQuery Mobile &lpar;下&rpar;

    前言 继续我们移动端的学习,今天到了List相关了. 本文例子请使用手机查看 List列表 在移动设备平台下,由于移动设备屏幕比较小,我们又是用手在上面点击的触屏方式,传统的列表模式在手机上就不太友好 ...

  4. 《疯狂前端开发讲义jQuery&plus;Angular&plus;Bootstrap前端开发实践》学习笔记

    <疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...

  5. 【初探移动前端开发04】jQuery Mobile &lpar;中&rpar;

    前言 昨天我们一起学习了一部分jquery mobile的知识,今天我们继续. 这些是些很基础的东西,有朋友觉得这个没有其它的好,但是学习下不吃亏嘛,我反正也不会一起学习基础啦. 例子请使用手机查看哦 ...

  6. 【初探移动前端开发03】jQuery Mobile（上）

    前言 到目前为止,我打了几天酱油了,这几天落实了工作,并且看了一部电视连续剧(陈道明-手机),我很少看连续剧了,但是手机质量很高啊,各位可以看看. 我们今天先学习一下jquery mobile的基础知 ...

  7. 【初探移动前端开发04】jQuery Mobile 一

    网格布局 jquery mobile提供一种多列布局功能,由于移动设备的屏幕大小原因,一般情况还是不要使用多列布局啦. jquery mobile提供一种css样式规则来定义多列布局,对应css为ui ...

  8. 史上最简单的个人移动APP开发入门--jQuery Mobile版跨平台APP开发

    书是人类进步的阶梯. ——高尔基 习大大要求新新人类要有中国梦,鼓励大学生们一毕业就创业.那最好的创业途径是什么呢?就是APP.<构建跨平台APP-jQuery Mobile移动应用实战> ...

  9. wap开发使用jquery mobile之后页面不加载外部css样式文件&sol;js文件

    场景: wap开发,使用jquery mobile之后不会加载外部自定义的css文件了,需要手动刷新才会加载,查看外部自定义的js文件也是一样. 解决办法: 1.在page下面添加css样式,就不要写 ...

随机推荐

  1. 模板类 error LNK2019&colon; 无法解析的外部符号

    如果将类模板的声明和实现写在两个独立的文件中,在构建时会出现"error LNK2019: 无法解析的外部符号 "的错误. 解决方法有: 第一种方法,就是把类模板中成员函数的声明和 ...

  2. 大熊君大话NodeJS之------MongoDB模块（额外篇）

    一,开篇分析 这篇属于扩展知识篇,因为在下面的文章中会用到数据库操作,所以今天就来说说它(Mongodb模块). (1),简介 MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为 ...

  3. C语言中qsort函数的应用

    qsort函数包含在<stdlib.h>的头文件里,本文中排序都是采用的从小到大排序 一.对int类型数组排序 ]; int cmp ( const void *a , const voi ...

  4. get&lowbar;free&lowbar;page

    /**  0.11用了 unsigned char */static unsigned short mem_map [ PAGING_PAGES ] = {0,}; /* * Get physical ...

  5. CodeForces 19D Points（线段树&plus;map）

    开始想不通,后来看网上说是set,就有一个想法是对每个x建一个set...然后又想直接建立两重的set就好,最后发现不行,自己想多了...  题意是给你三种操作:add (x y) 平面添加(x y) ...

  6. U9单据UI开发--单据类型UI开发

    1.在解决方案下新建UI界面项目,命名以UI作为后缀 2.先删除系统默认新建的UI界面数据模型,并新建界面数据 3.新建单据类型UIModel(界面数据),以model作为界面数据后缀名 4.修改单据 ...

  7. Antenna Placement（匈牙利算法 ，最少路径覆盖）

    Antenna Placement Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6991   Accepted: 3466 ...

  8. 你应该了解的5个JavaScript调试技巧

    在某些情况下需要更好的工具,下面是其中的一些佼佼者,我敢肯定你会发现它们的有用之处: 1. debugger; 正如我之前提到的,你可以使用“debugger;”语句在代码中加入强制断点. 需要断点条 ...

  9. layui 左侧三级菜单栏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  10. UA池和代理池

    scrapy下载中间件 UA池 代理池 一.下载中间件 先祭出框架图: 下载中间件(Downloader Middlewares) 位于scrapy引擎和下载器之间的一层组件. - 作用: (1)引擎 ...

相关文章