Source : http://jqueryui.com/tabs/
Un reset complet des styles pour le widget « tabs » (« onglets ») peut être opéré avec les styles suivants :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
/* .ui-core reset */ .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -webkit-border-radius: 0px; -moz-border-radius: 0px; -o-border-radius: 0px; -ms-border-radius: 0px; border-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-top-left-radius: 0px; -o-border-top-left-radius: 0px; -ms-border-top-left-radius: 0px; border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -moz-border-top-right-radius: 0px; -o-border-top-right-radius: 0px; -ms-border-top-right-radius: 0px; border-top-right-radius: 0px; } .ui-widget-header, .ui-widget-content, .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: none; background: none; font-weight: normal; color: #000; } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited, .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #000; } /* .ui-tabs reset */ .ui-tabs, .ui-tabs .ui-tabs-nav, .ui-tabs .ui-tabs-nav li a, .ui-tabs .ui-tabs-panel { padding: 0; } .ui-tabs .ui-tabs-nav li { margin: 0; } .ui-tabs .ui-tabs-nav li { top: 0; } .ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; } .ui-tabs .ui-tabs-panel { font-size: 1em !important; } /* end: .ui-core + .ui-tabs reset */ |
On oublie pas le petit HTML de base qui va bien :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script type="text/javascript"> jQuery(document).ready(function() { jQuery( "#tabs" ).tabs(); }); </script> <div id="tabs"> <ul> <li><a href="#tabs-1">onglet 01</a></li> <li><a href="#tabs-2">onglet 02</a></li> <li><a href="#tabs-3">onglet 03</a></li> </ul> <div id="tabs-1"> <p>Contenu onglet 01: Lorem ipsum dolor sit amet...</p> </div> <div id="tabs-2"> <p>Contenu onglet 02: Lorem ipsum dolor sit amet...</p> </div> <div id="tabs-3"> <p>Contenu onglet 03: Lorem ipsum dolor sit amet...</p> </div> </div> |