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