确保将光标置于页面中要插入 Widget 的位置。
上次更新日期：
2026年4月30日
了解如何使用 jQuery UI 和移动构件向 Dreamweaver Web 项目添加类似于应用程序的功能。 无需编写任何代码即可插入折叠式元素、选项卡、滑块和自动填写框。
Widget 是以 DHTML 和 JavaScript 等语言编写的小型 Web 应用程序，可以在网页内插入和执行。 此外，Web Widget 帮助提供了一种将桌面体验复制到网页上的方法。
jQuery UI Widget（如手风琴、选项卡、日期选择器、滑块以及自动完成功能）将桌面体验带到 Web 之上。
例如，选项卡 Widget 可用于在桌面应用程序中复制对话框的选项卡功能。
Dreamweaver 还包括一系列可用于创建表单元素的 jQuery 移动构件以及移动 Web 应用程序中常用的其他功能。 例如，您可使用 jQuery 移动小组件添加适用于移动设备的表单元素，如文本区域和复选框。
插入 jQuery Widget
插入 jQuery Widget 时，代码中会自动添加以下内容：
- 对所有相关文件的引用
- 包含用于 Widget 的 jQuery API 的脚本标记。 其他小组件被添加到相同的脚本标签中。
有关 jQuery 小组件的详细信息，请参阅 http://jqueryui.com/demos/
注释
对于 jQuery 效果，不会添加对 jquery-1.8.24.min.js 的外部引用，因为该文件在添加效果时会自动包括进来。
选择“插入”>“jQuery UI”，然后选择要插入的 Widget。
如果使用“插入”面板，Widget 存在于“插入”面板的“jQuery UI”部分中。
在您选择 jQuery Widget 时，其属性显示在“属性”面板中。
您可以在实时视图中或在支持 jQuery Widget 的浏览器中预览 jQuery Widget。
修改 jQuery 小组件
选择要修改的 Widget
在“属性”面板中修改属性。
例如，若要向选项卡 Widget 另外添加一个选项卡，请选择该 Widget，然后单击“属性”面板中的“+”。
插入移动 jQuery 小组件
您必须先通过选择插入 > jQuery Mobile > 页面定义 jQuery Mobile 页面，然后才能使用 jQuery 移动小组件。
“jQuery Mobile 文件”对话框随即打开。
更改“jQuery Mobile 文件”对话框中的默认设置或将这些设置保留为默认路径，然后单击确定。
在打开的“页面”对话框中，在“ID”字段中输入一个名称，然后根据您的移动页面是否需要页眉和脚注部分来选中或取消选中“页眉”和“脚注”旁的复选框。
在 Dreamweaver 中打开的页面中，将“页眉”、“内容”和“脚注”文本替换为移动页面中的文本、图像和所需的其他元素。
注释
如需在尺寸较小的移动设备屏幕上显示，则应使用简短的文本和较小的图像。
根据需要添加其他 jQuery 移动小组件。
在设备上预览页面。
有关更多信息，请参阅在多台设备上预览 Dreamweaver 网页。
保存 jQuery Mobile 页面和所有相关文件。
jQuery Mobile 主题不适用于较新的 jQuery 版本
问题
使用较新版本的 jQuery（如 jQuery 3.7.1）时，不会应用 jQuery Mobile 主题，包括色板和面板。 因此，jQuery 主题可能无法正确渲染或按预期运行。
原因
jQuery Mobile 已弃用，不再积极维护。 它不支持 jQuery 3.x 版本，导致与较新版本存在兼容性问题。
解决方法
要继续使用 jQuery Mobile 功能（主题、色板和面板），请使用兼容的旧版 jQuery。
推荐版本： jQuery 1.11.1（或其他受支持的 1.x 版本）
示例
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
添加受支持的 jQuery 版本。 例如，1.11.1。
确保在 jQuery 脚本之后加载 jQuery Mobile 库。
重新加载页面并验证主题、色板和面板是否正确渲染。
注释
由于 jQuery Mobile 已弃用且不再更新，对于现有的 jQuery Mobile 项目，请继续使用兼容的旧版 jQuery 版本。
