解析关于jQuery Mobile学习笔记-jquerymobile学习

关于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学习笔记的内容介绍完了，希望通过本文的学习能对你有所帮助！