beautypg.com

Insert a jquery widget, Modifying jquery widgets, Using jquery effects in dreamweaver – Adobe Dreamweaver CC 2015 User Manual

Page 189: Add jquery effects

background image

182

Layout and design

Last updated 6/3/2015

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.

Tutorial

How to author HTML, CSS, jQuery, and PHP 5.4

(15 min)

Learn how the latest support for HTML5, CSS3, jQuery and PHP5.4 in Dreamweaver can help you author static,
dynamic, mobile or responsive projects.

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.

1

Ensure that your cursor is at a location on the page where you want to insert the widget.

2

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.

Modifying jQuery widgets

1

Select the widget that you want to modify.

2

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.

More Help topics

Using jQuery widgets in web pages in Dreamweaver

Using jQuery effects in Dreamweaver

Spry effects are replaced with jQuery effects in Dreamweaver CC. While you can still modify existing spry effects on
your page, you cannot add new spry effects.

Add jQuery effects

1

In the Design or Code view of your Dreamweaver document, select the element to which you want to apply a jQuery
effect.

2

Select Windows > Behaviors to open the Behaviors panel.