解析关于jQuery Mobile学习笔记

移动开发
关于jQuery Mobile学习笔记是本文要介绍的内容,主要是来了解jQuery Mobile中如何来格式化文本,具体内容来看本文详解。

关于jQuery Mobile学习笔记是本文要介绍的内容,主要是来了解jQuery Mobile中如何来格式化文本,具体内容来看本文详解。为了使其尽可能的灵活,jQuery Mobile使更多的普通HTML内容更加独立。加入适当的缩进使内容的可读性更强。

有两种布局方法使其格式化变得更简单:布局表格和可折叠的内容块布局表格:组织内容以列的形式显示,有两列表格,和三列表格可折叠的内容:当点击内容块的标题,则会将其隐藏的详细内容展现出来,下面是一个可折叠内容的实例,单击标题将看到具体的内容,再点击标题则会将展现的内容隐藏。

  1. <!DOCTYPE html> 
  2. <html> 
  3.   <head> 
  4.   <title>Collapsible Content Demo</title> 
  5.   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> 
  6.   <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
  7.   <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> 
  8. </head> 
  9. <body> 
  10. <div data-role="page" id="home"> 
  11.   <div data-role="header"> 
  12.     <h1>Home</h1> 
  13.   </div> 
  14.   <div data-role="content"> 
  15.     <div data-role="collapsible" data-state="collapsed"> 
  16.       <h3>About this app</h3> 
  17.       <p>This app rocks!</p> 
  18.     </div> 
  19.   </div> 
  20. </div> 
  21. </body> 
  22. </html> 

触摸选择的表单元素

jQuery Mobile会自动替换标准的HTML表单元素,例如文本框,复选框,列表框。以这种自定义的样式工作在触摸设备上的表单元素,易用性更强。

例如,复选框将会变得很大,易于点选。点击下拉列表时,将会弹出一组大按钮列表选项,提供给用户选择。

该框架支持新的HTML5元素,例如search和range。另外你可以利用列表框并添加data-role=”slider”并添加两个option选项,创建不错的”打开/关闭”开关,

另外一个不错的特点是组合单选框和组合复选框,可以利用fieldset元素添加属性data-role=”controlgroup”来创建一组单选按钮或复选框,jQuery Mobile自动格式化他们的格式。使它们看上去更fashion!

一般来说,开发者不需要关心表单的那些高级特性,开发者仅需要以正常的方式创建你的表单,jQuery Mobile框架会帮你完成剩余的工作。另外有一件事情需要开发人员来完成,即使用div或fieldset 属性data-role=”fieldcontain”包装每一个label/field。这样jQuery Mobile会在label/field对之间添加一个水平分割条。这样的对齐方式可以使其更容易查找。

下面是一个jQuery Mobile版的表单元素

  1. <!DOCTYPE html> 
  2. <html> 
  3.   <head> 
  4.   <title>jQuery Mobile Form Demo</title> 
  5.   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> 
  6.   <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
  7.   <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> 
  8. </head> 
  9. <body> 
  10. <div data-role="page" id="home"> 
  11.   <div data-role="header"> 
  12.     <h1>Ice Cream Order Form</h1> 
  13.   </div> 
  14.   <div data-role="content"> 
  15.     <form action="#" method="get"> 
  16.      <div data-role="fieldcontain"> 
  17.        <label for="name">Your Name:</label> 
  18.        <input type="text" name="name" id="name" value=""  /> 
  19.      </div> 
  20.      <div data-role="controlgroup"> 
  21.        <legend>Which flavour(s) would you like?</legend> 
  22.        <input type="checkbox" name="vanilla" id="vanilla" class="custom" /> 
  23.        <label for="vanilla">Vanilla</label> 
  24.        <input type="checkbox" name="chocolate" id="chocolate" class="custom" /> 
  25.        <label for="chocolate">Chocolate</label> 
  26.        <input type="checkbox" name="strawberry" id="strawberry" class="custom" /> 
  27.        <label for="strawberry">Strawberry</label> 
  28.      </div>     
  29.      <div data-role="fieldcontain"> 
  30.        <label for="quantity">Number of Cones:</label> 
  31.        <input type="range" name="quantity" id="quantity" value="1" min="1" max="10"  /> 
  32.      </div> 
  33.      <div data-role="fieldcontain"> 
  34.        <label for="sprinkles">Sprinkles:</label> 
  35.         <select name="sprinkles" id="sprinkles" data-role="slider"> 
  36.           <option value="off">No</option> 
  37.           <option value="on">Yes</option> 
  38.         </select> 
  39.      </div> 
  40.      <div data-role="fieldcontain"> 
  41.        <label for="store">Collect from Store:</label> 
  42.        <select name="store" id="store"> 
  43.           <option value="mainStreet">Main Street</option> 
  44.           <option value="libertyAvenue">Liberty Avenue</option> 
  45.           <option value="circleSquare">Circle Square</option> 
  46.           <option value="angelRoad">Angel Road</option> 
  47.         </select> 
  48.      </div> 
  49.     <div class="ui-body ui-body-b"> 
  50.       <fieldset class="ui-grid-a"> 
  51.         <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div> 
  52.        <div class="ui-block-b"><button type="submit" data-theme="a">Order Ice Cream</button></div>      
  53.       </fieldset> 
  54.     </div> 
  55.   </div> 
  56. </div> 
  57. </body> 
  58. </html> 

小结:解析关于jQuery Mobile学习笔记的内容介绍完了,希望通过本文的学习能对你有所帮助!

责任编辑:zhaolei 来源: 互联网
相关推荐

2011-09-01 14:55:41

jQuery Mobi列表视图

2011-09-06 16:16:48

jQuery Mobi

2011-09-05 16:47:49

jQuery Mobi

2011-09-02 10:41:51

2011-09-01 15:00:48

jQuery MobiDemo

2011-09-05 16:43:00

jQuery Mobi

2011-09-01 10:16:43

JQuery Mobi

2011-09-02 10:59:10

jQuery Mobi

2012-03-08 11:23:09

jQuery Mobi

2011-08-29 10:01:27

QTWebkit插件

2011-09-01 10:27:42

jQuery Mobi

2011-08-23 17:33:08

LuaMetatable

2011-08-23 13:15:37

LUAPackage

2012-11-15 10:18:51

IBMdw

2011-07-19 14:51:54

jQuery Mobi特性

2011-07-20 14:11:24

响应布局jQuery Mobi

2011-07-21 16:10:11

button按钮jQuery Mobi

2011-09-01 10:21:52

jQuery Mobi元素

2011-05-26 16:28:08

Android jQuery

2011-07-21 14:57:34

jQuery Mobi
点赞
收藏

51CTO技术栈公众号