The Jquery Tabs example code is shown below,Each Tab is displayed with minimum height of 400px.
Logout tab is displayed in right side.For Logout tab,InLine CSS (style="float:right") is used for displaying in right side.When user clicks on Logout tab the page will be redirected to logout.jsp, if logout.jsp html page is available
View Demo in JSFiddle ,
copy and paste this url in your browser http://jsfiddle.net/6uqM8/
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Home Page - Library Management</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#tabs" ).tabs();
$("#tabs").css({backgroundColor:'#ffe4e1'});
$("#tabs").css("min-height", "400px");
});
</script>
</head>
<body>
<div id="tabs" class="tabs" >
<ul style="color: black;background-color: #b85c5c">
<li ><a href="#tabs-1" style="color: #b85c5c;background-color:#ffe4e1;" >Home</a></li>
<li ><a href="#tabs-2" style="color: #b85c5c;background-color:#ffe4e1">Create Book</a></li>
<li style="float:right"><a onClick="location.href='logout.jsp'" style="color: #b85c5c;background-color:#ffe4e1">Log Out</a></li>
</ul>
<div id="tabs-1">
<p id="intro">
Welcome to my Home Page of Library Management Application! This Provides effective solutions needed for a Library.Click any tab to load content from other pages.
</p>
</div>
<div id="tabs-2">
<p >
This is the Second Tab Contents
</p>
</div>
</div>
</body>
</html>
View Demo in JSFiddle ,
copy and paste this url in your browser http://jsfiddle.net/6uqM8/
Logout tab is displayed in right side.For Logout tab,InLine CSS (style="float:right") is used for displaying in right side.When user clicks on Logout tab the page will be redirected to logout.jsp, if logout.jsp html page is available
View Demo in JSFiddle ,
copy and paste this url in your browser http://jsfiddle.net/6uqM8/
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Home Page - Library Management</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#tabs" ).tabs();
$("#tabs").css({backgroundColor:'#ffe4e1'});
$("#tabs").css("min-height", "400px");
});
</script>
</head>
<body>
<div id="tabs" class="tabs" >
<ul style="color: black;background-color: #b85c5c">
<li ><a href="#tabs-1" style="color: #b85c5c;background-color:#ffe4e1;" >Home</a></li>
<li ><a href="#tabs-2" style="color: #b85c5c;background-color:#ffe4e1">Create Book</a></li>
<li style="float:right"><a onClick="location.href='logout.jsp'" style="color: #b85c5c;background-color:#ffe4e1">Log Out</a></li>
</ul>
<div id="tabs-1">
<p id="intro">
Welcome to my Home Page of Library Management Application! This Provides effective solutions needed for a Library.Click any tab to load content from other pages.
</p>
</div>
<div id="tabs-2">
<p >
This is the Second Tab Contents
</p>
</div>
</div>
</body>
</html>
View Demo in JSFiddle ,
copy and paste this url in your browser http://jsfiddle.net/6uqM8/
Thank you so much, this example was really helpful.
ReplyDeleteC'est vraiment génial, merci beaucoup
ReplyDeletehtml css code examples
ReplyDeleteweb desing examples - Image tag to be loaded by the element