一.Button 組件及 jQuery Mobile 如何豐富組件樣式
在 jQuery Mobile 里，可以通過(guò)給任意鏈接添加 data-role=“button” 來(lái)產(chǎn)生一個(gè) button 組件，jQuery Mobile 會(huì)追加一定的樣式到鏈接，值得注意的是，jQuery Mobile 在給組件元素追加樣式時(shí)不一定只在原有的元素上添加 CSS 和 Javascript 響應(yīng)，一般還會(huì)追加一些新的元素使到組件的樣式更接近于原生的 App 組件樣式。下面給出一個(gè)例子：
這是一個(gè)添加了 data-role=“button” 屬性的鏈接，原 HTML 如下
<a href="#page2" data-role="button">Link button</a>
在瀏覽器上顯示的樣式如下：
這時(shí)用 DOM 查看工具查看實(shí)際得到的 HTML ，可以發(fā)現(xiàn) jQuery Mobile 不僅給原來(lái)的 a 元素添加了 CSS 以豐富按鈕樣式，還另外追加了一些 HTML 使到樣式更加豐富，當(dāng)然這個(gè)部分由 jQuery Mobile 自動(dòng)完成，并不需要開(kāi)發(fā)者操心太多。
注：帶鏈接的按鈕元素和表單中的 button 元素會(huì)被自動(dòng)渲染，無(wú)需另外添加 data-role="button" 屬性。
二.帶圖標(biāo)按鈕
jQuery Mobile 允許開(kāi)發(fā)者通過(guò)在鏈接中添加 data-icon="" 屬性來(lái)為 button 組件添加一個(gè)標(biāo)準(zhǔn)的 Web 圖標(biāo)，并且支持通過(guò) data-iconpos="" 屬性設(shè)置圖標(biāo)相對(duì)于文字的位置（ top, bottom, right ，默認(rèn)為 left ）。
<a href="#page2" data-role="button" data-icon="check">Check</a>
<a href="#page2" data-role="button" data-icon="check" data-iconpos="top">Check</a>
data-icon 屬性的可取值（來(lái)源于 jQuery Mobile 中文手冊(cè)）
.按鈕組
如果你希望把一些按鈕放到一個(gè)容器內(nèi)，構(gòu)建一個(gè)導(dǎo)航之類(lèi)的獨(dú)立部件（按鈕組），可以將按鈕放到一個(gè)容器內(nèi)并給容器設(shè)置 data-role="controlgroup" 屬性，如果希望得到水平式的按鈕組，則添加 data-type="horizontal" 屬性到容器里。
<div data-role="controlgroup"> <a href="#page2" data-role="button">是</a> <a href="#page2" data-role="button">否</a> <a href="#page2" data-role="button">取消</a></div>
四.其他按鈕組件可用屬性
1. data-theme=“” ， 所有的 jQuery Mobile 組件均支持該屬性，用于設(shè)置組件的顏色， 該屬性默認(rèn)有五個(gè)值 a, b, c, d, e，分別代表由深到淺五種顏色，另外開(kāi)發(fā)者還可以通過(guò)在 CSS 里添加相應(yīng)的 Class 來(lái)自定義顏色。
2. data-inline="" ，內(nèi)聯(lián)按鈕，button 組件添加該屬性后會(huì)自動(dòng)改成內(nèi)聯(lián)的形式， jQuery Mobile 會(huì)給鏈接添加 display: inline-block 的 CSS ，讓鏈接按照文字的長(zhǎng)度來(lái)控制自身長(zhǎng)度，并且可以與其他內(nèi)聯(lián)元素共行。
五.按鈕綁定事件
我們以例子來(lái)講，直接上代碼：
<!DOCTYPE html><html><head><link rel="stylesheet" ><script src="http://code.jquery.com/jquery-1.10.2.min.js"></script><script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script></head><body><div data-role="page" id="pageone"> <div data-role="header"> <h1>組合按鈕</h1> </div> <div data-role="content"> <div data-role="controlgroup" data-type="horizontal"> <p>水平組合按鈕:</p> <a href="#" data-role="button" id="btn1">我綁定事件了</a> <a href="#" data-role="button" id="btn2">方法2綁定事件</a> <a href="#" data-role="button" id="btn3">按鈕 3 blur</a> </div><br> <div data-role="controlgroup" data-type="vertical"> <p>垂直組合按鈕 (默認(rèn)):</p> <a href="#" data-role="button">按鈕 1</a> <a href="#" data-role="button">按鈕 2</a> <a href="#" data-role="button">按鈕 3</a> </div> <p>內(nèi)聯(lián)按鈕且不帶圓角:</p> <a href="#" data-role="button" data-inline="true">按鈕 1</a> <a href="#" data-role="button" data-inline="true">按鈕 2</a> <br> <a href="#" data-role="button" data-inline="true" data-corners="false">按鈕 1</a> <a href="#" data-role="button" data-inline="true" data-corners="false">按鈕 2</a> <p>內(nèi)聯(lián)按鈕：普通與迷你</p> <a href="#" data-role="button" data-inline="true">按鈕 1</a> <a href="#" data-role="button" data-inline="true">按鈕 2</a> <br> <a href="#" data-role="button" data-inline="true" data-mini="true">按鈕 1</a> <a href="#" data-role="button" data-inline="true" data-mini="true">按鈕 2</a> <div data-role="footer"> <h1>底部文本</h1> </div></div> <script type="text/javascript"> //先解綁，再綁定 $('#btn1').unbind().bind('click', function() { alert('我綁定事件了'); }); //on直接綁定 $('#btn2').on('click', function() { alert('on直接綁定事件了'); }); //on直接綁定失去焦點(diǎn)的事件 $('#btn3').on('blur', function() { alert('on直接綁定失去焦點(diǎn)的事件了'); });</script></body></html>看看運(yùn)行效果：
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
