Permalink
Browse files

initial extraction and explanation

  • Loading branch information...
0 parents commit 3b965754e7e183748acacaae5e3a3ba05e8d45e5 @croaky committed Apr 17, 2011
Showing with 60 additions and 0 deletions.
  1. +41 −0 README.md
  2. +19 −0 jquery.event-target.js
@@ -0,0 +1,41 @@
+jQuery Event Target
+===================
+
+A jQuery plugin for setting event targets in data- attributes.
+
+Install
+-------
+
+ <script src="https://github.com/croaky/jquery-event-target/raw/master/jquery.event-target.js" type="text/javascript"></script>
+
+Use
+---
+
+ <a href="#" data-show=".rename-document" data-focus="#document-name">Rename Document</a>
+
+ <div class="rename-document" style="display: none;">
+ <form action="/documents/1" method="post">
+ <input id="document-name" type="text" value="Untitled" />
+ <input type="submit" value="Rename" />
+ <a href="#" data-hide=".rename-document">Cancel</a>
+ </form>
+ </div>
+
+When the user clicks "Rename Document", the form will appear and the cursor will be in the text field. When the user clicks "Cancel", the form will disappear.
+
+How it works
+------------
+
+The plugin observes links (a tags) with the following data- attributes:
+
+ data-show
+ data-hide
+ data-focus
+
+When the link is clicked, the plugin will fire the event named by the data- attribute on the value of the data- attribute.
+
+Think of these as key-value pairs where the key is the jQuery event (in data- attribute form) and the value is the target element to operated on (in CSS selector form).
+
+ data-show=".rename-document"
+ data-focus="#document-name"
+ data-hide=".rename-document"
@@ -0,0 +1,19 @@
+$(function() {
+ $("a[data-show]").live('click', function() {
+ var showable = $(this).attr('data-show');
+ $(showable).show();
+ return false;
+ });
+
+ $("a[data-hide]").live('click', function() {
+ var hideable = $(this).attr('data-hide');
+ $(hideable).hide();
+ return false;
+ });
+
+ $("a[data-focus]").live('click', function() {
+ var focusable = $(this).attr('data-focus');
+ $(focusable).focus();
+ return false;
+ });
+});

0 comments on commit 3b96575

Please sign in to comment.