Evented Programming

Lightening Talk based on Yehuda Katz's talk.

Original Talk by Yehuda: http://jquery14.com/day-11

Code: https://gist.github.com/4279976
Example: http://jsfiddle.net/ryanjm/cTQBF/

Transcript

1. Evented Programming Inspired by Yehuda Katz (cliff notes version) http://jquery14.com/ day-11
2. Work with the grain
3. <form action="./index.html" method="get"> <input type="text" name="text" /> <input type="submit" value="Submit" /> </form>
4. <form action="./index.html" method="get" class="my-form"> <input type="text" name="text" /> <a href="#" class="submit">Submit</a> </form>
5. <form action="./index.html" method="get" class="my-form"> <input type="text" name="text" /> <a href="#" class="submit">Submit</a> </form> $(".my-form .submit").click(function(){ $(".my-form").submit(); });
6. <form action="./index.html" method="get" class="my-form"> <input type="text" name="text" /> <a href="#" class="submit">Submit</a> </form> $(".my-form .submit").click(function(){ $(".my-form").submit(); }); <form action="./index.html" method="get" class="my-form2"> <input type="text" name="text" /> <a href="#" class="submit">Submit</a> </form>
7. WWTBD
8. If the browser implemented this feature, what would it look like?
9. <form action="./index.html" method="get"> <input type="text" name="text" /> <a href="#" class="js-submit">Submit</a> </form> $("body").on("click",".js-submit",function(){ $(this).parent("form").submit(); return false; });
10. $("body").on("click",".js-hide",function(){ var sel = $(this).attr("data-hide"); $(sel).hide(); }); <a href="#" class="js-hide" data-hide=".hide">Hide Box</a> <div class="hide"> This box should be hidden </div>
11. <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> $("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");
12. Tabs One step down the rabbit hole
13. Tab 1 Tab 2 Tab 3 This is content for pane 1 This is content for pane 1 This is content for pane 1 Pane 1 Pane 2 Pane 3
14. <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> $("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); });
15. // 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");
16. <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> $("body").on("change", "ul.tabs", function(){ $(this).data("panes").each(function(i,e) { $(e).hide(); }) $(this).data("pane").show(); });
17. $("ul.tabs li").click(function(){ $(this).trigger("change"); }); $("ul.tabs").bind("change", function(e){ var sel = $(e.target).attr("data-pane"); $(this).data("pane", $("#"+sel)); }); $("ul.tabs").data("panes", $("li", this).map(function() { return $("#"+$(this).attr("data-pane")); }) ); $(".pane").hide(); $("ul.tabs li").first().trigger("click");
18. https://gist.github.com/4279976 http://jsfiddle.net/ryanjm/cTQBF/