jQuery Mobile (中)

前言

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

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

例子请使用手机查看哦

内容区域格式布局

网格布局

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

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

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

两列网格布局

  1. 1 <!DOCTYPE html>
  2. 2 <html xmlns="http://www.w3.org/1999/xhtml">
  3. 3 <head>
  4. 4 <title></title>
  5. 5 <meta name="viewport" content="width=device-width, initial-scale=1">
  6. 6 <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"
  7. 7 href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
  8. 8 <script id="jquery_182" type="text/javascript" class="library"
  9. 9 src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
  10. 10 <script id="jquerymobile_120" type="text/javascript" class="library"
  11. 11 src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
  12. 12 </head>
  13. 13 <body>
  14. 14 <div class="ui-grid-a">
  15. 15 <div class="ui-block-a">
  16. 16 <input type="button" value="确定" />
  17. 17 </div>
  18. 18 <div class="ui-block-b">
  19. 19 <input type="button" value="取消" />
  20. 20 </div>
  21. 21 </div>
  22. 22 </body>
  23. 23 </html>

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

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

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

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

  1. ui-grid-a 两列
  2. ui-grid-b 三列
  3. ui-grid-c 四列
  4. ui-grid-d 五列

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

  1. 1 <!DOCTYPE html>
  2. 2 <html xmlns="http://www.w3.org/1999/xhtml">
  3. 3 <head>
  4. 4 <title></title>
  5. 5 <meta name="viewport" content="width=device-width, initial-scale=1">
  6. 6 <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"
  7. 7 href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
  8. 8 <script id="jquery_182" type="text/javascript" class="library"
  9. 9 src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
  10. 10 <script id="jquerymobile_120" type="text/javascript" class="library"
  11. 11 src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
  12. 12 </head>
  13. 13 <body>
  14. 14 <div class="ui-grid-b">
  15. 15 <div class="ui-block-a">
  16. 16 <input type="button" value="确定" />
  17. 17 </div>
  18. 18 <div class="ui-block-b">
  19. 19 <input type="button" value="取消" />
  20. 20 </div>
  21. 21 <div class="ui-block-c">
  22. 22 <input type="button" value="取消" />
  23. 23 </div>
  24. 24 </div>
  25. 25 </body>
  26. 26 </html>

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

折叠功能

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

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

  1. 1 <!DOCTYPE html>
  2. 2 <html xmlns="http://www.w3.org/1999/xhtml">
  3. 3 <head>
  4. 4 <title></title>
  5. 5 <meta name="viewport" content="width=device-width, initial-scale=1">
  6. 6 <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"
  7. 7 href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
  8. 8 <script id="jquery_182" type="text/javascript" class="library"
  9. 9 src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
  10. 10 <script id="jquerymobile_120" type="text/javascript" class="library"
  11. 11 src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
  12. 12 </head>
  13. 13 <body>
  14. 14 <div data-role="collapsible">
  15. 15 <h3>可折叠区域</h3>
  16. 16 <p>刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗</p>
  17. 17 </div>
  18. 18 </body>
  19. 19 </html>

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

form表单

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

我们来一个例子看看:

  1. 1 <!DOCTYPE html>
  2. 2 <html xmlns="http://www.w3.org/1999/xhtml">
  3. 3 <head>
  4. 4 <title></title>
  5. 5 <meta name="viewport" content="width=device-width, initial-scale=1">
  6. 6 <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"
  7. 7 href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
  8. 8 <script id="jquery_182" type="text/javascript" class="library"
  9. 9 src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
  10. 10 <script id="jquerymobile_120" type="text/javascript" class="library"
  11. 11 src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
  12. 12 </head>
  13. 13 <body>
  14. 14 <label for="name">
  15. 15 姓名</label>
  16. 16 <input type="text" name="name" id="name" />
  17. 17 <label for="password">
  18. 18 密码</label>
  19. 19 <input type="password" name="password" id="password" />
  20. 20 <label for="content">
  21. 21 密码</label>
  22. 22 <textarea name="content" id="content"></textarea>
  23. 23 <label for="number">
  24. 24 年龄</label>
  25. 25 <input type="number" name="number" id="number" />
  26. 26 <label for="tel">
  27. 27 手机</label>
  28. 28 <input type="tel" name="tel" id="tel" />
  29. 29 <label for="tel">
  30. 30 email</label>
  31. 31 <input type="email" name="email" id="email" />
  32. 32 <label for="tel">
  33. 33 url</label>
  34. 34 <input type="url" name="url" id="url" />
  35. 35 <label for="search">
  36. 36 搜索</label>
  37. 37 <input type="search" name="search" id="search" />
  38. 38 </body>
  39. 39 </html>

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

  1. 我这里喷一下《HTML5移动Web开发指南》这本书!
  2. 唐骏开写的,这家伙写的这本书不行,书中很多例子有问题。

Toggle类型

  1. 1 <!DOCTYPE html>
  2. 2 <html xmlns="http://www.w3.org/1999/xhtml">
  3. 3 <head>
  4. 4 <title></title>
  5. 5 <meta name="viewport" content="width=device-width, initial-scale=1">
  6. 6 <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"
  7. 7 href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
  8. 8 <script id="jquery_182" type="text/javascript" class="library"
  9. 9 src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
  10. 10 <script id="jquerymobile_120" type="text/javascript" class="library"
  11. 11 src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
  12. 12 </head>
  13. 13 <body>
  14. 14 <div data-role="fieldcontain">
  15. 15 <label for="slider">
  16. 16 打开开关:</label>
  17. 17 <select name="slider" id="slider" data-role="slider">
  18. 18 <option value="off">关闭</option>
  19. 19 <option value="on">开启</option>
  20. 20 </select>
  21. 21 </div>
  22. 22 </body>
  23. 23 </html>

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

单选按钮类型

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

  1. 1 <!DOCTYPE html>
  2. 2 <html xmlns="http://www.w3.org/1999/xhtml">
  3. 3 <head>
  4. 4 <title></title>
  5. 5 <meta name="viewport" content="width=device-width, initial-scale=1">
  6. 6 <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"
  7. 7 href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
  8. 8 <script id="jquery_182" type="text/javascript" class="library"
  9. 9 src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
  10. 10 <script id="jquerymobile_120" type="text/javascript" class="library"
  11. 11 src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
  12. 12 </head>
  13. 13 <body>
  14. 14 <fieldset data-role="controlgroup">
  15. 15 <legend>请选择你的年龄范围:</legend>
  16. 16 <input type="radio" name="radio1" id="radio1" value="any" checked="checked" />
  17. 17 <label for="radio1">
  18. 18 不限</label>
  19. 19 <input type="radio" name="radio1" id="radio2" value="16-22" />
  20. 20 <label for="radio2">
  21. 21 16-22岁</label>
  22. 22 <input type="radio" name="radio1" id="radio3" value="23-30" />
  23. 23 <label for="radio3">
  24. 24 23-30岁</label>
  25. 25 <input type="radio" name="radio1" id="radio4" value="31-40" />
  26. 26 <label for="radio4">
  27. 27 31-40岁</label>
  28. 28 <input type="radio" name="radio1" id="radio5" value="40" />
  29. 29 <label for="radio5">
  30. 30 40岁以上</label>
  31. 31 </fieldset>
  32. 32 </body>
  33. 33 </html>

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

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

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

  1. 1 <!DOCTYPE html>
  2. 2 <html xmlns="http://www.w3.org/1999/xhtml">
  3. 3 <head>
  4. 4 <title></title>
  5. 5 <meta name="viewport" content="width=device-width, initial-scale=1">
  6. 6 <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"
  7. 7 href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
  8. 8 <script id="jquery_182" type="text/javascript" class="library"
  9. 9 src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
  10. 10 <script id="jquerymobile_120" type="text/javascript" class="library"
  11. 11 src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
  12. 12 </head>
  13. 13 <body>
  14. 14 <fieldset data-role="controlgroup" data-type="horizontal">
  15. 15 <legend>请选择你的年龄范围:</legend>
  16. 16 <input type="radio" name="radio1" id="radio1" value="any" checked="checked" />
  17. 17 <label for="radio1">
  18. 18 不限</label>
  19. 19 <input type="radio" name="radio1" id="radio2" value="16-22" />
  20. 20 <label for="radio2">
  21. 21 16-22岁</label>
  22. 22 <input type="radio" name="radio1" id="radio3" value="23-30" />
  23. 23 <label for="radio3">
  24. 24 23-30岁</label>
  25. 25 </fieldset>
  26. 26 </body>
  27. 27 </html>

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

复选框

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

  1. 1 <!DOCTYPE html>
  2. 2 <html xmlns="http://www.w3.org/1999/xhtml">
  3. 3 <head>
  4. 4 <title></title>
  5. 5 <meta name="viewport" content="width=device-width, initial-scale=1">
  6. 6 <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"
  7. 7 href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
  8. 8 <script id="jquery_182" type="text/javascript" class="library"
  9. 9 src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
  10. 10 <script id="jquerymobile_120" type="text/javascript" class="library"
  11. 11 src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
  12. 12 </head>
  13. 13 <body>
  14. 14 <fieldset data-role="controlgroup" data-type="horizontal">
  15. 15 <legend>爱好:</legend>
  16. 16 <input type="checkbox" name="radio1" id="radio1" value="any" checked="checked" />
  17. 17 <label for="radio1">
  18. 18 足球</label>
  19. 19 <input type="checkbox" name="radio1" id="radio2" value="16-22" />
  20. 20 <label for="radio2">
  21. 21 篮球</label>
  22. 22 <input type="checkbox" name="radio1" id="radio3" value="23-30" />
  23. 23 <label for="radio3">
  24. 24 编码(危险)</label>
  25. 25 </fieldset>
  26. 26 </body>
  27. 27 </html>

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

下拉菜单

  1. 1 <!DOCTYPE html>
  2. 2 <html xmlns="http://www.w3.org/1999/xhtml">
  3. 3 <head>
  4. 4 <title></title>
  5. 5 <meta name="viewport" content="width=device-width, initial-scale=1">
  6. 6 <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"
  7. 7 href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
  8. 8 <script id="jquery_182" type="text/javascript" class="library"
  9. 9 src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
  10. 10 <script id="jquerymobile_120" type="text/javascript" class="library"
  11. 11 src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
  12. 12 </head>
  13. 13 <body>
  14. 14 <div data-role="controlgroup">
  15. 15 <label class="select">
  16. 16 请选择兴趣
  17. 17 <select>
  18. 18 <option>电影</option>
  19. 19 <option>体育</option>
  20. 20 <option>旅游</option>
  21. 21 </select>
  22. 22 </label>
  23. 23
  24. 24 <label class="select">
  25. 25 请选择兴趣(多选)
  26. 26 <select>
  27. 27 <optgroup label="一般类">
  28. 28 <option>电影</option>
  29. 29 <option>体育</option>
  30. 30 <option>旅游</option>
  31. 31 </optgroup>
  32. 32 <optgroup label="特殊类">
  33. 33 <option>C</option>
  34. 34 <option>C++</option>
  35. 35 <option>Java</option>
  36. 36 </optgroup>
  37. 37 </select>
  38. 38 </label>
  39. 39 </div>
  40. 40 </body>
  41. 41 </html>

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

我们这里做一点改变,样式会发生变化:

 

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

结语

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

 
 
分类: 移动开发

