Sometime back, I had written an article on Load pages in DIV using JQuery.
In this article, we will see how to load multiple pages in the DIV using a Link which rotates and presents a different site to the user on each rotation. This can be a nice UI technique to present a set of pages in your website. I will use the Cycle Plug-in for this purpose. Download the Cycle Plugin.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rotate Links and Load in DIV</title>
<style type='text/css'>
.divPage
{
border:Solid 1px;
width:300px;
height:200px;
}
</style>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js">
</script>
<script type="text/javascript"
src="jquery.cycle.all.min.js" >
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#Links').hide();
$('#A1').click(function() {
$('#Links').show();
$(this).hide();
$('#Links').cycle('fade');
});
$('#Links a').click(function() {
$("#LoadPage").load(this.href);
return false;
});
});
</script>
</head>
<body>
<div id="LoadPage" class="divPage">
<a href="#" id="A1">Start</a>
</div>
<div id="Links">
<a href="link1.htm">Link 1</a>
<a href="link2.htm">Link 2</a>
<a href="link3.htm">Link 3</a>
</div>
</body>
</html>
You can use the Effects Browser page to preview all the effects that are available with the Cycle Plug-in.
That’s it! Load the page and click on the ‘Start’ link to start the Link Rotation. Clicking on each link will display a new page in the DIV.
You can see a Live Demo over here.
Tweet
About The Author
No comments:
Post a Comment