HTML & CSS Book (English)

Step 12 Creating the Some Poems Page

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.

Creating an interactive user interface element requires JavaScript programming and CSS designing. JavaScript programming is beyond the scope of this book. There are many open sources ready to use JavaScript libraries for the non-programmer Web developers. JQuery (The Write Less, Do More, JavaScript Library) is one of the common JavaScript libraries. JQuery UI (user interface) is a plug-in (an extension library which is built on top of JQuery library) for the JQuery library to create animations, advanced effects, widgets, and interaction mechanism.

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

  • Add the corresponding JavaScript function for the tabs widget to the head section of the page (Picture X.44).

Picture X.44: Adding JavaScript code to the head section for tabs widget.

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

Creating the Some Poems Page

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.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *