ryanjm/gist:4279976

## 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>

## 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>

## 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>

## 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>
	<!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>