当前位置：首页 > news >正文

jQuery UI 实例

news 2026/9/26 10:05:03

jQuery UI 常见实例演示

jQuery UI 是基于 jQuery 的用户界面交互库，提供丰富的组件（如小部件、交互、特效和主题）。虽然官方版本已进入维护模式（最新为 1.13.x 或 1.14），但仍广泛用于旧项目。官方演示地址：https://jqueryui.com/demos/（可查看源代码、切换主题）。

推荐中文教程资源：

菜鸟教程（Runoob）：https://www.runoob.com/jqueryui/jqueryui-examples.html（包含大量实例和代码）
w3cschool：https://www.w3cschool.cn/jqueryui/

下面列出几个经典实例，包括完整可运行代码（使用 CDN 引入）。你可以复制到 HTML 文件中直接测试。

1.Accordion（折叠面板）

常用于 FAQ 或菜单导航。

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>jQuery UI Accordion 示例</title><linkrel="stylesheet"href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css"><scriptsrc="//code.jquery.com/jquery-3.6.0.min.js"></script><scriptsrc="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script></head><body><divid="accordion"><h3>部分 1</h3><div><p>这是第一个面板的内容。</p></div><h3>部分 2</h3><div><p>这是第二个面板的内容。</p></div><h3>部分 3</h3><div><p>这是第三个面板的内容。</p></div></div><script>$(function(){$("#accordion").accordion();});</script></body></html>

2.Datepicker（日期选择器）

常用于表单日期输入。

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>jQuery UI Datepicker 示例</title><linkrel="stylesheet"href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css"><scriptsrc="//code.jquery.com/jquery-3.6.0.min.js"></script><scriptsrc="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script></head><body><p>选择日期:<inputtype="text"id="datepicker"></p><script>$(function(){$("#datepicker").datepicker({dateFormat:"yy-mm-dd",// 日期格式changeMonth:true,// 可切换月份changeYear:true// 可切换年份});});</script></body></html>

3.Draggable & Droppable（拖拽与放置）

实现拖拽交互，常用于排序或游戏。

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>jQuery UI Draggable & Droppable 示例</title><linkrel="stylesheet"href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css"><scriptsrc="//code.jquery.com/jquery-3.6.0.min.js"></script><scriptsrc="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script><style>#draggable{width:100px;height:100px;padding:0.5em;background:#ccc;}#droppable{width:200px;height:200px;padding:0.5em;border:2px dashed #000;}</style></head><body><divid="draggable"class="ui-widget-content">拖我</div><divid="droppable"class="ui-widget-header">放到这里</div><script>$(function(){$("#draggable").draggable();$("#droppable").droppable({drop:function(){alert("放置成功！");}});});</script></body></html>

4.Dialog（模态对话框）

用于弹出提示或表单。

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>jQuery UI Dialog 示例</title><linkrel="stylesheet"href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css"><scriptsrc="//code.jquery.com/jquery-3.6.0.min.js"></script><scriptsrc="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script></head><body><buttonid="openDialog">打开对话框</button><divid="dialog"title="对话框标题"><p>这是对话框的内容。</p></div><script>$(function(){$("#dialog").dialog({autoOpen:false,modal:true,// 模态buttons:{"确定":function(){$(this).dialog("close");},"取消":function(){$(this).dialog("close");}}});$("#openDialog").click(function(){$("#dialog").dialog("open");});});</script></body></html>