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. 

  2. <html> 
    3. 

  3.   <head> 
    4. 

  4.   <title>jQuery Mobile Form Demo</title> 
    5. 

  5.   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"  /> 
    6. 

  6.   <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
    7. 

  7.   <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> 
    8. 

  8. </head> 
    9. 

  9. <body> 
    10. 

  10.   
    11. 

  11. <div data-role="page" id="home"> 
    12. 

  12.   
    13. 

  13.   <div data-role="header"> 
    14. 

  14.     <h1>Ice Cream Order Form</h1> 
    15. 

  15.   </div> 
    16. 

  16.   
    17. 

  17.   <div data-role="content"> 
    18. 

  18.     <form action="#" method="get"> 
    19. 

  19.     
    20. 

  20.      <div data-role="fieldcontain"> 
    21. 

  21.        <label for="name">Your Name:</label> 
    22. 

  22.        <input type="text" name="name" id="name" value=""   /> 
    23. 

  23.      </div> 
    24. 

  24.      
    25. 

  25.      <div data-role="controlgroup"> 
    26. 

  26.        <legend>Which flavour(s) would you like?</legend> 
    27. 

  27.        
    28. 

  28.        <input type="checkbox" name="vanilla" id="vanilla" class="custom"  /> 
    29. 

  29.        <label for="vanilla">Vanilla</label> 
    30. 

  30.        
    31. 

  31.        <input type="checkbox" name="chocolate" id="chocolate" class="custom"  /> 
    32. 

  32.        <label for="chocolate">Chocolate</label> 
    33. 

  33.        
    34. 

  34.        <input type="checkbox" name="strawberry" id="strawberry" class="custom"  /> 
    35. 

  35.        <label for="strawberry">Strawberry</label> 
    36. 

  36.        
    37. 

  37.      </div>    
    38. 

  38.      
    39. 

  39.      <div data-role="fieldcontain"> 
    40. 

  40.        <label for="quantity">Number of Cones:</label> 
    41. 

  41.        <input type="range" name="quantity" id="quantity" value="1" min="1" max="10"   /> 
    42. 

  42.      </div> 
    43. 

  43.   
    44. 

  44.      <div data-role="fieldcontain"> 
    45. 

  45.        <label for="sprinkles">Sprinkles:</label> 
    46. 

  46.         <select name="sprinkles" id="sprinkles" data-role="slider"> 
    47. 

  47.           <option value="off">No</option> 
    48. 

  48.           <option value="on">Yes</option> 
    49. 

  49.         </select> 
    50. 

  50.      </div> 
    51. 

  51.   
    52. 

  52.      <div data-role="fieldcontain"> 
    53. 

  53.        <label for="store">Collect from Store:</label> 
    54. 

  54.         <select name="store" id="store"> 
    55. 

  55.           <option value="mainStreet">Main Street</option> 
    56. 

  56.           <option value="libertyAvenue">Liberty Avenue</option> 
    57. 

  57.           <option value="circleSquare">Circle Square</option> 
    58. 

  58.           <option value="angelRoad">Angel Road</option> 
    59. 

  59.         </select> 
    60. 

  60.      </div> 
    61. 

  61.      
    62. 

  62.     <div class="ui-body ui-body-b"> 
    63. 

  63.       <fieldset class="ui-grid-a"> 
    64. 

  64.         <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div> 
    65. 

  65.         <div class="ui-block-b"><button type="submit" data-theme="a">Order Ice Cream</button></div>     
    66. 

  66.       </fieldset> 
    67. 

  67.     </div> 
    68. 

  68.      
    69. 

  69.   </div> 
    70. 

  70.   
    71. 

  71. </div> 
    72. 

  72.   
    73. 

  73. </body> 
    74. 

  74. </html> 
    75. 



列表视图


列表视图是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. 

  2. <html> 
    3. 

  3.   <head> 
    4. 

  4.   <title>jQuery Mobile Lists Demo</title> 
    5. 

  5.   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"  /> 
    6. 

  6.   <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
    7. 

  7.   <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> 
    8. 

  8. </head> 
    9. 

  9. <body> 
    10. 

  10.   
    11. 

  11. <div data-role="page" id="home"> 
    12. 

  12.   
    13. 

  13.   <div data-role="header"> 
    14. 

  14.     <h1>Lists Demo</h1> 
    15. 

  15.   </div> 
    16. 

  16.   
    17. 

  17.   <div data-role="content"> 
    18. 

  18.   
    19. 

  19.     <h2 style="padding: 1em 0;">A list view</h2> 
    20. 

  20.   
    21. 

  21.     <ul data-role="listview" data-inset="true"> 
    22. 

  22.       <li>Cat</li> 
    23. 

  23.       <li>Dog</li> 
    24. 

  24.       <li>Mouse</li> 
    25. 

  25.       <li>Squirrel</li> 
    26. 

  26.     </ul> 
    27. 

  27.     
    28. 

  28.     <h2 style="padding: 1em 0;">A list of links</h2> 
    29. 

  29.   
    30. 

  30.     <ul data-role="listview" data-inset="true"> 
    31. 

  31.       <li><a href="#">About this app</a></li> 
    32. 

  32.       <li><a href="#">Buy ice cream</a></li> 
    33. 

  33.       <li><a href="#">Find a store</a></li> 
    34. 

  34.     </ul> 
    35. 

  35.   
    36. 

  36.     <h2 style="padding: 1em 0;">Nested lists</h2> 
    37. 

  37.   
    38. 

  38.     <ul data-role="listview" data-inset="true"> 
    39. 

  39.       <li>Play 
    40. 

  40.         <ul> 
    41. 

  41.           <li><a href="#">Easy</a></li> 
    42. 

  42.           <li><a href="#">Medium</a></li> 
    43. 

  43.           <li><a href="#">Hard</a></li> 
    44. 

  44.         </ul> 
    45. 

  45.       </li> 
    46. 

  46.       <li>Settings 
    47. 

  47.         <ul> 
    48. 

  48.           <li><a href="#">Graphics</a></li> 
    49. 

  49.           <li><a href="#">Sound</a></li> 
    50. 

  50.           <li><a href="#">Device</a></li> 
    51. 

  51.         </ul> 
    52. 

  52.       </li> 
    53. 

  53.       <li>Highscores 
    54. 

  54.         <ul> 
    55. 

  55.           <li><a href="#">View</a></li> 
    56. 

  56.           <li><a href="#">Submit</a></li> 
    57. 

  57.           <li><a href="#">Reset</a></li> 
    58. 

  58.         </ul> 
    59. 

  59.       </li> 
    60. 

  60.     </ul> 
    61. 

  61.   
    62. 

  62.     <h2 style="padding: 1em 0;">A split button list with filter</h2> 
    63. 

  63.   
    64. 

  64.     <ul data-role="listview" data-inset="true" data-filter="true"> 
    65. 

  65.       <li> 
    66. 

  66.         <a href="#">The Grapes of Wrath</a> 
    67. 

  67.         <a href="#">Buy This Book</a> 
    68. 

  68.       </li> 
    69. 

  69.       <li> 
    70. 

  70.         <a href="#">The Trial</a> 
    71. 

  71.         <a href="#">Buy This Book</a> 
    72. 

  72.       </li> 
    73. 

  73.       <li> 
    74. 

  74.         <a href="#">A Tale of Two Cities</a> 
    75. 

  75.         <a href="#">Buy This Book</a> 
    76. 

  76.       </li>      
    77. 

  77.     </ul> 
    78. 

  78.   
    79. 

  79.     <h2 style="padding: 1em 0;">A list with count bubbles</h2> 
    80. 

  80.   
    81. 

  81.     <ul data-role="listview" data-inset="true"> 
    82. 

  82.       <li><a href="#">SuperWidgets</a> <span class="ui-li-count">14</span></li> 
    83. 

  83.       <li><a href="#">MegaWidgets</a> <span class="ui-li-count">0</span></li> 
    84. 

  84.       <li><a href="#">WonderWidgets</a> <span class="ui-li-count">327</span></li>      
    85. 

  85.     </ul> 
    86. 

  86.     
    87. 

  87.   </div> 
    88. 

  88.   
    89. 

  89. </div> 
    90. 

  90.   
    91. 

  91. </body> 
    92. 

  92. </html> 
    93. 



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


主题


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


◆Font family


◆Drop shadows


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


