Skip to content

Instantly share code, notes, and snippets.

@jupiterjs
Created June 28, 2011 13:28
Show Gist options
  • Save jupiterjs/1051126 to your computer and use it in GitHub Desktop.
Save jupiterjs/1051126 to your computer and use it in GitHub Desktop.
tabs.js
steal.plugins('jquery/dom/fixture').then(
"//blue/models/property",
"//blue/fixtures/properties",
function(){
module("blue");
test("blue testing works", function(){
stop()
Property.findAll({limit: 100}, function(properties){
equals(properties.length, 100, "limit works")
start();
});
});
});
steal.plugins('jquery').then(function($){
var getPanel = function(li){
var href = $(li).find("a").attr("href");
return $(href);
}
$.fn.tabs = function(){
this.find("li")
.each(function(i, li){
if(i==0){
$(li).addClass('active')
} else {
getPanel(li).hide()
}
})
this.delegate("li","click",function(){
var li = $(this);
var old = li.siblings('.active');
old.removeClass("active");
getPanel(old).hide();
li.addClass("active");
getPanel(li).show();
});
}
$('#tabs').tabs();
$(document).bind("ready",function(){})
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>tabs</title>
<style type='text/css'>
body {font-family: verdana}
.error {border: solid 1px red;}
.error_text { color: red; font-size: 10px;}
td {padding: 3px;}
.active { background-color: red}
</style>
</head>
<body>
<ul id='tabs'>
<li><a href="#contacts">Contacts</a></li>
<li><a href="#locations">Locations</a></li>
</ul>
<div id='contacts'>Contacts!</div>
<div id='locations'>Locations!</div>
<a id='addMore'>Add more</a>
<script type='text/javascript'
src='../../steal/steal.js?enui/tabs,development'>
</script>
<script type='text/javascript'>
$("#addMore").click(function(){
$('#tabs').append("<li><a href='#things'>Things</a></li>")
$('#locations').after("<div id='things' style='display:none'>Things</div>")
})
</script>
</body>
</html>
steal.plugins('jquery','jquery/controller')
.then(function( $ ) {
$.Controller('Enui.Tabs',{
init : function(){
var getPanel = this.getPanel;
this.element.find("li").each(function( i, li ) {
if ( i == 0 ) {
$(li).addClass('active')
} else {
getPanel(li).hide()
}
})
},
getPanel: function( li ) {
var href = $(li).find("a").attr("href");
return $(href);
},
"li click" : function(li, ev){
var old = li.siblings('.active');
old.removeClass("active");
this.getPanel(old).hide();
li.addClass("active");
this.getPanel(li).show();
}
})
$('#tabs').enui_tabs();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment