自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

jQuery Mobile表單元素學(xué)習(xí)

作者：呦菜
移動(dòng)開發(fā)
jQuery Mobile會自動(dòng)替換標(biāo)準(zhǔn)的HTML表單元素，例如文本框，復(fù)選框，列表框。以這種自定義的樣式工作在觸摸設(shè)備上的表單元素，易用性更強(qiáng)。

復(fù)選框?qū)兊煤艽?，易于點(diǎn)選。點(diǎn)擊下拉列表時(shí)，將會彈出一組大按鈕列表選項(xiàng)，提供給用戶選擇。

該框架支持新的HTML5元素，例如search和range。另外你可以利用列表框并添加data-role=”slider”并添加兩個(gè)option選項(xiàng)，創(chuàng)建不錯(cuò)的”打開/關(guān)閉”開關(guān)，

另外一個(gè)不錯(cuò)的特點(diǎn)是組合單選框和組合復(fù)選框，可以利用fieldset元素添加屬性data-role=”controlgroup”來創(chuàng)建一組單選按鈕或復(fù)選框，jQuery Mobile自動(dòng)格式化他們的格式。使它們看上去更fashion!

一般來說，開發(fā)者不需要關(guān)心表單的那些高級特性，開發(fā)者僅需要以正常的方式創(chuàng)建你的表單，jQuery Mobile框架會幫你完成剩余的工作。另外有一件事情需要開發(fā)人員來完成，即使用div或fieldset 屬性data-role=”fieldcontain”包裝每一個(gè)label/field。這樣jQuery Mobile會在label/field對之間添加一個(gè)水平分割條。這樣的對齊方式可以使其更容易查找。

  1. <!DOCTYPE html>  
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>jQuery Mobile Web 應(yīng)用程序</title> 
  6. <link href="jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/> 
  7. <script src="jquery-1.5.min.js" type="text/javascript"></script> 
  8. <script src="jquery.mobile-1.0a3.min.js" type="text/javascript"></script> 
  9. </head>  
  10.  <body>  
  11.         
  12.     <div data-role="page" id="home">  
  13.         
  14.       <div data-role="header">  
  15.         <h1>Ice Cream Order Form</h1>  
  16.       </div>  
  17.         
  18.       <div data-role="content">  
  19.         <form action="#" method="get">  
  20.           
  21.          <div data-role="fieldcontain">  
  22.            <label for="name">Your Name:</label>  
  23.            <input type="text" name="name" id="name" value=""  />  
  24.          </div>  
  25.            
  26.          <div data-role="controlgroup">  
  27.            <legend>Which flavour(s) would you like?</legend>  
  28.              
  29.            <input type="checkbox" name="vanilla" id="vanilla" class="custom" />  
  30.            <label for="vanilla">Vanilla</label>  
  31.              
  32.            <input type="checkbox" name="chocolate" id="chocolate" class="custom" />  
  33.            <label for="chocolate">Chocolate</label>  
  34.              
  35.            <input type="checkbox" name="strawberry" id="strawberry" class="custom" />  
  36.            <label for="strawberry">Strawberry</label>  
  37.              
  38.          </div>     
  39.            
  40.          <div data-role="fieldcontain">  
  41.            <label for="quantity">Number of Cones:</label>  
  42.            <input type="range" name="quantity" id="quantity" value="1" min="1" max="10"  />  
  43.          </div>  
  44.            
  45.       </div>  
  46.         
  47.     </div>  
  48.         
  49.     </body> 
  50.    </html> 

結(jié)果如圖所示：

  1. <!DOCTYPE html>  
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>jQuery Mobile Web 應(yīng)用程序</title> 
  6. <link href="jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/> 
  7. <script src="jquery-1.5.min.js" type="text/javascript"></script> 
  8. <script src="jquery.mobile-1.0a3.min.js" type="text/javascript"></script> 
  9. <!-- 只要將當(dāng)前站點(diǎn)配置為移動(dòng)應(yīng)用程序，則對 phonegap.js 的該引用將允許代碼提示。 
  10.      要將該站點(diǎn)配置為移動(dòng)應(yīng)用程序，請轉(zhuǎn)至“站點(diǎn)”->“移動(dòng)應(yīng)用程序”->“配置應(yīng)用程序框架...”--> 
  11. <script src="/phonegap.js" type="text/javascript"></script> 
  12. </head>  
  13.  <body>  
  14.         
  15.     <div data-role="page" id="home">  
  16.         
  17.       <div data-role="header">  
  18.         <h1>Ice Cream Order Form</h1>  
  19.       </div>  
  20.         
  21.       <div data-role="content">  
  22.           
  23.         
  24.          <div data-role="fieldcontain">  
  25.            <label for="sprinkles">Sprinkles:</label>  
  26.             <select name="sprinkles" id="sprinkles" data-role="slider">  
  27.               <option value="off">No</option>  
  28.               <option value="on">Yes</option>  
  29.             </select>  
  30.          </div>  
  31.         
  32.          <div data-role="fieldcontain">  
  33.            <label for="store">Collect from Store:</label>  
  34.             <select name="store" id="store">  
  35.               <option value="mainStreet">Main Street</option>  
  36.               <option value="libertyAvenue">Liberty Avenue</option>  
  37.               <option value="circleSquare">Circle Square</option>  
  38.               <option value="angelRoad">Angel Road</option>  
  39.             </select>  
  40.          </div>  
  41.            
  42.         <div class="ui-body ui-body-b">  
  43.           <fieldset class="ui-grid-a">  
  44.             <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>  
  45.             <div class="ui-block-b"><button type="submit" data-theme="a">Order Ice Cream</button></div>      
  46.           </fieldset>  
  47.         </div>  
  48.            
  49.       </div>  
  50.         
  51.     </div>  
  52.         
  53.     </body> 
  54.    </html> 

以上代碼效果如圖所示：

責(zé)任編輯：佚名 來源： 呦菜的博客
jQuery Mobile表單
相關(guān)推薦

2011-09-05 16:43:00

jQuery Mobi

2011-09-01 14:14:00

jQuery Mobi

2011-09-02 10:59:10

jQuery Mobi

2011-09-01 10:27:42

jQuery Mobi

2011-09-05 16:47:49

jQuery Mobi

2011-09-06 16:16:48

jQuery Mobi

2011-09-01 14:55:41

jQuery Mobi列表視圖

2011-04-21 13:01:15

visibilitydisplay

2012-11-15 10:18:51

IBMdw

2011-07-19 14:51:54

jQuery Mobi特性

2011-09-02 10:41:51

2013-12-02 14:29:27

jQuery元素屬性

2012-11-12 12:27:08

jQuery Mobi

2011-07-21 16:10:11

button按鈕jQuery Mobi

2011-07-20 14:11:24

響應(yīng)布局jQuery Mobi

2011-07-21 14:57:34

jQuery Mobi

2011-05-26 16:28:08

Android jQuery

2011-07-19 17:09:44

jQuery Mobi事件

2011-09-01 10:21:52

jQuery Mobi元素

2011-07-19 17:03:31

jQuery Mobi默認(rèn)配置
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號