Skip to content

Instantly share code, notes, and snippets.

@ryanjm

ryanjm/gist:4279976

Created December 13, 2012 21:16
Show Gist options
  • Save ryanjm/4279976 to your computer and use it in GitHub Desktop.
Save ryanjm/4279976 to your computer and use it in GitHub Desktop.
Download ZIP
For lightening talk
Raw
gistfile1.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Evented Programming</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
</script>
</head>
<body>
<form action="./index.html" method="get">
<input type="text" name="text" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
Raw
gistfile2.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Evented Programming</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$(".my-form .submit").click(function(){
$(".my-form").submit();
});
});
</script>
</head>
<body>
<form action="./index.html" method="get" class="my-form">
<input type="text" name="text" />
<a href="#" class="submit">Submit</a>
</form>
</body>
</html>
Raw
gistfile3.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Evented Programming</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("body").on("click",".js-submit",function(){
$(this).parent("form").submit();
return false;
});
});
</script>
</head>
<body>
<form action="./index.html" method="get">
<input type="text" name="text" />
<a href="#" class="js-submit">Submit</a>
</form>
</body>
</html>
Raw
gistfile4.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Evented Programming</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("body").on("click",".js-submit",function(){
$(this).parent("form").submit();
return false;
});
$("body").on("click",".js-hide",function(){
var sel = $(this).attr("data-hide");
$(sel).hide();
});
$("body").on("change",".js-change-box",function(){
var sel = $(this).attr('data-change-box');
var value = $(this).val();
$(sel).html("You selected option " + value);
});
$(".js-change-box").trigger("change");
$("body").on("change", "ul.tabs", function(){
var selected = $(this).data("selected");
var pane = $("div#"+ $(selected).attr("data-content") ).show();
if ($(this).data("pane") != undefined) {
$(this).data("pane").hide();
}
$(this).data("pane", pane);
});
// Internal "browser" events
$("ul.tabs").click(function(e){
$(this).data("selected", e.target);
$(e.target).addClass("selected").siblings().removeClass("selected");
$(this).trigger("change");
});
$(".pane").hide();
$("ul.tabs li").first().trigger("click");
// Tabs 2
$("body").on("change", "ul.tabs2", function(){
$(this).data("panes").each(function(i,e) { $(e).hide(); })
$(this).data("pane").show();
});
// Browser events
$("ul.tabs2 li").click(function(){
$(this).trigger("change");
});
$("ul.tabs2").bind("change", function(e){
var sel = $(e.target).attr("data-pane");
$(this).data("pane", $("#"+sel));
});
$("ul.tabs2").data("panes",
$("li", this).map(function() {
return $("#"+$(this).attr("data-pane"));
})
);
$("ul.tabs2 li").first().trigger("click");
});
</script>
</head>
<body>
<form action="./index.html" method="get">
<input type="text" name="text" />
<a href="#" class="js-submit">Submit</a>
</form>
<br/>
<br/>
<br/>
<a href="#" class="js-hide" data-hide=".hide">Hide Box</a>
<div class="hide">
This box should be hidden
</div>
<br/>
<br/>
<br/>
<select name="change-boxes" class="js-change-box" data-change-box=".box">
<option value="0">Option 0</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<div class="box">
</div>
<br/>
<br/>
<br/>
<ul class="tabs">
<li data-content="first" class="selected">First</li>
<li data-content="second">Second</li>
<li data-content="third">Third</li>
</ul>
<div class="pane" id="first">First content</div>
<div class="pane" id="second">Second content</div>
<div class="pane" id="third">Third content</div>
<br/>
<br/>
<br/>
<ul class="tabs2">
<li data-pane="first2" class="selected">First</li>
<li data-pane="second2">Second</li>
<li data-pane="third2">Third</li>
</ul>
<div class="pane" id="first2">First content</div>
<div class="pane" id="second2">Second content</div>
<div class="pane" id="third2">Third content</div>
<br/>
<br/>
<br/>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment