解析關于jQuery Mobile學習筆記

作者：佚名 2011-09-01 14:14:00

關于jQuery Mobile學習筆記是本文要介紹的內容，主要是來了解jQuery Mobile中如何來格式化文本，具體內容來看本文詳解。

關于jQuery Mobile學習筆記是本文要介紹的內容，主要是來了解jQuery Mobile中如何來格式化文本，具體內容來看本文詳解。為了使其盡可能的靈活，jQuery Mobile使更多的普通HTML內容更加獨立。加入適當的縮進使內容的可讀性更強。

有兩種布局方法使其格式化變得更簡單：布局表格和可折疊的內容塊布局表格：組織內容以列的形式顯示，有兩列表格，和三列表格可折疊的內容：當點擊內容塊的標題，則會將其隱藏的詳細內容展現出來，下面是一個可折疊內容的實例，單擊標題將看到具體的內容，再點擊標題則會將展現的內容隱藏。

<!DOCTYPE html> 
<html> 
  <head> 
  <title>Collapsible Content Demo</title> 
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> 
  <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
  <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> 
</head> 
<body> 
<div data-role="page" id="home"> 
  <div data-role="header"> 
    <h1>Home</h1> 
  </div> 
  <div data-role="content"> 
    <div data-role="collapsible" data-state="collapsed"> 
      <h3>About this app</h3> 
      <p>This app rocks!</p> 
    </div> 
  </div> 
</div> 
</body> 
</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版的表單元素

<!DOCTYPE html> 
<html> 
  <head> 
  <title>jQuery Mobile Form Demo</title> 
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> 
  <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
  <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></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 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學習筆記的內容介紹完了，希望通過本文的學習能對你有所幫助！

責任編輯：zhaolei 來源：互聯網

jQuery Mobile