jQuery Mobile表單元素學習

作者：呦菜 2012-03-08 11:23:09

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對之間添加一個水平分割條。這樣的對齊方式可以使其更容易查找。

<!DOCTYPE html>  
<html> 
<head> 
<meta charset="utf-8"> 
<title>jQuery Mobile Web 應用程序</title> 
<link href="jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/> 
<script src="jquery-1.5.min.js" type="text/javascript"></script> 
<script src="jquery.mobile-1.0a3.min.js" type="text/javascript"></script> 
</head>  
 <body>  
        
    <div data-role="page" id="home">  
        
      <div data-role="header">  
        <h1>Ice Cream Order Form</h1>  
      </div>  
        
      <div data-role="content">  
        <form action="#" method="get">  
          
         <div data-role="fieldcontain">  
           <label for="name">Your Name:</label>  
           <input type="text" name="name" id="name" value=""  />  
         </div>  
           
         <div data-role="controlgroup">  
           <legend>Which flavour(s) would you like?</legend>  
             
           <input type="checkbox" name="vanilla" id="vanilla" class="custom" />  
           <label for="vanilla">Vanilla</label>  
             
           <input type="checkbox" name="chocolate" id="chocolate" class="custom" />  
           <label for="chocolate">Chocolate</label>  
             
           <input type="checkbox" name="strawberry" id="strawberry" class="custom" />  
           <label for="strawberry">Strawberry</label>  
             
         </div>     
           
         <div data-role="fieldcontain">  
           <label for="quantity">Number of Cones:</label>  
           <input type="range" name="quantity" id="quantity" value="1" min="1" max="10"  />  
         </div>  
           
      </div>  
        
    </div>  
        
    </body> 
   </html>

結果如圖所示：

<!DOCTYPE html>  
<html> 
<head> 
<meta charset="utf-8"> 
<title>jQuery Mobile Web 應用程序</title> 
<link href="jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/> 
<script src="jquery-1.5.min.js" type="text/javascript"></script> 
<script src="jquery.mobile-1.0a3.min.js" type="text/javascript"></script> 
<!-- 只要將當前站點配置為移動應用程序，則對 phonegap.js 的該引用將允許代碼提示。 
     要將該站點配置為移動應用程序，請轉至“站點”->“移動應用程序”->“配置應用程序框架...”--> 
<script src="/phonegap.js" type="text/javascript"></script> 
</head>  
 <body>  
        
    <div data-role="page" id="home">  
        
      <div data-role="header">  
        <h1>Ice Cream Order Form</h1>  
      </div>  
        
      <div data-role="content">  
          
        
         <div data-role="fieldcontain">  
           <label for="sprinkles">Sprinkles:</label>  
            <select name="sprinkles" id="sprinkles" data-role="slider">  
              <option value="off">No</option>  
              <option value="on">Yes</option>  
            </select>  
         </div>  
        
         <div data-role="fieldcontain">  
           <label for="store">Collect from Store:</label>  
            <select name="store" id="store">  
              <option value="mainStreet">Main Street</option>  
              <option value="libertyAvenue">Liberty Avenue</option>  
              <option value="circleSquare">Circle Square</option>  
              <option value="angelRoad">Angel Road</option>  
            </select>  
         </div>  
           
        <div class="ui-body ui-body-b">  
          <fieldset class="ui-grid-a">  
            <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>  
            <div class="ui-block-b"><button type="submit" data-theme="a">Order Ice Cream</button></div>      
          </fieldset>  
        </div>  
           
      </div>  
        
    </div>  
        
    </body> 
   </html>

以上代碼效果如圖所示：

責任編輯：佚名來源：呦菜的博客

jQuery Mobile表單