HTML Code for menu
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" type="text/javascript"></script>
<style type="text/css">
ul
{
list-style:none;
}
.section-header
{
font-weight: bold;
cursor: pointer;
background-color: Gray;
padding: 3px;
}
#menu-container
{
width: 200px;
}
li.book
{
background: url(img/book.png) no-repeat center left;
padding-left: 20px;
margin-top: 4px;
}
li.no-access
{
font-style:italic;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
$(document).ready(function () {
$(".section-header", "#menu-container").live("click", function (e) {
$(this).next("ul.section-items").slideToggle("slow");
});
$.ajax({
type: "GET",
dataType: "json",
cache: false,
contentType: "application/json;charset=utf-8",
url: 'handler.ashx',
data: { grouping: 'HasAccess' },
success: function (data) {
$("#tmpl-menu-items").tmpl(data).appendTo("#menu-container");
}
});
});
</script>
<script id="tmpl-menu-items" type="text/x-jquery-tmpl">
{{tmpl "#tmpl-section-header"}}
<ul class="section-items">
{{tmpl(Books) "#tmpl-section-item"}}
</ul>
</script>
<%--renders the header of each section--%>
<script id="tmpl-section-header" type="text/x-jquery-tmpl">
<p class="section-header">
${SectionName}
</p>
</script>
<%--renders each item in the section--%>
<script id="tmpl-section-item" type="text/x-jquery-tmpl">
<li class="book{{if HasAccess == false}} no-access{{/if}}">${Title}</li>
</script>
<div id="menu-container">
</div>
</form>
</body>
</html>
This is an HTML file with embedded JavaScript and jQuery code. It creates a menu of books with a header for each section and items for each book. The data for the menu items is fetched from a server-side handler using an AJAX call. Here is how the code works:
The first few lines are HTML and XML declarations.
The head section contains some meta information and references to external JavaScript libraries and CSS stylesheets.
The body section contains a form with an empty container for the menu items.
Inside the body section, there are several script tags with type attributes set to „text/javascript” or „text/x-jquery-tmpl”.
The first script tag contains the jQuery code that registers a click event handler on the headers of each section. When a header is clicked, the script toggles the display of the items in that section.
The second script tag makes an AJAX call to a server-side handler (probably written in ASP.NET) to fetch the data for the menu items. The handler is expected to return a JSON object with properties for each section, where each property contains an array of book objects with properties like Title and HasAccess.
When the AJAX call is successful, the script uses the jQuery templates plugin to render the menu items based on the JSON data. The templates are defined in the third and fourth script tags.
The third script tag defines a template for the header of each section. It expects a SectionName property in the data object.
The fourth script tag defines a template for each item in a section. It expects a Books property in the data object, which is an array of book objects. For each book, the template renders a list item with the Title property as its text content and the HasAccess property to determine whether to apply a „no-access” CSS class.
Overall, this code demonstrates the use of jQuery and AJAX to create dynamic HTML content from JSON data.
Other example you can find on next page.