ボタン
適切なホバーとアクティブなスタイルを備えたテーマ対応ボタンを使用して、標準のフォーム要素 (ボタン、入力フィールド、アンカーなど) の機能を強化します。
ボタン ウィジェットの詳細については、API ドキュメントのボタン ウィジェットをご覧ください。
デフォルト機能
ボタンのマークアップ インスタンスで使用できます: ボタン要素、submit タイプの入力要素、およびアンカー。
インスタンス
<!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>インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
チェックボックス
ボタンコンポーネントを介してトグルボタンスタイルとしてチェックボックスを表示します。チェックボックスに関連付けられたラベル要素は、ボタンのテキストとして機能します。
この例では、パブリック コンテナーで .buttonset() を呼び出すことによってボタン スタイルとして表示される 3 つのチェック ボックスを示します。
インスタンス
<!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>インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
ラジオ選択
3 つのラジオ ボタンがボタンのセットに変換されます。
インスタンス
<!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>インスタンスを実行する»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
ツールバー
マルチメディアプレーヤーのツールバー。基本的なマークアップを見てください。いくつかのボタン要素、シャッフル ボタンはチェックボックス タイプの入力、リピート オプションはラジオ タイプの 3 つの入力です。
