1783280891 by Unknown

Author:Unknown
Language: rus
Format: mobi, epub
Published: 2014-02-18T08:53:57+00:00

Chapter 6

4. Add the following jQuery code to recipe-5.js, which will populate the ordered list based on the headed sections in the HTML page we have just created:

$(function(){

var _contents = $('.content-frame .left');

var _headers = _contents.find("h1, h2, h3, h4");

_headers.each(function(index, value){

var _header = $(value);

var level = parseInt(_header.context.localName.

replace("h", ""));

if (typeof _header.attr("id") != "undefined") {

var listItem = $("<li><a href='#" + _header.attr("id")

+ "'>" + _header.html() + "</a></li>");

} else {

var listItem = $("<li>" + _header.html() + "</li>");

}

listItem.css("padding-left", (level * 5));

$('.contents').append($(listItem));

});

});

5. Opening recipe-5.html in a web page will present you with the content to the left-hand side of the screen and the dynamically-generated contents list to the right-hand side as shown in the following screenshot:

How it works…

The HTML code provides a content pane with various sections headed by h1, h2, h3, and h4

tags and an empty ordered list element.

213

User Interface

Our jQuery code first selects the content section and then finds all of the header elements inside it using the jQuery find() function and specifying h1, h2, h3, h4 as the only argument. This will create an array of the found elements and store them in the _headers array as shown in the following code snippet:

$(function(){

var _contents = $('.content-frame .left');

var _headers = _contents.find("h1, h2, h3, h4");

// --- HIDDEN CODE

});

Using the jQuery each() function, it is then possible to iterate through all of the found header elements and construct the table of contents. The local variable _header is first declared and the current header element is stored in this variable.

To be able to indent subsections in the table of contents, making it easier for the user to see the content structure, the code needs to determine what level the current header is at: h1

being the top level and h5 being the bottom. Using _header.context.localName, we can get the tag of the header element (for example, h1) and remove the "h" with the JavaScript replace(). Then, we can convert the remaining value to an integer using parseInt(). We are left with a value we can use to determine the level of the header element. This process is shown in the following code snippet:

$(function(){

var _contents = $('.content-frame .left');

var _headers = _contents.find("h1, h2, h3, h4");

_headers.each(function(index, value){

var _header = $(value);

var level = parseInt(_header.context.localName.replace("h",

""));

// --- HIDDEN CODE

});

});

Now we can create the list element, which we will insert into the ordered list. In order to link the items in the table of contents to the appropriate section of content, we need to check to see whether or not the header element has an ID that we can link to. If it does, we create a list element with a link; otherwise, we create a basic list element by executing the following code: $(function(){

var _contents = $('.content-frame .left');

var _headers = _contents.find("h1, h2, h3, h4");

_headers.each(function(index, value){

var _header = $(value);

var level = parseInt(_header.context.localName.replace("h",

""));

214

Chapter 6

if (typeof _header.attr("id") != "undefined") {

var listItem = $("<li><a href='#" + _header.attr("id") +

"'>" + _header.html() + "</a></li>");

} else {

var listItem = $("<li>" + _header.html() + "</li>");

}

listItem.css("padding-left", (level * 5));

$('.contents').append($(listItem));

});

});

Finally, once the list item has been created, the css() function and the level variable are used

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.