This is used for attractive ui representation on webpages. This provides different container for putting data. Using this we can show different category of data on same page.
Situation
We want to display different category of articals on same page. But at a time user can view sigle.
Solution
- First identify source (html tag)
- Use following jqueries for implementing this task
- use jquery http://www.programmingduniya.com/common/jquery/jquery.min.js
- use jquery http://www.programmingduniya.com/common/accordion/jquery-ui.min172.js
- use jquery http://www.programmingduniya.com/common/accordion/jquery.min152.js
- use jquery http://www.programmingduniya.com/common/accordion/jquery-ui.min1821.js
- use css http://www.programmingduniya.com/common/accordion/jquery-ui.css
Steps
First we need a div which can hold all data we gave id tabs.
Ex.
<div id="tabs"></div>
Inside this div we create new menu
Ex.
<div id="tabs">
<li><a href="#tabs-1">C-LANGUAGE</a></li>
<li><a href="#tabs-2">JQUERY</a>/</li>
<li><a href="#tabs-3">HTML</a></li>
</div>
then we create different panels for different content and assigned new id to eachdivision.
Ex.
<div id="tabs">
<li><a href="#tabs-1">C-LANGUAGE</a></li>
<li><a href="#tabs-2">JQUERY</a>/</li>
<li><a href="#tabs-3">HTML</a></li>
<div id="tabs-1">
<p>c is a basic programming language<p>
</div>
<div id="tabs-2">
<p>Jquery based on javascript.<p>
</div>
<div id="tabs-3">
<p>Programming duniya is a new way to learn programming<p>
</div>
</div>
Detailed programme
<html>
<head>
<link rel="stylesheet"
type="text/css"
href="http://www.programmingduniya.com/common/jquery/jquery-ui.css" />
<script
type="text/javascript"
src="http://www.programmingduniya.com/common/jquery/jquery.min.js">
</script>
<script
type="text/javascript"
src="http://www.programmingduniya.com/common/jquery/jquery-ui.min.js">
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">C-LANGUAGE</a></li>
<li><a href="#tabs-2">JQUERY</a></li>
<li><a href="#tabs-3">HTML</a></li>
</ul>
<div id="tabs-1">
<p>c is a basic programming language</p>
</div>
<div id="tabs-2"><p>Jquery based on javascript.</p>
</div>
<div id="tabs-3">
<p>Programming duniya is a new way to learn programming</p>
</div>
</div>
<script type="text/javascript">
$(function() {
$("#tabs" ).tabs();
});
</script>
</body>
</html>
No comments:
Post a Comment