O'Reilly logo

Mastering jQuery UI by Vijay Joshi

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

Designing the page

The page we are going to design will consist of a tab widget and markup for a dialog. Initially when the page loads, we will display one tab by default. This tab will serve as the home page of our news reader. The tab will have two HTML controls, a textbox and a button. All other tabs will be generated dynamically. Unlike other tabs, the first tab will be available at all times and users will not be able to remove or close it from the tabs panel. A dialog is required because we will use it to display comments for a particular post.

Writing markup for tabs

To create both the tabs and the dialog, we will follow the markup required by the jQuery UI library. Add the following code to our newly created index.html file:

<html> <head> ...

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