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> ...

Get Mastering jQuery UI now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.