jquery 在web js框架上的風暴還在繼續卻也隨着移動終端走向了mobile；那么jquery mobile到底包括些什么呢
簡介
Button在移動應用中使用頻率較高，而且功能豐富；即可用作ui顯示內容，同時可以指導用戶點擊從而實現各種邏輯的交互；而且在一些比較好的應用里的button不僅有了各種行為和樣式，還將其作為透明層來增強效果和體驗；jquery mobile中button也是一種核心組件，它在其他組件中的到了高頻次的應用；比如前一篇中的Navigation Bar及各種toolbars都是基於button來處理的；只是在jquery mobile中的button卻不僅限於form中的type=button的標簽；比如導航鏈接其實就是一個<a></a>標簽，但是它卻可以擁有和button一樣的外觀和行為；jquey mobile里的button主要包括鏈接按鈕(導航按鈕)，表單元素中的type為submit,reset,button或image的按鈕也都會轉換添加對應樣式；不同的是，在將鏈接轉換為按鈕時必須添加data-role=”button”屬性，而表單元素卻不需要；
鏈接按鈕(Link Button)
將鏈接轉換為按鈕，主要是實現各頁面之間的跳轉或導航，只需要給a標簽添加data-role=”button”就可以了；
<a href="#" data-role="button">Link button</a>
表單按鈕(Form Buttons)
表單元素中的input type為button、reset、submit的按鈕，不需要添加data-role，它們就會自動轉換為button
<input type="button" value="Simple Button" /> <input type="submit" value="Submit Button" /> <input type="reset" value="Reset Button" />
按鈕圖標(Button Icons)
Jquery Mobile框架包含了一組最常用的移動應用程序所需的圖標，為了減少下載的大小，Jquery Mobile包含的是的白色的圖標sprite圖片，並自動在圖標后添加一個半透明的黑圈以確保在任何背景色下圖片都能夠清晰顯示；這個在你使用themeroller創建自己的主題，在導出時會一同下載下來(當然你在線引用的話，也會在線引用那些圖片了)；要給一個按鈕添加圖標，只需要給這個按鈕(不論鏈接還是form按鈕)添加data-icon屬性，目前data-icon支持的屬性值有
data-icon屬性可以被用來創建如下所示的圖標
左箭頭data-icon="arrow-l"
右箭頭data-icon="arrow-r"
上箭頭data-icon="arrow-u"
下箭頭data-icon="arrow-d"
刪除 data-icon="delete"
添加 data-icon="plus"
減少 data-icon="minus"
檢查data-icon="check"
齒輪 data-icon="gear"
前進 data-icon="forward"
后退 data-icon="back"
網格 data-icon="grid"
五角?data-icon="star"
警告 data-icon="alert"
信息 data-icon="info"
首頁 data-icon="home"
搜索 data-icon="search"
<a href="#" data-role="button" data-icon="arrow-l">Back</a> <input type="button" value="Forward" data-icon="arrow-r" /> <input type="submit" value="Delete" data-icon="delete" /> <input type="reset" value="Search" data-icon="search" />
圖標位置(Icon Position)
按鈕默認圖標位置在按鈕的左側，這肯定不是我們想要的；jquery mobile公開了一個data-iconpos屬性用來設置按鈕的圖標相對於按鈕的位置；data-iconpos值主要有5個
左側 data-iconpos=”left”
右側 data-iconpos=”right”
上側 data-iconpos=”top”
下側 data-iconpos=”bottom”
僅顯示圖標 data-iconpos=”notext”
<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">Back</a> <input type="button" value="Forward" data-icon="arrow-r" data-iconpos="right" /> <input type="submit" value="Delete" data-icon="delete" data-iconpos="top" /> <input type="reset" value="Search" data-icon="search" data-iconpos="bottom"/> <a href="#" data-role="button" data-icon="grid" data-iconpos="notext">No Text Button</a>
內聯按鈕(Inline Buttons)
上面你應該會看到我們每添加一個按鈕，它就會自動變成窗口100%寬度，這是因為body里的所有按鈕都會被樣式化為塊級元素，這肯定是不行的；當然你肯定猜到了，有一個屬性來解決這個的，Bingo；它就是data-inline屬性，只要值設置為true，這個對應的按鈕寬度就會根據內容和icon自動調節寬度；這樣我們就可以添加一排的按鈕了；如果需要將多個按鈕在通過一行橫排並且容器自動撐大到與頁面同寬，可以使用 內容分欄 把多個普通的塊級按鈕 放入同一行內，類似table；
<a href="#" data-role="button" data-inline="true" >Cancel</a> <a href="#" data-role="button" data-inline="true" data-theme="a" >Save Your Changes</a>
分組按鈕(Group buttons)
1.有時候在一塊區域內，各個區域都有自己的操作，但是他們樣式統一，效果統一，這時候只需要簡單的將一組按鈕包裹在一個容器里(一般都會選擇div)里，然后給這個容器添加data-role=”controlgroup”屬性，Jquery Mobile就會創建一個垂直的按鈕組，刪除掉按鈕間的margin和陰影，然后只在第一個按鈕和最后一個按鈕產生圓角，使他們看起來是一組按鈕；效果非常棒；
<div data-role="controlgroup"> <a href="#" data-role="button" data-theme="a">Cancel</a> <a href="#" data-role="button" data-theme="a">Save</a> <a href="#" data-role="button" data-theme="a">Leave</a> </div>
2.當然這種按鈕肯定可以讓他們水平排列了；但是這時候只給button添加data-inline並不會起作用
如圖，雖然按鈕會水品排列，但是按鈕分組的效果卻依舊是第一個按鈕左上、右上圓角；最后一個按鈕左下、右下圓角，這中效果不是我們想要的；
要實現水平排列分組的效果，是需要給分組的容器(帶有data-role=”controlgroup”的容器)添加data-type=”horizontal”，當然默認它自然是vertival的，這時候button的data-inline是否設置都ok的了；
<div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-theme="a" data-inline="true">Cancel</a> <a href="#" data-role="button" data-theme="a" data-inline="true">Save</a> <a href="#" data-role="button" data-theme="a" data-inline="true">Leave</a> </div>
3.當然還有一種方式可以創建沒有內容的按鈕組，方法是給分組的容器(帶有data-role=”controlgroup”的容器)添加data-mini="true"屬性；當然你分別給分組按鈕里的按鈕添加data-iconpos=”notext”也是可以的；
<div data-role="controlgroup" data-type="horizontal" data-mini="true"> <a href="#" data-role="button" data-icon="cancel">Cancel</a> <a href="#" data-role="button" data-icon="check">Save</a> <a href="#" data-role="button" data-icon="back">Back</a> </div>
All Code:
View Code
<div id="pageSearch" data-role="page" > <div data-role="header" data-position="fixed"> <a href="../index.htm" data-icon="back">back</a> <h1>Buttons</h1> </div><!-- /header --> <div data-role="content"> <h4>Link Button And Form buttons</h4> <a href="#" data-role="button">Link button</a> <input type="button" value="Simple Button" /> <input type="submit" value="Submit Button" /> <input type="reset" value="Reset Button" /> <br /> <h4>Button Icons</h4> <a href="#" data-role="button" data-icon="arrow-l">Back</a> <input type="button" value="Forward" data-icon="arrow-r" /> <input type="submit" value="Delete" data-icon="delete" /> <input type="reset" value="Search" data-icon="search" /> <br /> <h4>Icon Position</h4> <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">Back</a> <input type="button" value="Forward" data-icon="arrow-r" data-iconpos="right" /> <input type="submit" value="Delete" data-icon="delete" data-iconpos="top" /> <input type="reset" value="Search" data-icon="search" data-iconpos="bottom"/> <a href="#" data-role="button" data-icon="grid" data-iconpos="notext">No Text Button</a> <br /> <h4> Inline buttons</h4> <a href="#" data-role="button" data-inline="true" >Cancel</a> <a href="#" data-role="button" data-inline="true" data-theme="a" >Save Your Changes</a> <br /> <h4>Group buttons</h4> <div data-role="controlgroup"> <a href="#" data-role="button" data-theme="a">Cancel</a> <a href="#" data-role="button" data-theme="a">Save</a> <a href="#" data-role="button" data-theme="a">Leave</a> </div> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-theme="a" data-inline="true">Cancel</a> <a href="#" data-role="button" data-theme="a" data-inline="true">Save</a> <a href="#" data-role="button" data-theme="a" data-inline="true">Leave</a> </div> <div data-role="controlgroup" data-type="horizontal" data-mini="true"> <a href="#" data-role="button" data-theme="a">Cancel</a> <a href="#" data-role="button" data-theme="a">Save</a> <a href="#" data-role="button" data-theme="a">Leave</a> </div> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-icon="cancel">Cancel</a> <a href="#" data-role="button" data-icon="check">Save</a> <a href="#" data-role="button" data-icon="back">Back</a> </div> <div data-role="controlgroup" data-type="horizontal" data-mini="true"> <a href="#" data-role="button" data-icon="cancel">Cancel</a> <a href="#" data-role="button" data-icon="check">Save</a> <a href="#" data-role="button" data-icon="back">Back</a> </div> <div data-role="controlgroup" data-type="horizontal" data-mini="true"> <a href="#" data-role="button" data-icon="cancel" data-iconpos="notext">Cancel</a> <a href="#" data-role="button" data-icon="check" data-iconpos="notext">Save</a> <a href="#" data-role="button" data-icon="back" data-iconpos="notext">Back</a> </div> <br /> </div><!-- /content --> <div data-role="footer" data-position="fixed"> <h4>Easy Hotel</h4> </div><!-- /footer --> </div><!-- /page -->
以上是對button的一般性用法，當然button的用處遠不止這些，在各種組件之間靈活運用就可以了(事實上各種組件也都在用了)；