辛苦堆砌,转载请注明出处,谢谢!
本文给出jQuery UI对话框,菜单,tooltip以及spinner的示例。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="jquery-ui.structure.css"/>
<link rel="stylesheet" type="text/css" href="jquery-ui.theme.css"/>
<style>
#dialog input {margin: 5px}
#dialogContent {
hidden: true
}
#showDialogBtn {
margin-top: 10px
}
.ui-menu {width: 150px}
</style>
<script src="jquery-3.1.1.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#dialog").dialog({
autoOpen: false,
modal: true,
width: 350,
buttons: [
{
text: "确定",
click: function() {
$("#dialogContent").show();
$("#nameContent").text("姓名: " + $("#name").val());
$("#ageContent").text("年龄: " + $("#age").val());
$(this).dialog("close");
}
},
{
text: "取消",
click: function() {
$(this).dialog("close");
}
}
]
});
$("#age").spinner();
$("#name").tooltip();
$("#age").tooltip();
$("#showDialogBtn").button().click(function() {
$("#dialog").dialog("open");
});
$("#menu").menu({
select: function(e, ui) {
var menuText = ui.item.find("div").text();
if (menuText == "弹出对话框") {
$("#dialog").dialog("open");
} else if (menuText == "禁用提示") {
$("#name").tooltip("disable");
$("#age").tooltip("disable");
ui.item.find("div").text("启用提示")
} else if (menuText == "启用提示") {
$("#name").tooltip("enable");
$("#age").tooltip("enable");
ui.item.find("div").text("禁用提示")
}
}
});
});
</script
</head>
<body>
<h2>对话框</h2>
<div id="dialog" title="信息">
<div>
<label for="name">姓名:</label>
<input id="name" name="name" title="请输入姓名"/>
</div>
<div>
<label for="age">年龄:</label>
<input id="age" name="age" value="20" title="请输入年龄"/>
</div>
</div>
<div id="dialogContent">
<div>
<label id="nameContent"/>
</div>
<div>
<label id="ageContent"/>
</div>
</div>
<button id="showDialogBtn">显示对话框</button>
<h2>菜单</h2>
<ul id="menu">
<li><div>弹出对话框</div></li>
<li>-</li>
<li><div>禁用提示</div></li>
<li>-</li>
<li>
<div>子菜单</div>
<ul>
<li><div>子菜单项1</div></li>
<li><div>子菜单项2</div></li>
</ul>
</li>
</ul>
</body>
</html>
浏览器显示如图: