doevisualizations
Version:
Data Visualization Library based on RequireJS and D3.js (v4+)
91 lines (82 loc) • 2.05 kB
HTML
<html lang="en">
<head>
<title>default</title>
<style type='text/css'>
body {font-family: verdana}
.error {border: solid 1px red;}
.error_text { color: red; font-size: 10px;}
td {padding: 3px;}
.clickme {
padding: 5px; margin: 5px;
border: dashed 1px red;
width: 100px;
}
ul li {
float: left;
border: solid 1px red;
padding: 5px;
list-style: none;
}
ul { margin: 0px; padding: 0px;}
.tab {
clear: both;
border: solid 1px black;
padding: 10px;
}
</style>
</head>
<body>
<h1>Default Events</h1>
<p>A tabs widget that doesn't let you continue until the first part is complete.</p>
<div id="demo-html">
<div id='tabs'>
<ul>
<li><a href='#first'>Part 1</a></li>
<li><a href='#second'>Part 2</a></li>
</ul>
<div id='first' class='tab'>
<input type='checkbox' id='complete'/> Check to complete this part.
</div>
<div id='second' class='tab'>
You completed part 1
</div>
</div>
</div>
<script type='text/javascript' src='../../node_modules/steal/steal.js' main='@empty'></script>
<script type='text/javascript'>
steal('jquerypp/event/default',function($){
var sub = function(el){
return $(el.find("a").attr("href"))
};
$.fn.tabs = function(){
this.each(function(){
var ul = $(this);
ul.find("li:first").addClass('active');
ul.find(".tab:gt(0)").hide();
ul.on("click","li", function( ev){
var el = $(this);
ev.preventDefault();
var self = this;
if(!el.hasClass('active')){
sub(el).triggerAsync('show', function(){
sub(ul.find(".active").removeClass("active")).hide();
el.addClass("active");
});
}
}).on("default.show",".tab", function(){
$(this).show();
});
});
};
$("#tabs").tabs();
$("#second").bind("show",function(ev){
if(! $("#complete")[0].checked ){
ev.preventDefault();
}
});
});
</script>
</body>
</html>