jQuery Mobile使用指南-触摸选择的表单元素

作者: ldsea 分类: 程序生活 发布时间: 2011-12-31 11:03

 

触摸选择的表单元素

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.   
  11. <div data-role="page" id="home"> 
  12.   
  13.   <div data-role="header"> 
  14.     <h1>Ice Cream Order Form</h1> 
  15.   </div> 
  16.   
  17.   <div data-role="content"> 
  18.     <form action="#" method="get"> 
  19.     
  20.      <div data-role="fieldcontain"> 
  21.        <label for="name">Your Name:</label> 
  22.        <input type="text" name="name" id="name" value=""   /> 
  23.      </div> 
  24.      
  25.      <div data-role="controlgroup"> 
  26.        <legend>Which flavour(s) would you like?</legend> 
  27.        
  28.        <input type="checkbox" name="vanilla" id="vanilla" class="custom"  /> 
  29.        <label for="vanilla">Vanilla</label> 
  30.        
  31.        <input type="checkbox" name="chocolate" id="chocolate" class="custom"  /> 
  32.        <label for="chocolate">Chocolate</label> 
  33.        
  34.        <input type="checkbox" name="strawberry" id="strawberry" class="custom"  /> 
  35.        <label for="strawberry">Strawberry</label> 
  36.        
  37.      </div>    
  38.      
  39.      <div data-role="fieldcontain"> 
  40.        <label for="quantity">Number of Cones:</label> 
  41.        <input type="range" name="quantity" id="quantity" value="1" min="1" max="10"   /> 
  42.      </div> 
  43.   
  44.      <div data-role="fieldcontain"> 
  45.        <label for="sprinkles">Sprinkles:</label> 
  46.         <select name="sprinkles" id="sprinkles" data-role="slider"> 
  47.           <option value="off">No</option> 
  48.           <option value="on">Yes</option> 
  49.         </select> 
  50.      </div> 
  51.   
  52.      <div data-role="fieldcontain"> 
  53.        <label for="store">Collect from Store:</label> 
  54.         <select name="store" id="store"> 
  55.           <option value="mainStreet">Main Street</option> 
  56.           <option value="libertyAvenue">Liberty Avenue</option> 
  57.           <option value="circleSquare">Circle Square</option> 
  58.           <option value="angelRoad">Angel Road</option> 
  59.         </select> 
  60.      </div> 
  61.      
  62.     <div class="ui-body ui-body-b"> 
  63.       <fieldset class="ui-grid-a"> 
  64.         <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div> 
  65.         <div class="ui-block-b"><button type="submit" data-theme="a">Order Ice Cream</button></div>     
  66.       </fieldset> 
  67.     </div> 
  68.      
  69.   </div> 
  70.   
  71. </div> 
  72.   
  73. </body> 
  74. </html> 

列表视图

列表视图是jQuery Mobile中功能强大的一个特性。它会使标准的无序或有序列表应用更广泛。应用方法就是在ul或ol标签中添加data-role=”listview”属性。

下面的一些情景将会用到创建列表视图

简单的文件列表项

◆简单的文件列表,会有一个好看的盒环绕着每一个列表项

◆链接列表,框架会自动为每一个链接加一个箭头”>”,显示在链接按钮的右侧

◆嵌套列表,如果你在一个li中嵌套另一个ul,jQuery Mobile会为这个嵌套列表自动建立一个”page”,并为它的父li自动加一个链接,这样很容易实现树状菜单选项,设置功能等等。

◆分隔线的按钮列表,在一个li中存放2个链接,你可以建立一个还垂直分隔条,用户可点击左侧或右侧的列表选项,展现不同的内容

◆记数气泡 如果你在列表选项中添加class=”ui-li-count”,框架会在其中生成一个”小泡泡”图标显现于列表选项的右侧,并在”小泡泡”中显示一些内容。类似在收信箱中看到已经收到的信息条数

◆查找过滤 在ul或ol中添加data-filter=”true”属性。则这个列表项就具备的查询的功能。”Filter result…”文本框将会显示在列表项的上面,允许用户根据条件来将一个大的列表项变小(过滤显示)

◆列表分隔 将列表项分割,可以在任意列表项上添加属性data-role=”list-divider

◆列表缩略图和图标。将img元素放在在列表项的开始, jQuery Mobile将会以缩略图的形式来展现,图片的大小为80 X 80像素。如果添加class=”ui-li-icon”类样式img元素的大小将会以16 X 16像素的图标

