前言

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

随机推荐

DOM动态脚本和动态样式
动态脚本 [定义] 在页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本. [方式] [1]插入外部文件方式 var script = document.createElement(&qu ...
MySQL5.6忘记root密码(win平台)
1.首先net stop mysql服务,并且切换到任务管理器,有与mysql有关的,最好关闭进程. 2.运行CMD命令切换到MySql安装bin目录,下面是我的mysql安装目录 cd C:\Pr ...
spring源码分析之spring-core asm概述
ASM是什么? ASM is an all purpose Java bytecode manipulation and analysis framework. It can be used to m ...
Datatables 在asp.net mvc中的使用
前言最近使用ABP(ASP.NET Boilerplate)做新项目,以前都是自己扩展一个HtmlHelper来完成同步/异步分页,但是有个地方一直不满意,排序太费劲. 以前接触过一点点的Datat ...
可视化工具solo show
辗转一圈还是回到了我魂牵梦绕的可视化上来了. 在Gephi+Netbeans上折腾了将近一个星期后,我深深的体会到个人对于代码的驾驭能力尚有提升的空间^_^,路很长,方向很重要,三思而行. 转载请标明 ...
SQL中利用DMV进行数据库性能分析
相信朋友对SQL Server性能调优相关的知识或多或少都有一些了解.虽然说现在NOSQL相关的技术非常的火热,但是RMDB(关系型数据库)与NOSQL是并存的,并且适用在各种的项目中.在一般的企业级 ...
HT For Web 拓扑图背景设置
HT For Web 的HTML5拓扑图组件graphView背景设置有多种途径可选择: divBackground:通过css设置graphView对应的div背景 Painter:通过graphV ...
angularJS配合bootstrap动态加载弹出提示内容
1.bootstrp的弹出提示 bootstrap已经帮我们封装了非常好用的弹出提示Popover. http://v3.bootcss.com/javascript/#popovers 2.自定义p ...
html中charset和content-language的区别
假设下面的这一段html中meta的两行配置. <html> <head> <meta http-equiv="Content-Type" conte ...
[Asp.net 5] DependencyInjection项目代码分析4-微软的实现（4）
这个系列已经写了6篇,链接地址如下: [Asp.net 5] DependencyInjection项目代码分析 [Asp.net 5] DependencyInjection项目代码分析2-Auto ...

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

前言