◆图标组件


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




    

  1. 

    <!DOCTYPE html> 
    

    2. 

  2. <html> 
    3. 

  3.   <head> 
    4. 

  4.   <title>Page Title</title> 
    5. 

  5.   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"  /> 
    6. 

  6.   <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
    7. 

  7.   <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> 
    8. 

  8. </head> 
    9. 

  9. <body> 
    10. 

  10.   
    11. 

  11. <div data-role="page" id="home"> 
    12. 

  12.   
    13. 

  13.   <div data-role="header"> 
    14. 

  14.     <h1>Home</h1> 
    15. 

  15.   </div> 
    16. 

  16.   
    17. 

  17.   <div data-role="content"> 
    18. 

  18.     <a href="#" data-role="button" data-theme="a">About this app</a> 
    19. 

  19.     <a href="#" data-role="button" data-theme="b">About this app</a> 
    20. 

  20.     <a href="#" data-role="button" data-theme="c">About this app</a> 
    21. 

  21.     <a href="#" data-role="button" data-theme="d">About this app</a> 
    22. 

  22.     <a href="#" data-role="button" data-theme="e">About this app</a> 
    23. 

  23.   </div> 
    24. 

  24.   
    25. 

  25. </div> 
    26. 

  26.   
    27. 

  27. </body> 
    28. 

  28. </html> 
    29. 



事件


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




    

  1. 

    <!DOCTYPE html> 
    

    2. 

  2. <html> 
    3. 

  3. <head> 
    4. 

  4. <title>jQuery Mobile Events</title> 
    5. 

  5. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"  /> 
    6. 

  6. <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
    7. 

  7. <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> 
    8. 

  8. <script type="text/javascript"> 
    9. 

  9.   
    10. 

  10. $( function() { 
    11. 

  11.   
    12. 

  12.   $('body').bind( 'taphold', function( e ) { 
    13. 

  13.     alert( 'You tapped and held!' ); 
    14. 

  14.     e.stopImmediatePropagation(); 
    15. 

  15.     return false; 
    16. 

  16.   } );  
    17. 

  17.   
    18. 

  18.   $('body').bind( 'swipe', function( e ) { 
    19. 

  19.     alert( 'You swiped!' ); 
    20. 

  20.     e.stopImmediatePropagation(); 
    21. 

  21.     return false; 
    22. 

  22.   } );  
    23. 

  23.   
    24. 

  24. } ); 
    25. 

  25.   
    26. 

  26. </script>  
    27. 

  27.   
    28. 

  28. </head> 
    29. 

  29.   
    30. 

  30. <body> 
    31. 

  31.   
    32. 

  32. <div data-role="page" id="home"> 
    33. 

  33.   
    34. 

  34.   <div data-role="header"> 
    35. 

  35.     <h1>jQuery Mobile Events</h1> 
    36. 

  36.   </div> 
    37. 

  37.   
    38. 

  38.   <div data-role="content"> 
    39. 

  39.     <p>Try:</p> 
    40. 

  40.     <ul> 
    41. 

  41.       <li>Tapping and holding</li> 
    42. 

  42.       <li>Swiping</li> 
    43. 

  43.     </ul> 
    44. 

  44.   </div> 
    45. 

  45.   
    46. 

  46. </div> 
    47. 

  47.   
    48. 

  48. </body> 
    49. 

  49. </html> 
    50. 



 


【编辑推荐】




    

  1. 如何在jQuery Mobile上编写应用程序
    2. 

  2. jQuery Mobile开发移动Web应用代码分析：Rails设置篇
    3. 

  3. 创建由jQuery Mobile驱动的移动web应用程序
    4. 

  4. 8个优秀的jQuery Mobile教程
    5. 

  5. jQuery Mobile开发方法和实用工具
    6. 

  6. jQuery Mobile的响应布局
    7. 




        

        

            
 

        

                

            	

		
发表回复 
您的电子邮箱地址不会被公开。 必填项已用 * 标注





 


	

	        

    

    

    

        
 更多阅读

        

            

                
    
                                    

            

            

                
            

        

    

    

        
 标签云

        

            12306
Android
Apple
Bitcoin
bluehost
CSS
discuz
E72i
eclipse
Firefox
flex
hold住
house
httpclient
ios
IOS5.1.1
iPad
iPhone
java
MAC
买房
减肥
基带
大学生了没
工作
序列号
微心情
快捷键
支付宝
春运
春运 2012 网上买火车票
框架
模板
漫画
火车票
破解
碎碎念
程序员
笑话
编程
苹果
装修
视频
越狱
项目管理