O'Reilly logo

Dreamweaver CC Digital Classroom by AGI Creative Team, Greg Heald, Michael Arguin

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Lesson 15: Adding Interactivity with the jQuery UI Library

dw14.psd 

The average user’s expectations of how a website looks and feels has changed significantly over the years. Highly interactive websites that function more like traditional desktop applications are becoming more the norm. Dreamweaver CC includes jQuery UI Widgets: a library of interactive menus, panels, and animated user interfaces, that can be added to your projects and customized to take your pages to the next level.

What you’ll learn in this lesson:

  • The basics of the jQuery UI Framework
  • Adding a jQuery UI Tabs widget
  • Customizing a jQuery UI widget with CSS
  • Adding a jQuery UI Accordion widget
  • Adding a collapsible panel

Starting up

Before starting, make sure that your tools and panels are consistent by resetting your workspace. See “Resetting the Dreamweaver workspace” in the Starting up section of this book.

You will work with several files from the dw15lessons folder in this lesson. Make sure that you have loaded the dwlessons folder onto your hard drive from www.digitalclassroombooks.com/epub/dreamweavercc. See “Loading lesson files” in the Starting up section of this book.

Before you begin, you need to create site settings that point to the dw15lessons folder. Go to Site > New Site, or, for details on creating a site, refer to Lesson 2, “Setting Up a New Site.”

Introducing the jQuery UI Widgets

Dreamweaver ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required