以下是一个列表项的实例


  1. <!DOCTYPE html> 
  2. <html> 
  3.   <head> 
  4.   <title>jQuery Mobile Lists 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.   
  11. <div data-role="page" id="home"> 
  12.   
  13.   <div data-role="header"> 
  14.     <h1>Lists Demo</h1> 
  15.   </div> 
  16.   
  17.   <div data-role="content"> 
  18.   
  19.     <h2 style="padding: 1em 0;">A list view</h2> 
  20.   
  21.     <ul data-role="listview" data-inset="true"> 
  22.       <li>Cat</li> 
  23.       <li>Dog</li> 
  24.       <li>Mouse</li> 
  25.       <li>Squirrel</li> 
  26.     </ul> 
  27.     
  28.     <h2 style="padding: 1em 0;">A list of links</h2> 
  29.   
  30.     <ul data-role="listview" data-inset="true"> 
  31.       <li><a href="#">About this app</a></li> 
  32.       <li><a href="#">Buy ice cream</a></li> 
  33.       <li><a href="#">Find a store</a></li> 
  34.     </ul> 
  35.   
  36.     <h2 style="padding: 1em 0;">Nested lists</h2> 
  37.   
  38.     <ul data-role="listview" data-inset="true"> 
  39.       <li>Play 
  40.         <ul> 
  41.           <li><a href="#">Easy</a></li> 
  42.           <li><a href="#">Medium</a></li> 
  43.           <li><a href="#">Hard</a></li> 
  44.         </ul> 
  45.       </li> 
  46.       <li>Settings 
  47.         <ul> 
  48.           <li><a href="#">Graphics</a></li> 
  49.           <li><a href="#">Sound</a></li> 
  50.           <li><a href="#">Device</a></li> 
  51.         </ul> 
  52.       </li> 
  53.       <li>Highscores 
  54.         <ul> 
  55.           <li><a href="#">View</a></li> 
  56.           <li><a href="#">Submit</a></li> 
  57.           <li><a href="#">Reset</a></li> 
  58.         </ul> 
  59.       </li> 
  60.     </ul> 
  61.   
  62.     <h2 style="padding: 1em 0;">A split button list with filter</h2> 
  63.   
  64.     <ul data-role="listview" data-inset="true" data-filter="true"> 
  65.       <li> 
  66.         <a href="#">The Grapes of Wrath</a> 
  67.         <a href="#">Buy This Book</a> 
  68.       </li> 
  69.       <li> 
  70.         <a href="#">The Trial</a> 
  71.         <a href="#">Buy This Book</a> 
  72.       </li> 
  73.       <li> 
  74.         <a href="#">A Tale of Two Cities</a> 
  75.         <a href="#">Buy This Book</a> 
  76.       </li>      
  77.     </ul> 
  78.   
  79.     <h2 style="padding: 1em 0;">A list with count bubbles</h2> 
  80.   
  81.     <ul data-role="listview" data-inset="true"> 
  82.       <li><a href="#">SuperWidgets</a> <span class="ui-li-count">14</span></li> 
  83.       <li><a href="#">MegaWidgets</a> <span class="ui-li-count">0</span></li> 
  84.       <li><a href="#">WonderWidgets</a> <span class="ui-li-count">327</span></li>      
  85.     </ul> 
  86.     
  87.   </div> 
  88.   
  89. </div> 
  90.   
  91. </body> 
  92. </html> 

data-inset=”true”将格式化列表块为圆角化,如果你使用这种样式的话,列表条目的宽度拉伸成与浏览器窗口的宽度一致

主题

jQuery Mobile渲染的灰色、黑色和蓝色及圆形的组件使其看起来很漂亮,但是如果你的整个应用都使用这样的样式,将会使其变得很乏味。jQuery Mobile允许你自定义官方一些组件的主题。例如:

◆Font family

◆Drop shadows

◆按钮和盒状元素的边框圆角半径

◆图标组件

另外,每一个主题包含26种不同颜色的切换(标记从a 到z),可以控制前景颜色,背景色和渐变色,典型用法是使页面元素部分替换,你可以使用data-theme属性。例如:


  1. <!DOCTYPE html> 
  2. <html> 
  3.   <head> 
  4.   <title>Page Title</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.   
  11. <div data-role="page" id="home"> 
  12.   
  13.   <div data-role="header"> 
  14.     <h1>Home</h1> 
  15.   </div> 
  16.   
  17.   <div data-role="content"> 
  18.     <a href="#" data-role="button" data-theme="a">About this app</a> 
  19.     <a href="#" data-role="button" data-theme="b">About this app</a> 
  20.     <a href="#" data-role="button" data-theme="c">About this app</a> 
  21.     <a href="#" data-role="button" data-theme="d">About this app</a> 
  22.     <a href="#" data-role="button" data-theme="e">About this app</a> 
  23.   </div> 
  24.   
  25. </div> 
  26.   
  27. </body> 
  28. </html> 

事件

框架还提供了简单的用户接口,并添加了移动设备支持的特殊事件。


  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <title>jQuery Mobile Events</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. <script type="text/javascript"> 
  9.   
  10. $( function() { 
  11.   
  12.   $('body').bind( 'taphold', function( e ) { 
  13.     alert( 'You tapped and held!' ); 
  14.     e.stopImmediatePropagation(); 
  15.     return false; 
  16.   } );  
  17.   
  18.   $('body').bind( 'swipe', function( e ) { 
  19.     alert( 'You swiped!' ); 
  20.     e.stopImmediatePropagation(); 
  21.     return false; 
  22.   } );  
  23.   
  24. } ); 
  25.   
  26. </script>  
  27.   
  28. </head> 
  29.   
  30. <body> 
  31.   
  32. <div data-role="page" id="home"> 
  33.   
  34.   <div data-role="header"> 
  35.     <h1>jQuery Mobile Events</h1> 
  36.   </div> 
  37.   
  38.   <div data-role="content"> 
  39.     <p>Try:</p> 
  40.     <ul> 
  41.       <li>Tapping and holding</li> 
  42.       <li>Swiping</li> 
  43.     </ul> 
  44.   </div> 
  45.   
  46. </div> 
  47.   
  48. </body> 
  49. </html> 

 

【编辑推荐】

  1. 如何在jQuery Mobile上编写应用程序
  2. jQuery Mobile开发移动Web应用代码分析:Rails设置篇
  3. 创建由jQuery Mobile驱动的移动web应用程序
  4. 8个优秀的jQuery Mobile教程
  5. jQuery Mobile开发方法和实用工具
  6. jQuery Mobile的响应布局

发表评论