jQuery Mobile (中)
jQuery Mobile (中)
前言
昨天我们一起学习了一部分jquery mobile的知识，今天我们继续。
这些是些很基础的东西，有朋友觉得这个没有其它的好，但是学习下不吃亏嘛，我反正也不会一起学习基础啦。
例子请使用手机查看哦
内容区域格式布局
网格布局
jquery mobile提供一种多列布局功能，由于移动设备的屏幕大小原因，一般情况还是不要使用多列布局啦。
jquery mobile提供一种css样式规则来定义多列布局，对应css为ui-block，每列的样式是通过定义前缀+“-a”等方式对网格的列进行布局，a字母根据网格的列数而定。
例如两列布局CSS为：ui-block-a与ui-block-b
两列网格布局
- 1 <!DOCTYPE html>
- 2 <html xmlns="http://www.w3.org/1999/xhtml">
- 3 <head>
- 4 <title></title>
- 5 <meta name="viewport" content="width=device-width, initial-scale=1">
- 6 <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"
- 7 href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
- 8 <script id="jquery_182" type="text/javascript" class="library"
- 9 src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
- 10 <script id="jquerymobile_120" type="text/javascript" class="library"
- 11 src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
- 12 </head>
- 13 <body>
- 14 <div class="ui-grid-a">
- 15 <div class="ui-block-a">
- 16 <input type="button" value="确定" />
- 17 </div>
- 18 <div class="ui-block-b">
- 19 <input type="button" value="取消" />
- 20 </div>
- 21 </div>
- 22 </body>
- 23 </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 五列
我们来看一个三列网格布局：
- 1 <!DOCTYPE html>
- 2 <html xmlns="http://www.w3.org/1999/xhtml">
- 3 <head>
- 4 <title></title>
- 5 <meta name="viewport" content="width=device-width, initial-scale=1">
- 6 <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"
- 7 href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
- 8 <script id="jquery_182" type="text/javascript" class="library"
- 9 src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
- 10 <script id="jquerymobile_120" type="text/javascript" class="library"
- 11 src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
- 12 </head>
- 13 <body>
- 14 <div class="ui-grid-b">
- 15 <div class="ui-block-a">
- 16 <input type="button" value="确定" />
- 17 </div>
- 18 <div class="ui-block-b">
- 19 <input type="button" value="取消" />
- 20 </div>
- 21 <div class="ui-block-c">
- 22 <input type="button" value="取消" />
- 23 </div>
- 24 </div>
- 25 </body>
- 26 </html>
http://sandbox.runjs.cn/show/wxkkjlfy
折叠功能
折叠块是移动端经常用到的效果，只要使用jquery mobile约定的编码规则并且利用HTML5的dataset特性，程序就能生成折叠快了。
其中data-role设置为collapsible，便可以创建一个可折叠的内容区，来个例子吧：
- 1 <!DOCTYPE html>
- 2 <html xmlns="http://www.w3.org/1999/xhtml">
- 3 <head>
- 4 <title></title>
- 5 <meta name="viewport" content="width=device-width, initial-scale=1">
- 6 <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"
- 7 href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
- 8 <script id="jquery_182" type="text/javascript" class="library"
- 9 src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
- 10 <script id="jquerymobile_120" type="text/javascript" class="library"
- 11 src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
- 12 </head>
- 13 <body>
- 14 <div data-role="collapsible">
- 15 <h3>可折叠区域</h3>
- 16 <p>刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗</p>
- 17 </div>
- 18 </body>
- 19 </html>
http://sandbox.runjs.cn/show/omulbkhg
form表单
我们手机上的form表单其实都很漂亮了，但是我们的jquery mobile还是给他渲染了下下，是非常不错的。
我们来一个例子看看：
- 1 <!DOCTYPE html>
- 2 <html xmlns="http://www.w3.org/1999/xhtml">
- 3 <head>
- 4 <title></title>
- 5 <meta name="viewport" content="width=device-width, initial-scale=1">
- 6 <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"
- 7 href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
- 8 <script id="jquery_182" type="text/javascript" class="library"
- 9 src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
- 10 <script id="jquerymobile_120" type="text/javascript" class="library"
- 11 src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
- 12 </head>
- 13 <body>
- 14 <label for="name">
- 15 姓名</label>
- 16 <input type="text" name="name" id="name" />
- 17 <label for="password">
- 18 密码</label>
- 19 <input type="password" name="password" id="password" />
- 20 <label for="content">
- 21 密码</label>
- 22 <textarea name="content" id="content"></textarea>
- 23 <label for="number">
- 24 年龄</label>
- 25 <input type="number" name="number" id="number" />
- 26 <label for="tel">
- 27 手机</label>
- 28 <input type="tel" name="tel" id="tel" />
- 29 <label for="tel">
- 30 email</label>
- 31 <input type="email" name="email" id="email" />
- 32 <label for="tel">
- 33 url</label>
- 34 <input type="url" name="url" id="url" />
- 35 <label for="search">
- 36 搜索</label>
- 37 <input type="search" name="search" id="search" />
- 38 </body>
- 39 </html>
http://sandbox.runjs.cn/show/by9mvtu8
- 我这里喷一下《HTML5移动Web开发指南》这本书！
- 唐骏开写的，这家伙写的这本书不行，书中很多例子有问题。
Toggle类型
- 1 <!DOCTYPE html>
- 2 <html xmlns="http://www.w3.org/1999/xhtml">
- 3 <head>
- 4 <title></title>
- 5 <meta name="viewport" content="width=device-width, initial-scale=1">
- 6 <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"
- 7 href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
- 8 <script id="jquery_182" type="text/javascript" class="library"
- 9 src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
- 10 <script id="jquerymobile_120" type="text/javascript" class="library"
- 11 src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
- 12 </head>
- 13 <body>
- 14 <div data-role="fieldcontain">
- 15 <label for="slider">
- 16 打开开关：</label>
- 17 <select name="slider" id="slider" data-role="slider">
- 18 <option value="off">关闭</option>
- 19 <option value="on">开启</option>
- 20 </select>
- 21 </div>
- 22 </body>
- 23 </html>
http://sandbox.runjs.cn/show/ty7aywwm
单选按钮类型
我们要创建一组单选按钮需要这样做：
- 1 <!DOCTYPE html>
- 2 <html xmlns="http://www.w3.org/1999/xhtml">
- 3 <head>
- 4 <title></title>
- 5 <meta name="viewport" content="width=device-width, initial-scale=1">
- 6 <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"
- 7 href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
- 8 <script id="jquery_182" type="text/javascript" class="library"
- 9 src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
- 10 <script id="jquerymobile_120" type="text/javascript" class="library"
- 11 src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
- 12 </head>
- 13 <body>
- 14 <fieldset data-role="controlgroup">
- 15 <legend>请选择你的年龄范围：</legend>
- 16 <input type="radio" name="radio1" id="radio1" value="any" checked="checked" />
- 17 <label for="radio1">
- 18 不限</label>
- 19 <input type="radio" name="radio1" id="radio2" value="16-22" />
- 20 <label for="radio2">
- 21 16-22岁</label>
- 22 <input type="radio" name="radio1" id="radio3" value="23-30" />
- 23 <label for="radio3">
- 24 23-30岁</label>
- 25 <input type="radio" name="radio1" id="radio4" value="31-40" />
- 26 <label for="radio4">
- 27 31-40岁</label>
- 28 <input type="radio" name="radio1" id="radio5" value="40" />
- 29 <label for="radio5">
- 30 40岁以上</label>
- 31 </fieldset>
- 32 </body>
- 33 </html>
http://sandbox.runjs.cn/show/nwfuhvep
我们看到，他还是挺好看的哈。。。
我们先是竖排，我们设置一个横排的单选按钮看看：
- 1 <!DOCTYPE html>
- 2 <html xmlns="http://www.w3.org/1999/xhtml">
- 3 <head>
- 4 <title></title>
- 5 <meta name="viewport" content="width=device-width, initial-scale=1">
- 6 <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"
- 7 href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
- 8 <script id="jquery_182" type="text/javascript" class="library"
- 9 src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
- 10 <script id="jquerymobile_120" type="text/javascript" class="library"
- 11 src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
- 12 </head>
- 13 <body>
- 14 <fieldset data-role="controlgroup" data-type="horizontal">
- 15 <legend>请选择你的年龄范围：</legend>
- 16 <input type="radio" name="radio1" id="radio1" value="any" checked="checked" />
- 17 <label for="radio1">
- 18 不限</label>
- 19 <input type="radio" name="radio1" id="radio2" value="16-22" />
- 20 <label for="radio2">
- 21 16-22岁</label>
- 22 <input type="radio" name="radio1" id="radio3" value="23-30" />
- 23 <label for="radio3">
- 24 23-30岁</label>
- 25 </fieldset>
- 26 </body>
- 27 </html>
http://sandbox.runjs.cn/show/vz3bjotg
复选框
单选完了我们来看看复选框：
- 1 <!DOCTYPE html>
- 2 <html xmlns="http://www.w3.org/1999/xhtml">
- 3 <head>
- 4 <title></title>
- 5 <meta name="viewport" content="width=device-width, initial-scale=1">
- 6 <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"
- 7 href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
- 8 <script id="jquery_182" type="text/javascript" class="library"
- 9 src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
- 10 <script id="jquerymobile_120" type="text/javascript" class="library"
- 11 src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
- 12 </head>
- 13 <body>
- 14 <fieldset data-role="controlgroup" data-type="horizontal">
- 15 <legend>爱好：</legend>
- 16 <input type="checkbox" name="radio1" id="radio1" value="any" checked="checked" />
- 17 <label for="radio1">
- 18 足球</label>
- 19 <input type="checkbox" name="radio1" id="radio2" value="16-22" />
- 20 <label for="radio2">
- 21 篮球</label>
- 22 <input type="checkbox" name="radio1" id="radio3" value="23-30" />
- 23 <label for="radio3">
- 24 编码（危险）</label>
- 25 </fieldset>
- 26 </body>
- 27 </html>
http://sandbox.runjs.cn/show/1zpxdut8
下拉菜单
- 1 <!DOCTYPE html>
- 2 <html xmlns="http://www.w3.org/1999/xhtml">
- 3 <head>
- 4 <title></title>
- 5 <meta name="viewport" content="width=device-width, initial-scale=1">
- 6 <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"
- 7 href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
- 8 <script id="jquery_182" type="text/javascript" class="library"
- 9 src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
- 10 <script id="jquerymobile_120" type="text/javascript" class="library"
- 11 src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
- 12 </head>
- 13 <body>
- 14 <div data-role="controlgroup">
- 15 <label class="select">
- 16 请选择兴趣
- 17 <select>
- 18 <option>电影</option>
- 19 <option>体育</option>
- 20 <option>旅游</option>
- 21 </select>
- 22 </label>
- 23
- 24 <label class="select">
- 25 请选择兴趣（多选）
- 26 <select>
- 27 <optgroup label="一般类">
- 28 <option>电影</option>
- 29 <option>体育</option>
- 30 <option>旅游</option>
- 31 </optgroup>
- 32 <optgroup label="特殊类">
- 33 <option>C</option>
- 34 <option>C++</option>
- 35 <option>Java</option>
- 36 </optgroup>
- 37 </select>
- 38 </label>
- 39 </div>
- 40 </body>
- 41 </html>
http://sandbox.runjs.cn/show/zu0zsl2w
我们这里做一点改变，样式会发生变化：
http://sandbox.runjs.cn/show/ynvpsuyw
结语
今天篇幅够长了，我们下一篇再继续吧。
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 ...
- 在 JQuery Mobile 中实现瀑布流图库布局
先来看在Windows系统的1080P显示器中显示的效果: 这个整合方式几乎没有现存的实例,是自己总结出来的方法,在此记录下来. 首先访问Masonry官网下载masonry.pkgd.min.js: ...
- 【初探移动前端开发04】jQuery Mobile (中)
前言 昨天我们一起学习了一部分jquery mobile的知识,今天我们继续. 这些是些很基础的东西,有朋友觉得这个没有其它的好,但是学习下不吃亏嘛,我反正也不会一起学习基础啦. 例子请使用手机查看哦 ...
- jquery.mobile 中 collapsible-set collapsible listview 共同布局问题
最近项目用上了jquery.mobile这货,在手机上做点简单的显示.之前只知道有这个框架,没把玩过. 特别是事件绑定方面,相比桌面系统下浏览器用着各种不爽,不得要领. 如下图,在做后台系统时,一般左 ...
- jQuery Mobile中$.mobile.buttonMarkup方法使用具体解释
近期在群里遇到多数网友提到$.mobile.buttonMarkup()方法的使用. 我这里就列了一下api的使用说明,以后大家看博客就能解决这个问题.如有不对的地方,请留言指出! jQuery Mo ...
- [转]jquery mobile中redirect重定向问题
本文转自:http://www.cnblogs.com/freeliver54/p/3529813.html 在jquerymobile提交后如果要进行网页重定向时,一定要在form或<a> ...
随机推荐
- Cocos2d-x学习笔记（14）（更新函数scheduleUpdate、进度计时器CCProgressTo、滚动视图CCScrollView）
一.scheduleUpdate 1.scheduleUpdate:此函数是CCNode的函数,每一个CCNode仅仅要调用scheduleUpdate更新函数,那么这个CCNode就会响应当前类的u ...
- sgu139Help Needed!推断15数码是否有解，以及推断N数码是否有解的推论
是这种,要你推断一个15数码是否有解. 我不会,找了这样一个方法. 将16个数按出现顺序存放在一维数组里面, 然后累加每一个数的逆序对数目, 还要加上0到终态的曼哈顿距离,得到一个数x. 因为最后的状 ...
- jquery插件分类与编写详细讲解
jquery插件分类与编写详细讲解 1. 插件种类 插件其实就是对现有的方法(或者叫函数)做一个封装,方便重用提高开发效率. jQeury主要有2种类型 1)实例对象方法插件 开发能让所有的j ...
- sql注入工具sqlmap使用参数说明
Options(选项):--version 显示程序的版本号并退出-h, --help 显示此帮助消息并退出-v VERBOSE 详细级别:0-6(默认为1)Target(目标):以下至少需要设置其中 ...
- 使用Scala操作Mongodb
介绍 Scala是一种功能性面向对象语言.它融汇了很多前所未有的特性.而同一时候又执行于JVM之上.随着开发人员对Scala的兴趣日增,以及越来越多的工具支持,无疑Scala语言将成为你手上一件不可缺 ...
- Ubuntu终端字体颜色方案
默认: 蓝色代表该文件夹: 绿色代表可运行文件. 红色表示压缩文件. 浅蓝色表示链接文件: 灰色表示其它文件: 红色闪烁表示链接的文件有问题了 黄色表示设备文件. 非常不爽怎么办,改! # Attri ...
- Android正在使用Handler实现消息分发机制（两）
在开始这篇文章之前,.首先,我们在总结前两篇文章Handler, Looper和MessageQueue像一些关键点: 0)在创建线程Handler之前,你必须调用Looper.prepare(), ...
- AjaxPro实现无刷新更新数据
使用AjaxPro实现无刷新更新数据 需求 在一个页面动态无刷新的更新后台得到的数据.要想无刷新的更新数据,需要使用Javascript能够获取后台返回的数据,然后通过第三方Javascript库(J ...
- WCF Restful Service的服务
构建基于WCF Restful Service的服务 前言 传统的Asmx服务,由于遵循SOAP协议,所以返回内容以xml方式组织.并且客户端需要添加服务端引用才能使用(虽然看到网络上已经提供了这方面 ...
- HttpModule应用
由做网站操作日志想到的HttpModule应用 背景 在以前的Web项目中,记录用户操作日志,总是在方法里,加一行代码,记录此时用户操作类型与相关信息.该记录日志的方法对原来的业务操作侵入性较强, ...