如何在Discord上优雅展示你的音乐品味？3步实现网易云音乐与QQ音乐状态同步
2026/6/17 17:41:00
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>其他常见组件：Tabs（标签页）、Autocomplete（自动完成）、Slider（滑块）等。可在官方 demos 或菜鸟教程中查看更多。如果你需要特定组件的实例或自定义主题，请提供更多细节！