阅读(3119)
赞(13)
jQuery UI 实例 – 按钮（Button）
2015-09-20 14:11:02 更新
jQuery UI 实例 - 按钮（Button）
jQuery UI使用带有适当的悬停（hover）和激活（active）的样式的可主题化按钮（Button）来加强标准表单元素（比如按钮、输入框、锚）的功能。
在本教程的API文档按钮部件（Button Widget）部分，介绍了更多与button部件相关的细节。
默认功能
可用于按钮的标记实例：一个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" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<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" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<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" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<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" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<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" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<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" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<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>