jQuery Mobile (中)的更多相关文章

  1. JQuery mobile中按钮自定义属性的改变

    1..ui-mobile-viewport是jquery mobile默认给body加的class,这样的话包含选择符优先级高一点 <style> .ui-mobile-viewport ...

  2. jQuery Mobile 中创建按钮

    在 jQuery Mobile 中创建按钮 jQuery Mobile 中的按钮可通过三种方法创建: 使用 <button> 元素 使用 <input> 元素 使用 data- ...

  3. jQuery Mobile中的页面加载与跳转机制

    第一次做用jQuery Mobile做东西,发现一些跟平时的思维习惯不太一样的.其中这个框架的页面加载机制便是其中一个.如果不明白其中的奥秘,往往会出现一些让人摸不着头脑的怪现象,比如页面进入后点击按 ...

  4. jQuery Mobile中jQuery.mobile.changePage方法使用详解

    jQuery.mobile.changePage方法用的还是很多的.作为一个老手,有必要对jQuery mobile中实用方法做一些总结.系列文章请看jQuery Mobile专栏.jquery.mo ...

  5. 在 JQuery Mobile 中实现瀑布流图库布局

    先来看在Windows系统的1080P显示器中显示的效果: 这个整合方式几乎没有现存的实例,是自己总结出来的方法,在此记录下来. 首先访问Masonry官网下载masonry.pkgd.min.js: ...

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

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

  7. jquery.mobile 中 collapsible-set collapsible listview 共同布局问题

    最近项目用上了jquery.mobile这货,在手机上做点简单的显示.之前只知道有这个框架,没把玩过. 特别是事件绑定方面,相比桌面系统下浏览器用着各种不爽,不得要领. 如下图,在做后台系统时,一般左 ...

  8. jQuery Mobile中$.mobile.buttonMarkup方法使用具体解释

    近期在群里遇到多数网友提到$.mobile.buttonMarkup()方法的使用. 我这里就列了一下api的使用说明,以后大家看博客就能解决这个问题.如有不对的地方,请留言指出! jQuery Mo ...

  9. [转]jquery mobile中redirect重定向问题

    本文转自:http://www.cnblogs.com/freeliver54/p/3529813.html 在jquerymobile提交后如果要进行网页重定向时,一定要在form或<a> ...

随机推荐

  1. redis修改的源代码zincrby,hincrby命令

    在项目中大量使用zincrby命令.究其原因是统计一些统计指标的日志值,和需要返回到顺序topn. 通常情况下,.调用一次的指示器zincrby(zincrby default:type 1 type ...

  2. easyui 小知识

    默认为今天 $(document).ready(function () {        $(function () {            var curr_time = new Date();  ...

  3. PHP-微信公众平台开发-接收用户输入消息类型并响应

    原文:PHP-微信公众平台开发-接收用户输入消息类型并响应 <?php // 该代码块用于接收用户消息,根据用户输入的消息类型进行判断,文本,图片,视频,位置,链接,语音等,并取得值,处理后给予 ...

  4. CII-原子

    <atom.h> #ifndef ATOM_INCLUDED #define ATOM_INCLUDED extern int Atom_length(const char *str); ...

  5. android如何判断服务是否正在运行状态

    如何检查后台服务(Android的Service类)是否正在运行?我希望我的Activity能够显示Service的状态,然后我可以打开或者关闭它. /** * 判断服务是否处于运行状态. * @pa ...

  6. Milo的游戏开发的一些链接资料

    http://www.cnblogs.com/miloyip/default.aspx?page=1 http://www.cnblogs.com/miloyip/archive/2010/06/14 ...

  7. CSS知识总结之浏览器(持续更新)

    web页面浏览器渲染过程 1.解析html文件,并构建DOM树: 在DOM树中,每一个html标签都有一个对应的节点,并且每一个文本也有一个对应 的节点(js的textNode),DOM树的根节点就是 ...

  8. 记录一下Fedora21下安装Foundation5遇到的问题[尚有遗留问题]

    写在前面:之前安装过了gem,所以下面的步骤没有这一过程,再有就是忘记哪一步需要ruby中的一个.h文件.可以使用如下命令解决 sudo yum install ruby-devel ------ S ...

  9. List<string>和string[]

    List<string>和string[] List<string>是集合:string[]是数组: ///////////////////////////////////// ...

  10. Perl基础(1)chop与chomp的区别

    chop是去掉字符串的最后一个字符 chomp是去掉"$/"指定的结尾符号 测试程序一: [perl] #!/bin/perl $tmp = "sincere" ...