Created
December 31, 2010 11:46
-
-
Save shapeshifta78/760952 to your computer and use it in GitHub Desktop.
Simple jQuery tabs
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
| <title>jquery Tabs</title> | |
| <style type="text/css"> | |
| body {margin:0;padding:0;font: bold 11px/1.5em Verdana;background:#666; color:#fff} | |
| h2 {font: bold 14px Verdana, Arial, Helvetica, sans-serif;color: #fff;margin:20px 0 0 0;padding: 0 0 0 15px} | |
| img {border: none} | |
| a img {border:0} | |
| a, a:visited {color: #7BAEDB} | |
| a:hover {text-decoration:none} | |
| p {font-weight:normal;margin:15px} | |
| /* Buttons-------------------------------*/ | |
| .awesome, .awesome:visited {background: #7DAFDB;display: inline-block; padding: 5px 10px 6px; color: #fff; text-decoration: none;-moz-border-radius: 5px; -webkit-border-radius: 5px;-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);text-shadow: 0 -1px 1px rgba(0,0,0,0.25);border-bottom: 1px solid rgba(0,0,0,0.25);position: relative;cursor: pointer;font-size:12px} | |
| .awesome:hover{background: #87B7FF} | |
| .awesome:active{top: 1px} | |
| /*- Tabs--------------------------- */ | |
| .sprite{background:url(quick_sprite.png) no-repeat} | |
| #tabs {height:22px;font-size:93%;line-height:normal;margin:0;padding:10px 10px 0 28px;list-style:none} | |
| #tabs li {display:inline;margin:0;padding:0} | |
| #tabs a {float:left;background-position: left top;margin:0;padding:0 0 0 4px;text-decoration:none} | |
| #tabs span {float:left;display:block;background-position: right -84px;padding:5px 15px 4px 6px;color:#FFF} | |
| #tabs a:hover span {color:#FFF} | |
| #tabs a:hover, #tabs .active {background-position:0 -42px;} | |
| #tabs a:hover span, #tabs .active span {background-position:right -126px} | |
| .tabContent {color:#fff;border:1px solid #fff; margin:0 10px 0 25px;width:600px;padding:10px} | |
| </style> | |
| </head><body> | |
| <h2>High Performance Tabs <small>by Tom</small> | <a href="#addMore" id="addMore" class="awesome">Mehr Tabs (experimentell)</a></h2> | |
| <p>Verbesserungshinweise gerne willkommen. :) Version mit Deeplinking <a href="http://dl.dropbox.com/u/2694258/tabs/tabs_deeplinking.html">hier</a>.</p> | |
| <ul id="tabs"> | |
| <li><a href="#link1" title="Link 1" class="sprite"><span class="sprite">Link 1</span></a></li> | |
| <li><a href="#link2" title="Link 2" class="sprite"><span class="sprite">Link 2</span></a></li> | |
| <li><a href="#link3" title="Link 3" class="sprite"><span class="sprite">Link 3</span></a></li> | |
| </ul> | |
| <div class="tabContent" id="link1"><h4>bla bla 1</h4><img src="http://4gifs.com/gallery/d/124178-1/Guinea_pigs_nomrace.gif" alt="Schweinchen" width="324" height="244"/></div> | |
| <div class="tabContent" id="link2"><h4>bla bla 2</h4><img src="http://farm4.static.flickr.com/3272/2682867554_aa3dbfc5b8.jpg?v=0" alt="Hörnchen" width="500" height="333"/></div> | |
| <div class="tabContent" id="link3"><h4>bla bla 3</h4><img src="http://img515.imageshack.us/img515/5271/19368.jpg" alt="Timon und Pumba" width="500" height="357"/></div> | |
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| //<![CDATA[ | |
| $(document).ready(function() { | |
| var tl = $("#tabs li a"); | |
| $(tl[0]).addClass("active"); | |
| var tc = $(".tabContent"); | |
| tc.hide(); | |
| $(tc[0]).show(); | |
| $("#tabs").delegate("li", "click", function(evt) { | |
| //nur nötig, wenn neue Tabs hinzugefügt werden sollen, sonst tl.removeClass("active") verwenden | |
| $("#tabs li a").removeClass("active"); | |
| $(this).find("a").addClass("active"); | |
| //nur nötig, wenn neue Tabs hinzugefügt werden sollen, sonst tc.hide() verwenden | |
| $(".tabContent").hide(); | |
| var activeTab = $(this).find("a").attr("href"); | |
| $(activeTab).show(); | |
| evt.preventDefault(); | |
| }); | |
| //nur ein kleiner Test für event delegation :D, sonst nicht nötig | |
| $("#addMore").click(function(evt){ | |
| var count = $("#tabs li a").length+1; | |
| $newTab = '<li><a href="#link' + count + '" title="Link ' + count + '" class="sprite"><span class="sprite">Link ' + count + '<\/span><\/a><\/li>' | |
| $newContent = '<div class="tabContent" id="link' + count + '" style="display:none"><h4>bla bla ' + count + '<\/h4>Dies ist ein neuer Tab, der genau wie alle anderen funktioniert<\/div>' | |
| $("#tabs").append($newTab); | |
| $(".tabContent").last().after($newContent); | |
| evt.preventDefault(); | |
| }); | |
| }); | |
| //]]> | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
| <title>jquery Tabs</title> | |
| <style type="text/css"> | |
| body {margin:0;padding:0;font: bold 11px/1.5em Verdana;background:#666; color:#fff} | |
| h2 {font: bold 14px Verdana, Arial, Helvetica, sans-serif;color: #fff;margin:20px 0 0 0;padding: 0 0 0 15px} | |
| img {border: none} | |
| a img {border:0} | |
| a, a:visited {color: #7BAEDB} | |
| a:hover {text-decoration:none} | |
| p {font-weight:normal;margin:15px} | |
| /* Buttons-------------------------------*/ | |
| .awesome, .awesome:visited {background: #7DAFDB;display: inline-block; padding: 5px 10px 6px; color: #fff; text-decoration: none;-moz-border-radius: 5px; -webkit-border-radius: 5px;-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);text-shadow: 0 -1px 1px rgba(0,0,0,0.25);border-bottom: 1px solid rgba(0,0,0,0.25);position: relative;cursor: pointer;font-size:12px} | |
| .awesome:hover{background: #87B7FF} | |
| .awesome:active{top: 1px} | |
| /*- Tabs--------------------------- */ | |
| .sprite{background:url(quick_sprite.png) no-repeat} | |
| #tabs {height:22px;font-size:93%;line-height:normal;margin:0;padding:10px 10px 0 28px;list-style:none} | |
| #tabs li {display:inline;margin:0;padding:0} | |
| #tabs a {float:left;background-position: left top;margin:0;padding:0 0 0 4px;text-decoration:none} | |
| #tabs span {float:left;display:block;background-position: right -84px;padding:5px 15px 4px 6px;color:#FFF} | |
| #tabs a:hover span {color:#FFF} | |
| #tabs a:hover, #tabs .active {background-position:0 -42px;} | |
| #tabs a:hover span, #tabs .active span {background-position:right -126px} | |
| .tabContent {color:#fff;border:1px solid #fff; margin:0 10px 0 25px;width:600px;padding:10px} | |
| </style> | |
| </head><body> | |
| <h2>High Performance Tabs <small>by Tom</small> | <a href="#addMore" id="addMore" class="awesome">Mehr Tabs (experimentell)</a></h2> | |
| <p>Verbesserungshinweise gerne willkommen. Deeplinking geht natürlich nur mit vorhandenen Tabs ;)</p><p id="info">Info: Historyfeature <strong>nicht</strong> unterstützt! (Vor- und Zurückbutton)</p> | |
| <ul id="tabs"> | |
| <li><a href="#link1" title="Link 1" class="sprite"><span class="sprite">Link 1</span></a></li> | |
| <li><a href="#link2" title="Link 2" class="sprite"><span class="sprite">Link 2</span></a></li> | |
| <li><a href="#link3" title="Link 3" class="sprite"><span class="sprite">Link 3</span></a></li> | |
| </ul> | |
| <div class="tabContent" id="link1"><h4>bla bla 1</h4><img src="http://4gifs.com/gallery/d/124178-1/Guinea_pigs_nomrace.gif" alt="Schweinchen" width="324" height="244"/></div> | |
| <div class="tabContent" id="link2"><h4>bla bla 2</h4><img src="http://farm4.static.flickr.com/3272/2682867554_aa3dbfc5b8.jpg?v=0" alt="Hörnchen" width="500" height="333"/></div> | |
| <div class="tabContent" id="link3"><h4>bla bla 3</h4><img src="http://img515.imageshack.us/img515/5271/19368.jpg" alt="Timon und Pumba" width="500" height="357"/></div> | |
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| //<![CDATA[ | |
| $(document).ready(function() { | |
| //check for deeplink | |
| var deepLink = window.location.hash; | |
| //cache all tab nodes, hide tabcontent | |
| var tl = $("#tabs li a"); | |
| var tc = $(".tabContent"); | |
| tc.hide(); | |
| //set active Tab and content | |
| if (deepLink){ | |
| $(tl + '[href$="'+ deepLink +'"]').addClass("active"); | |
| }else{ | |
| $(tl[0]).addClass("active"); | |
| //set hash, because it's undefined at the moment | |
| window.location.hash = $(tl[0]).attr("href"); | |
| } | |
| $(deepLink || tc[0]).show(); | |
| //check if hash changes on back and forward button click | |
| if ("onhashchange" in window) { | |
| //historyfeature only supported for modern browsers | |
| //use http://benalman.com/projects/jquery-hashchange-plugin/ if really needed for everyone | |
| $("#info").html("Info: Historyfeature unterstützt! (Vor- und Zurückbutton)"); | |
| } | |
| function locationHashChanged() { | |
| //only needed for additional tabs, use tl.removeClass("active") instead if you don't need this | |
| $("#tabs li a").removeClass("active"); | |
| //only needed for additional tabs, use tc.hide() instead if you don't need this | |
| $(".tabContent").hide(); | |
| $(tl + '[href$="'+ window.location.hash +'"]').addClass("active"); | |
| $(window.location.hash).show(); | |
| } | |
| window.onhashchange = locationHashChanged; | |
| $("#tabs").delegate("li", "click", function(evt) { | |
| //only needed for additional tabs, use tl.removeClass("active") instead if you don't need this | |
| $("#tabs li a").removeClass("active"); | |
| $(this).find("a").addClass("active"); | |
| //only needed for additional tabs, use tc.hide() instead if you don't need this | |
| $(".tabContent").hide(); | |
| var activeTab = $(this).find("a").attr("href"); | |
| $(activeTab).show(); | |
| //reset deeplink | |
| window.location.hash = activeTab; | |
| evt.preventDefault(); | |
| }); | |
| //just a small test for event delegation :D, not needed | |
| $("#addMore").click(function(evt){ | |
| var count = $("#tabs li a").length + 1; | |
| $newTab = '<li><a href="#link' + count + '" title="Link ' + count + '" class="sprite"><span class="sprite">Link ' + count + '<\/span><\/a><\/li>' | |
| $newContent = '<div class="tabContent" id="link' + count + '" style="display:none"><h4>bla bla ' + count + '<\/h4>Dies ist ein neuer Tab, der genau wie alle anderen funktioniert<\/div>' | |
| $("#tabs").append($newTab); | |
| $(".tabContent").last().after($newContent); | |
| evt.preventDefault(); | |
| }); | |
| }); | |
| //]]> | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment