Skip to content

Instantly share code, notes, and snippets.

@hendrikswan

hendrikswan/example.html

Created November 14, 2011 09:21
Show Gist options
  • Save hendrikswan/1363590 to your computer and use it in GitHub Desktop.
Save hendrikswan/1363590 to your computer and use it in GitHub Desktop.
Download ZIP
static-tabs
Raw
example.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Demo of static tabs</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.10.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-staticTabs.js"></script>
<script type="text/javascript">
$(function(){
$('#tabs').staticTabs({selectedTab:"tab-1"});
});
</script>
</head>
<body>
<h1>Demo of static tabs</h1>
<div id="tabs">
<ul>
<li id="tab-1"><a href="#tabs-1">First</a></li>
<li id="tab-2"><a href="#tabs-2">Second</a></li>
<li id="tab-3"><a href="#tabs-3">Third</a></li>
</ul>
<div>Some server side generated content</div>
</div>
</body>
</html>
Raw
staticTabs.js
(function( $ ) {
$.fn.staticTabs = function(options) {
var settings = $.extend( {
'selectedTab': '__none__'
}, options);
this.addClass("ui-tabs ui-widget ui-widget-content ui-corner-all");
this.find("ul").addClass("ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all");
this.find("li").addClass("ui-state-default ui-corner-top ").bind('mouseenter mouseleave', function() {
$(this).toggleClass('ui-state-hover');
});
this.find("#" + settings.selectedTab).addClass("ui-state-active ui-tabs-selected");
};
})( jQuery );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment