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>
<meta charset="utf-8">
<title>MyjqReddit</title>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.4.custom.min.css">
<style type="text/css"></style>
</head>
<...
