Ensure that your cursor is at a location on the page where you want to insert the widget.
Last updated on
Apr 30, 2026
Learn how to add app-like functionality to your Dreamweaver web projects using jQuery UI and mobile widgets. Insert accordions, tabs, sliders, and autocomplete boxes without writing any code.
Widgets are small web applications written in languages such as DHTML and JavaScript that can be inserted and executed within a web page. Among other things, web widgets help provide a way to replicate desktop experiences on a web page.
jQuery UI widgets such as accordion, tabs, datepicker, slider, and autocomplete bring the experience of the desktop to the web.
For example, the Tabs widget can be used to replicate the tab feature of dialog boxes in desktop applications.
Dreamweaver also includes a collection of jQuery mobile widgets you can use to create form elements and other features commonly used in mobile web apps. For example, you can use the jQuery mobile widget to add mobile-friendly form elements, such as text areas and check boxes.
Insert a jQuery widget
When you insert a jQuery widget, the following are automatically added to the code:
- References to all dependent files
- Script tag containing the jQuery API for the widget. Additional widgets are added to the same script tag.
For more information on jQuery widgets, see http://jqueryui.com/demos/
Note
For jQuery effects, external reference to jquery-1.8.24.min.js is not added because this file is automatically included when you add an effect.
Select Insert > jQuery UI, and choose the widget that you want to insert.
If you use the Insert panel, the widgets are present in the jQuery UI section of the Insert panel.
When you select a jQuery widget, its properties are displayed in the Properties panel.
You can preview jQuery widgets in the Live view or in browser that supports jQuery widgets.
Modify jQuery widgets
Select the widget that you want to modify.
In the Properties panel, modify the properties.
For example, to add an extra tab to the Tabs widget, select the widget and click "+" in the Properties panel.
Insert mobile jQuery widgets
Before you can use any of the jQuery mobile widgets, you must first define a jQuery Mobile page by selecting Insert > jQuery Mobile > Page.
The jQuery Mobile Files dialog box opens.
Change the default settings in the jQuery Mobile files dialog box or leave them set to the default paths, and click OK.
In the Page dialog box that opens, type a name in the ID field, and select or deselect the check boxes next to Header and Footer based on whether you want header and footer sections in your mobile page.
In the page that opens in Dreamweaver, replace the Header, Content, and Footer text with the text, images, and other elements you want in your mobile page.
Note
Keep the text short and the images small for displaying on small mobile screens.
Add other jQuery Mobile widgets as required.
Preview the page on a device.
For more information, see Preview Dreamweaver web pages on multiple devices.
Save the jQuery mobile page and all related files.
jQuery mobile themes not applied with newer jQuery versions
Issue
jQuery Mobile themes, including swatches and panels, are not applied when using newer versions of jQuery, such as jQuery 3.7.1. As a result, jquery themes may not render correctly or behave as expected.
Cause
jQuery Mobile has been deprecated and is no longer actively maintained. It does not support jQuery 3.x versions, leading to compatibility issues with newer releases.
Resolution/Workaround
To continue using jQuery Mobile features (themes, swatches, and panels), use a compatible, older version of jQuery.
Recommended version: jQuery 1.11.1 (or other supported 1.x versions)
Example
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
Add a supported jQuery version. For example, 1.11.1.
Ensure that the jQuery Mobile library is loaded after the jQuery script.
Reload the page and verify that themes, swatches, and panels render correctly.
Note
Because jQuery Mobile is deprecated and no longer updated, continue using a compatible legacy jQuery version for existing jQuery Mobile projects.
Build beautiful websites in Dreamweaver
Design, code, and manage dynamic websites in a powerful all-in-one tool.
