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

解析關于jQuery Mobile學習筆記

作者：佚名
移動開發(fā)
關于jQuery Mobile學習筆記是本文要介紹的內(nèi)容，主要是來了解jQuery Mobile中如何來格式化文本，具體內(nèi)容來看本文詳解。

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

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

  1. <!DOCTYPE html> 
  2. <html> 
  3.   <head> 
  4.   <title>Collapsible Content Demo</title> 
  5.   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> 
  6.   <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
  7.   <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> 
  8. </head> 
  9. <body> 
  10. <div data-role="page" id="home"> 
  11.   <div data-role="header"> 
  12.     <h1>Home</h1> 
  13.   </div> 
  14.   <div data-role="content"> 
  15.     <div data-role="collapsible" data-state="collapsed"> 
  16.       <h3>About this app</h3> 
  17.       <p>This app rocks!</p> 
  18.     </div> 
  19.   </div> 
  20. </div> 
  21. </body> 
  22. </html> 

觸摸選擇的表單元素

jQuery Mobile會自動替換標準的HTML表單元素，例如文本框，復選框，列表框。以這種自定義的樣式工作在觸摸設備上的表單元素，易用性更強。

例如，復選框?qū)兊煤艽螅子邳c選。點擊下拉列表時，將會彈出一組大按鈕列表選項，提供給用戶選擇。

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

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

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

下面是一個jQuery Mobile版的表單元素

  1. <!DOCTYPE html> 
  2. <html> 
  3.   <head> 
  4.   <title>jQuery Mobile Form Demo</title> 
  5.   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> 
  6.   <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
  7.   <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> 
  8. </head> 
  9. <body> 
  10. <div data-role="page" id="home"> 
  11.   <div data-role="header"> 
  12.     <h1>Ice Cream Order Form</h1> 
  13.   </div> 
  14.   <div data-role="content"> 
  15.     <form action="#" method="get"> 
  16.      <div data-role="fieldcontain"> 
  17.        <label for="name">Your Name:</label> 
  18.        <input type="text" name="name" id="name" value=""  /> 
  19.      </div> 
  20.      <div data-role="controlgroup"> 
  21.        <legend>Which flavour(s) would you like?</legend> 
  22.        <input type="checkbox" name="vanilla" id="vanilla" class="custom" /> 
  23.        <label for="vanilla">Vanilla</label> 
  24.        <input type="checkbox" name="chocolate" id="chocolate" class="custom" /> 
  25.        <label for="chocolate">Chocolate</label> 
  26.        <input type="checkbox" name="strawberry" id="strawberry" class="custom" /> 
  27.        <label for="strawberry">Strawberry</label> 
  28.      </div>     
  29.      <div data-role="fieldcontain"> 
  30.        <label for="quantity">Number of Cones:</label> 
  31.        <input type="range" name="quantity" id="quantity" value="1" min="1" max="10"  /> 
  32.      </div> 
  33.      <div data-role="fieldcontain"> 
  34.        <label for="sprinkles">Sprinkles:</label> 
  35.         <select name="sprinkles" id="sprinkles" data-role="slider"> 
  36.           <option value="off">No</option> 
  37.           <option value="on">Yes</option> 
  38.         </select> 
  39.      </div> 
  40.      <div data-role="fieldcontain"> 
  41.        <label for="store">Collect from Store:</label> 
  42.        <select name="store" id="store"> 
  43.           <option value="mainStreet">Main Street</option> 
  44.           <option value="libertyAvenue">Liberty Avenue</option> 
  45.           <option value="circleSquare">Circle Square</option> 
  46.           <option value="angelRoad">Angel Road</option> 
  47.         </select> 
  48.      </div> 
  49.     <div class="ui-body ui-body-b"> 
  50.       <fieldset class="ui-grid-a"> 
  51.         <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div> 
  52.        <div class="ui-block-b"><button type="submit" data-theme="a">Order Ice Cream</button></div>      
  53.       </fieldset> 
  54.     </div> 
  55.   </div> 
  56. </div> 
  57. </body> 
  58. </html> 

小結(jié)：解析關于jQuery Mobile學習筆記的內(nèi)容介紹完了，希望通過本文的學習能對你有所幫助！

責任編輯：zhaolei 來源： 互聯(lián)網(wǎng)
jQuery Mobile
相關推薦

2011-09-01 14:55:41

jQuery Mobi列表視圖

2011-09-06 16:16:48

jQuery Mobi

2011-09-05 16:47:49

jQuery Mobi

2011-09-02 10:41:51

2011-09-01 15:00:48

jQuery MobiDemo

2011-09-05 16:43:00

jQuery Mobi

2011-08-29 10:01:27

QTWebkit插件

2011-09-01 10:16:43

JQuery Mobi

2011-08-23 17:33:08

LuaMetatable

2011-09-01 10:27:42

jQuery Mobi

2012-03-08 11:23:09

jQuery Mobi

2011-09-02 10:59:10

jQuery Mobi

2011-08-23 13:15:37

LUAPackage

2012-11-15 10:18:51

IBMdw

2011-07-19 14:51:54

jQuery Mobi特性

2010-06-12 13:08:51

UML全稱

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元素
點贊
收藏

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