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

来源：互联网发布：menevit副作用知乎编辑：程序博客网时间：2024/06/04 00:30

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

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

浏览器显示如图：

当点击显示对话框按钮或者点击菜单的弹出对话框时，会弹出对话框，默认开启tooltip，如果点击菜单项禁用提示时，会禁用tooltip，菜单项文本变为启用提示。

1 0