BitGoblin/Bones
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

made tabs work without JavaScript as this was a requirement for our accessibility guidelines.

Browse Source
This commit is contained in:
Brian P. Hogan 2011-11-17 10:14:46 -06:00
parent 2dfa28cea9
commit d10f96bc9b
3 changed files with 23 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
index.html
View File

@ -66,6 +66,25 @@
<p>The easiest way to really get started with Skeleton is to check out the full docs and info at <a href="http://www.getskeleton.com">www.getskeleton.com.</a>. Skeleton is also open-source and has a <a href="https://github.com/dhgamache/skeleton">project on git</a>, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at <a href="mailto:hi@getskeleton.com">hi@getskeleton.com</a>.</p> <p>The easiest way to really get started with Skeleton is to check out the full docs and info at <a href="http://www.getskeleton.com">www.getskeleton.com.</a>. Skeleton is also open-source and has a <a href="https://github.com/dhgamache/skeleton">project on git</a>, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at <a href="mailto:hi@getskeleton.com">hi@getskeleton.com</a>.</p>
</div> </div>
<div class="sixteen columns">
<h3>Support for simple tabs</h3>
<!-- Standard <ul> with class of "tabs" -->
<ul class="tabs">
<li><a class="active" href="#simple">Simple</a></li>
<li><a href="#lightweight">Lightweight</a></li>
<li><a href="#mobileFriendly">Mobile</a></li>
<li><a href="#accessible">Accessible</a></li>
</ul>
<ul class="tabs-content">
<!-- Give ID that matches HREF of above anchors -->
<li class="active" id="simple">The tabs are clean and simple unordered-list markup and basic CSS</li>
<li id="lightweight">The tabs are cross-browser, but don't need a ton of hacky CSS or markup.</li>
<li id="mobileFriendly">The tabs work like a charm even on mobile devices.</li>
<li id="accessible">The content of the tabs is still visible even when JavaScript is disabbled.</li>
</ul>
</div>
</div><!-- container --> </div><!-- container -->

3
javascripts/tabs.js
View File

@ -12,6 +12,9 @@ $(document).ready(function() {
/* Tabs Activiation /* Tabs Activiation
================================================== */ ================================================== */
// Use CSS to hide the tabs
$("ul.tabs-content > li").css("display", "none");
$("ul.tabs-content > li.active").css("display", "block");
var tabs = $('ul.tabs'); var tabs = $('ul.tabs');

1
stylesheets/base.css
View File

@ -254,7 +254,6 @@
border-top-right-radius: 2px; } border-top-right-radius: 2px; }
ul.tabs-content { margin: 0; display: block; } ul.tabs-content { margin: 0; display: block; }
ul.tabs-content > li { display:none; }
ul.tabs-content > li.active { display: block; } ul.tabs-content > li.active { display: block; }
/* Clearfixing tabs for beautiful stacking */ /* Clearfixing tabs for beautiful stacking */