前言

昨天我们一起学习了一部分jquery mobile的知识，今天我们继续。

这些是些很基础的东西，有朋友觉得这个没有其它的好，但是学习下不吃亏嘛，我反正也不会一起学习基础啦。

例子请使用手机查看哦

内容区域格式布局

网格布局

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

我们看见了他这些都是使用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

折叠功能

折叠块是移动端经常用到的效果，只要使用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

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

我这里喷一下《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

单选按钮类型

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

 <!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

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

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

 <!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

复选框

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

 <!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

下拉菜单

 <!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

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

 <!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 data-native-menu="false">

                 <option>电影</option>

                 <option>体育</option>

                 <option>旅游</option>

             </select>

         </label>

         <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/ynvpsuyw

结语

今天篇幅够长了，我们下一篇再继续吧。

【初探移动前端开发04】jQuery Mobile (中)的更多相关文章

【初探移动前端开发】jQuery Mobile 二
本文例子请使用手机查看 List列表在移动设备平台下,由于移动设备屏幕比较小,我们又是用手在上面点击的触屏方式,传统的列表模式在手机上就不太友好了. 虽然HTML5与CSS3提供了强大的界面实现方案 ...
【初探移动前端开发04】jQuery Mobile 一
网格布局 jquery mobile提供一种多列布局功能,由于移动设备的屏幕大小原因,一般情况还是不要使用多列布局啦. jquery mobile提供一种css样式规则来定义多列布局,对应css为ui ...
【初探移动前端开发05】jQuery Mobile (整合版)
前言为了方便大家看的方便,我这里将这几天的东西整合一下发出. 里面的例子请使用手机浏览器查看. 什么是jQuery Mobile? jquery mobile是jquery在移动设备上的版本,他是基 ...
【初探移动前端开发03】jQuery Mobile（上）
前言到目前为止,我打了几天酱油了,这几天落实了工作,并且看了一部电视连续剧(陈道明-手机),我很少看连续剧了,但是手机质量很高啊,各位可以看看. 我们今天先学习一下jquery mobile的基础知 ...
jQuery Mobile (中)
jQuery Mobile (中) 前言昨天我们一起学习了一部分jquery mobile的知识,今天我们继续. 这些是些很基础的东西,有朋友觉得这个没有其它的好,但是学习下不吃亏嘛,我反正也不会一 ...
JQuery mobile中按钮自定义属性的改变
1..ui-mobile-viewport是jquery mobile默认给body加的class,这样的话包含选择符优先级高一点 <style> .ui-mobile-viewport ...
jQuery Mobile 中创建按钮
在 jQuery Mobile 中创建按钮 jQuery Mobile 中的按钮可通过三种方法创建: 使用 <button> 元素使用 <input> 元素使用 data- ...
jQuery Mobile中的页面加载与跳转机制
第一次做用jQuery Mobile做东西,发现一些跟平时的思维习惯不太一样的.其中这个框架的页面加载机制便是其中一个.如果不明白其中的奥秘,往往会出现一些让人摸不着头脑的怪现象,比如页面进入后点击按 ...
jQuery Mobile中jQuery.mobile.changePage方法使用详解
jQuery.mobile.changePage方法用的还是很多的.作为一个老手,有必要对jQuery mobile中实用方法做一些总结.系列文章请看jQuery Mobile专栏.jquery.mo ...

随机推荐

《BI那点儿事》Microsoft 逻辑回归算法——预测股票的涨跌
数据准备:一组股票历史成交数据(股票代码:601106 中国一重),起止日期:2011-01-04至今,其中变量有“开盘”.“最高”.“最低”.“收盘”.“总手”.“金额”.“涨跌”等 UPDATE ...
iOS_UIImage_给图片添加水印
github地址: https://github.com/mancongiOS/UIImage.git UIImage的Category UIImage+ImageWaterPrint.h #impo ...
【知识积累】服务器端获取客户端的IP地址(当客户端调用由Axis开发的WebService)
一.前言由于项目中一个小的模块需要获取客户端的IP地址以保证安全调用webservice接口,项目中客户端使用C#编写,服务器端使用Java编写,服务器端与客户端采用Axis开发的WebServic ...
创建支持多种屏幕尺寸的Android应用
Android涉及各种各样的支持不同屏幕尺寸和密度的设备.对于应用程序,Android系统通过设备和句柄提供了统一的开发环境,大部分工作是校正每一个应用程序的用户界面到它显示的屏上.与此同时,系统提供 ...
Windows GUI代码与Windows消息问题调试利器
Windows GUI代码与Windows消息问题调试利器记得很久前有这么一种说法: 人类区别于动物的标准就是工具的使用.同样在软件开发这个行业里面,对于工具的使用也是高手和入门级选手的主要区别,高 ...
LocationManager使用细节
在使用系统的LocationManager请求地理位置的时候,请特别注意一个很小的细节,调用 requestLocationUpdates 以后,请记得[自己]设置一个timeout值,否则在某些情况 ...
mysql连接查询
以前查询都是随便查到结果就行了,因为发现每次查询的数量都很少,当然现在也是.不过效率一直是程序员执着的追求,我就多了解下差距. 首先是多张表联合,一张模板种类category,一张模板表templat ...
postgres中的中文分词zhparser
postgres中的中文分词zhparser postgres中的中文分词方法基本查了下网络,postgres的中文分词大概有两种方法: Bamboo zhparser 其中的Bamboo安装和使用 ...
vim黏贴自动增加tab的毛病
vim在ctrl + p的时候有可能会自动给你增加了个tab 很是郁闷解决方法如下: :set noautoindent :set nosmartindent
JS魔法堂：函数节流（throttle）与函数去抖（debounce）
一.前言以下场景往往由于事件频繁被触发,因而频繁执行DOM操作.资源加载等重行为,导致UI停顿甚至浏览器崩溃. 1. window对象的resize.scroll事件 2. 拖拽时的mousemov ...

【初探移动前端开发04】jQuery Mobile (中)

前言