[ Mini Kiebo ]
Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586
Path:
D:
/
Backup
/
05122024
/
htdocs
/
tracer
/
assets
/
js
/
New folder
/
jQuery-EasyTabs-master
/
examples
/
[
Home
]
File: demo.html
<html> <head> <title>EasyTabs Demo</title> <script src="../vendor/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="../vendor/jquery.hashchange.min.js" type="text/javascript"></script> <script src="../lib/jquery.easytabs.min.js" type="text/javascript"></script> <style> /* Example Styles for Demo */ .etabs { margin: 0; padding: 0; } .tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; } .tab a { font-size: 14px; line-height: 2em; display: block; padding: 0 10px; outline: none; } .tab a:hover { text-decoration: underline; } .tab.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #666; } .tab a.active { font-weight: bold; } .tab-container .panel-container { background: #fff; border: solid #666 1px; padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; } .panel-container { margin-bottom: 10px; } </style> <script type="text/javascript"> $(document).ready( function() { $('#tab-container').easytabs(); }); </script> </head> <body> <h2><a href="http://os.alfajango.com/easytabs">View more demos and docs</a></h2> <div id="tab-container" class='tab-container'> <ul class='etabs'> <li class='tab'><a href="#tabs1-html">HTML Markup</a></li> <li class='tab'><a href="#tabs1-js">Required JS</a></li> <li class='tab'><a href="#tabs1-css">Example CSS</a></li> </ul> <div class='panel-container'> <div id="tabs1-html"> <h2>HTML Markup for these tabs</h2> <pre> <code> <div id="tab-container" class="tab-container"> <ul class='etabs'> <li class='tab'><a href="#tabs1-html">HTML Markup</a></li> <li class='tab'><a href="#tabs1-js">Required JS</a></li> <li class='tab'><a href="#tabs1-css">Example CSS</a></li> </ul> <div id="tabs1-html"> <h2>HTML Markup for these tabs</h2> <!-- content --> </div> <div id="tabs1-js"> <h2>JS for these tabs</h2> <!-- content --> </div> <div id="tabs1-css"> <h2>CSS Styles for these tabs</h2> <!-- content --> </div> </div> </code> </pre> <p>The HTML markup for your tabs and content can be arranged however you want. At the minimum, you need a container, a collection of links for your tabs (an unordered list by default), and matching divs for your tabbed content. Make sure the tab <code>href</code> attributes match the <code>id</code> of the target panel. This is standard semantic markup for in-page anchors.</p> <p>The class names above are just to make it easy to style. You can make them whatever you want, there's no magic here.</p> </div> <div id="tabs1-js"> <h2>JS for these tabs</h2> <pre> <code> <script src="/javascripts/jquery.js" type="text/javascript"></script> <script src="/javascripts/jquery.hashchange.js" type="text/javascript"></script> <script src="/javascripts/jquery.easytabs.js" type="text/javascript"></script> </code> </pre> <p>Optionally include the jquery <a href="http://benalman.com/projects/jquery-hashchange-plugin/">hashchange plugin</a> (recommended) or <a href="http://www.asual.com/jquery/address/docs/">address plugin</a> to enable forward- and back-button functionality.</p> <pre> <code> $('#tab-container').easytabs(); </code> </pre> </div> <div id="tabs1-css"> <h2>CSS Styles for these tabs</h2> <code> <pre> .etabs { margin: 0; padding: 0; } .tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; } .tab a { font-size: 14px; line-height: 2em; display: block; padding: 0 10px; outline: none; } .tab a:hover { text-decoration: underline; } .tab.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #666; } .tab a.active { font-weight: bold; } .tab-container .panel-container { background: #fff; border: solid #666 1px; padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; } </pre> </code> </div> </div> </div> </body> </html>