Load XML Using J query
HTML
This is a very simple code foe every one ,first we can
create Html file as . we needed
Then give any class name or id name .
<!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>
<title>Load
XML With jQuery</title>
<script
src="jquery-1.2.6.js"
type="text/javascript"></script>
<script src="aud_pre.js"
type="text/javascript"></script>
<link
href="styleSheet.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<input id="nxt" type="button"
value="next"/>
<input id="nxt1" type="button"
value="prev"/>
</body>
</html>
CSS
Write down css for every class and id as our design and for
our j query
body
{
color: #3e3935;
font-family:
Helvetica, Arial, Sans-Serif;
font-size: 90%;
line-height:
1.4em;
width: 85%;
margin: 0 auto;
padding-top: 15px;
text-align:
center;
}
p
{
margin: 12px 0;
line-height:
1.4em;
}
h1, dl
{
padding: 0;
text-align: left;
line-height: 1em;
}
.title
{
font-weight: bold;
font-size: 1.25em;
color: #4a887d;
}
.bookImage
{
clear: left;
width: 150px;
}
h1
{
font-size: 2em;
color: #4a887d;
margin-bottom:
1em;
}
dl, dd, dt, img, p
{
margin: 0;
padding: 0;
}
dt
{
clear: left;
width: 150px;
float: left;
height: 1%;
margin-bottom:
20px;
}
dd
{
margin-left:
170px;
margin-bottom:
20px;
height: 1%;
}
dd:after
{
content: ".";
visibility:
hidden;
clear: both;
display: block;
height: 0;
}
.loadingPic
{
margin: auto;
background:
url(loadingIcon.gif) no-repeat 0 0;
padding-left:
25px;
}
.hide{display:none;}
Jquery
This very simple query
easily every one understand look
this code
var lenk=0;
$(document).ready(function()
{
var
nxtvalue=1;
xmlload(1)
$('body').append('<h1> Recommended Web Development
Books </h1>');
$('body').append('<dl />');
$('#nxt').click(function(){
nxtvalue++
if(nxtvalue <lenk ){
xmlload(nxtvalue)
}
});
$('#nxt1').click(function(){
nxtvalue--
if(nxtvalue >0 ){
xmlload(nxtvalue)
}
});
});
function xmlload(no)
{
var
s=1
$.get('myData.xml',
function(d){
len = $(d).find('book').length;
$(d).find('book').each(function(){
lenk++;
if
(s==no)
{
var len = $(d).find('book').length;
var
currentDiv = 0;
var
$book = $(this);
var
title = $book.attr("title");
var
description = $book.find('description').text();
var
imageurl = $book.attr('imageurl');
var
html = '<dt> <img class="bookImage" alt=""
src="' + imageurl + '" /> </dt>';
html
+= '<dd> <span class="loadingPic" alt="Loading"
/>';
html
+= '<p class="title">' + title + '</p>';
html
+= '<p> ' + description + '</p>' ;
html
+= '</dd>';
$('dl').html($(html));
$('.loadingPic').fadeOut(1400);
}
s++;
});
});
}
XML
To create a valid XML Document. This document can then be
passed to
jQuery to create a
typical jQuery object that can be traversed and manipulated.
This is our
simple XML document file :
<?xml version="1.0" encoding="utf-8"
?>
<books>
<book
title="CSS Mastery" imageurl="images/css.jpg" index=0>
<description>
While CSS
is a relatively simple technology to learn, it is a difficult one to master.
When you first start developing sites using CSS, you will come across all kinds
of infuriating browser bugs and inconsistencies.
</description>
</book>
<book
title="Professional ASP.NET" imageurl="images/asp.jpg"
index=1>
<description>
Building
on the revolutionary ASP.NET 2.0 release, ASP.NET 3.5 adds several key new
developer features including AJAX,
LINQ, and a new CSS designer in Visual Web Developer 2008.
</description>
</book>
<book
title="Learning jQuery" imageurl="images/lj.jpg">
<description>
jQuery is a powerful JavaScript library
that can enhance your websites regardless of your background. In this book,
creators of the popular jQuery learning resource,
</description>
</book>
<book
title="Learning jQuery" imageurl="images/asp.jpg"
class="hide">
<description Class="hide">
jQuery is
a powerful JavaScript library that can enhance your websites regardless of your
background. In this book, creators of the popular jQuery learning resource,
</description>
</book>
</books>
No comments:
Post a Comment