Step 12 Creating the Some Poems Page
Creating the Some Poems Page Although Gabdulla Tukay died very young (twenty six years old), he left behind unforgettable poems. We are going to share some his poems (My Native Tongue, My Village, Shuraleh, and The Water Maid) in the page with the visitors. Instead of displaying his poems in a continuous text format one after another, we can use an element of a graphical interactive user interface like menus and tables.
- Create a new HTML page with the name SomePoems.html (New –> New File –> HTML).
- We are going to use tabs widget to display the poems in the browser. Open the http://jqueryui.com/tabs/ site and examine the tabs widgets to understand how to use it (Picture X.42).
Picture X.42: Jquery UI tabs widget.
- Add the JQuery, JQuery UI libraries and related CSS files (jquery-ui.css, jquery-1.9.0.js, jquery-ui.js) to use the tabs widget in the header section of the SomePoems.html file (Picture X.43). You can download the files from jQuery UI site (http://jqueryui.com/download/). The current versions of the files can be different in the site.
Picture X.43: Adding jQuery and Jquery UI links to the page.
- Create a div element with the tabs id (<div id=”tabs”>) and add an unordered list (<ul>) of the poems in the tabs div in the content section (Picture X.45).
Picture X.45: Unordered list of the poem names.
Add a separate div element for each poem after the unordered list of the poems. Each div should have an id attribute with the same href attribute in the unordered list (tabs-1, tabs-2, tabs-3, and tabs-4). The page should be like in Picture X.46.
Picture X.46: Adding the poems in separate div elements.
- Save and run the page to see the result (Picture X.47). Display the poems using the tabbed interface.
Picture X.47: Displaying the poems in a tabs widget.
Exercise: jQuery UI Elements
Explore the other interaction, effects, widgets, utilities, and themes in the jQuery UI site. Click the Demos tab and try each element to see what it does and click the view source link to understand how to use it in your projects.
Practice: Accordion Menu
We used tabs control to display the poems. There are some other appealing user interfaces you can use. Remove the tabs widget and use the jQuery UI accordion menu to display the poems (Picture X.48).
Picture X.48: The accordion menu interface.