jQuery UI 實例 – 按鈕（Button）
jQuery UI 實例 - 按鈕（Button）
用帶有適當的懸停（hover）和激活（active）的樣式的可主題化按鈕來加強標准表單元素（比如按鈕、輸入框、錨）的功能。
如需了解更多有關 button 部件的細節，請查看 API 文檔 按鈕部件（Button Widget）。
默認功能
可用於按鈕的標記實例：一個 button 元素，一個類型為 submit 的 input 元素和一個錨。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 按鈕（Button） - 默認功能</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
$(function() {
$( "input[type=submit], a, button" )
.button()
.click(function( event ) {
event.preventDefault();
});
});
</script>
</head>
<body>
<button>一個 button 元素</button>
<input type="submit" value="一個提交按鈕">
<a href="#">一個錨</a>
</body>
</html>
復選框
通過 button 部件把復選框顯示為切換按鈕樣式。與復選框相關的 label 元素作為按鈕文本。
本實例通過在一個公共的容器上調用 .buttonset()，演示了三個顯示為按鈕樣式的復選框。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 按鈕（Button） - 復選框</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
$(function() {
$( "#check" ).button();
$( "#format" ).buttonset();
});
</script>
<style>
#format { margin-top: 2em; }
</style>
</head>
<body>
<input type="checkbox" id="check"><label for="check">切換</label>
<div id="format">
<input type="checkbox" id="check1"><label for="check1">B</label>
<input type="checkbox" id="check2"><label for="check2">I</label>
<input type="checkbox" id="check3"><label for="check3">U</label>
</div>
</body>
</html>
圖標
一些帶有文本和圖標的各種組合的按鈕
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 按鈕（Button） - 圖標</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
$(function() {
$( "button:first" ).button({
icons: {
primary: "ui-icon-locked"
},
text: false
}).next().button({
icons: {
primary: "ui-icon-locked"
}
}).next().button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
}
}).next().button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
},
text: false
});
});
</script>
</head>
<body>
<button>只帶有圖標的按鈕</button>
<button>圖標在左側的按鈕</button>
<button>帶有兩個圖標的按鈕</button>
<button>帶有兩個圖標且不帶文本的按鈕</button>
</body>
</html>
單選
三個單選按鈕轉變為一套按鈕。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 按鈕（Button） - 單選</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
$(function() {
$( "#radio" ).buttonset();
});
</script>
</head>
<body>
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio"><label for="radio1">選擇 1</label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">選擇 2</label>
<input type="radio" id="radio3" name="radio"><label for="radio3">選擇 3</label>
</div>
</form>
</body>
</html>
分割按鈕
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 按鈕（Button） - 分割按鈕</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
.ui-menu { position: absolute; width: 100px; }
</style>
<script>
$(function() {
$( "#rerun" )
.button()
.click(function() {
alert( "Running the last action" );
})
.next()
.button({
text: false,
icons: {
primary: "ui-icon-triangle-1-s"
}
})
.click(function() {
var menu = $( this ).parent().next().show().position({
my: "left top",
at: "left bottom",
of: this
});
$( document ).one( "click", function() {
menu.hide();
});
return false;
})
.parent()
.buttonset()
.next()
.hide()
.menu();
});
</script>
</head>
<body>
<div>
<div>
<button id="rerun">運行最後的動作</button>
<button id="select">選擇一個動作</button>
</div>
<ul>
<li><a href="#">打開...</a></li>
<li><a href="#">保存</a></li>
<li><a href="#">刪除</a></li>
</ul>
</div>
</body>
</html>
工具欄
一個多媒體播放器的工具欄。請看基礎的標記：一些 button 元素，Shuffle 按鈕是一個類型為 checkbox 的 input，Repeat 選項是三個類型為 radio 的 input。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 按鈕（Button） - 工具欄</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
#toolbar {
padding: 4px;
display: inline-block;
}
/* support: IE7 */
*+html #toolbar {
display: inline;
}
</style>
<script>
$(function() {
$( "#beginning" ).button({
text: false,
icons: {
primary: "ui-icon-seek-start"
}
});
$( "#rewind" ).button({
text: false,
icons: {
primary: "ui-icon-seek-prev"
}
});
$( "#play" ).button({
text: false,
icons: {
primary: "ui-icon-play"
}
})
.click(function() {
var options;
if ( $( this ).text() === "play" ) {
options = {
label: "pause",
icons: {
primary: "ui-icon-pause"
}
};
} else {
options = {
label: "play",
icons: {
primary: "ui-icon-play"
}
};
}
$( this ).button( "option", options );
});
$( "#stop" ).button({
text: false,
icons: {
primary: "ui-icon-stop"
}
})
.click(function() {
$( "#play" ).button( "option", {
label: "play",
icons: {
primary: "ui-icon-play"
}
});
});
$( "#forward" ).button({
text: false,
icons: {
primary: "ui-icon-seek-next"
}
});
$( "#end" ).button({
text: false,
icons: {
primary: "ui-icon-seek-end"
}
});
$( "#shuffle" ).button();
$( "#repeat" ).buttonset();
});
</script>
</head>
<body>
<div id="toolbar" class="ui-widget-header ui-corner-all">
<button id="beginning">開頭</button>
<button id="rewind">快退</button>
<button id="play">播放</button>
<button id="stop">停止</button>
<button id="forward">快進</button>
<button id="end">結尾</button>
<input type="checkbox" id="shuffle"><label for="shuffle">Shuffle</label>
<span id="repeat">
<input type="radio" id="repeat0" name="repeat" checked="checked"><label for="repeat0">No Repeat</label>
<input type="radio" id="repeat1" name="repeat"><label for="repeat1">Once</label>
<input type="radio" id="repeatall" name="repeat"><label for="repeatall">All</label>
</span>
</div>
</body>
</html>