jQuery学习笔记(七) jQuery UI对话框，菜单，tooltip以及spinner

最新推荐文章于 2023-07-31 10:00:35 发布

有理叔

最新推荐文章于 2023-07-31 10:00:35 发布

阅读量674

点赞数 1

分类专栏： Web前端文章标签： jquery ui

本文链接：https://blog.csdn.net/yjp19871013/article/details/54599090

版权

Web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

辛苦堆砌，转载请注明出处，谢谢！

本文给出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>

浏览器显示如图：