前言

昨天我们一起学习了一部分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 ...

随机推荐

hdu4750Count The Pairs（最小生成树找瓶颈边）
/* 题意:就是给你一个图,图的每两个点都有多条路径,每一条路径中都有一条最大边, 所有最大边的最小边(也就是瓶颈边)就是这两点之间的val值!然后给你一个值f, 问有多少个顶点对的val>=f ...
Java多线程系列--“基础篇”04之 synchronized关键字
概要本章,会对synchronized关键字进行介绍.涉及到的内容包括:1. synchronized原理2. synchronized基本规则3. synchronized方法和 synchro ...
PHP面试出场率较高的题目<转载>
--------------------PHP部分--------------------- PHP中几个输出函数echo,print(),print_r(),sprintf(),var_dump() ...
Web 开发精华文章集锦（jQuery、HTML5、CSS3）【系列二十七】
<Web 前端开发精华文章推荐>2014年第6期(总第27期)和大家见面了.梦想天空博客关注前端开发技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...
Cordova webapp实战开发：（3）后面可能会学到的东西
在<Cordova webapp实战开发:(2)认识一下Cordova>中我们了解了Cordova和Phonegap的关系,并简要介绍了一下它的架构,以及多平台性,并给大家留了一些作业.我 ...
用Vue实现一个全选指令
最近用vue做了两个项目,都需要实现全选反选的功能,两个项目用了两种实现方法,第一个项目用vue的computed,第二个项目用指令来实现,用起来,发觉指令更加方便. 第一次做全选的时候是刚开始接触v ...
JAVA 设计模式装饰者模式
用途装饰者模式 (Decorator) 动态地给一个对象添加一些额外的职责.就增加功能来说,Decorator 模式相比生成子类更为灵活. 装饰者模式是一种结构式模式. 结构
finetuning caffe
还没解决,以下是解释fine-tune 比如说,先设计出一个CNN结构.然后用一个大的数据集A,训练该CNN网络,得到网络a.可是在数据集B上,a网络预测效果并不理想(可能的原因是数据集A和B存在一些 ...
7 款免费的 Metro UI 模板
#1 – Free Metro Ui Style template by Asif Aleem 很棒的蓝色调 Metro UI 管理模板 #2: Metro-Bootstrap by TalksLab ...
图论 ---- spfa + 链式向前星 ---- poj 3268 : Silver Cow Party
Silver Cow Party Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 12674 Accepted: 5651 ...

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

前言