Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Initial commit

  • Loading branch information...
commit c9e0c9d6ba35043eedc9c4cbad4f31b8691aa451 0 parents
@mathiasbynens authored
1  .gitattributes
@@ -0,0 +1 @@
+* crlf=input
1  .gitignore
@@ -0,0 +1 @@
+.DS_Store
32 README.md
@@ -0,0 +1,32 @@
+# HTML5 custom data attributes jQuery plugin
+
+This plugin simplifies the use of HTML5 custom data attributes in your jQuery code. It adds a function named `.dataAttr()` to the jQuery namespace, which acts as a wrapper for [`jQuery.attr()`](http://api.jquery.com/attr/).
+
+## Example Usage
+
+### HTML
+
+ <p id="foo" data-time="9 AM">…</p>
+
+### jQuery
+
+ // You can perfectly use this:
+ $('#foo').attr('data-time'); // '9 AM'
+ // But I prefer to do it this way, especially when dealing with a lot of data-*
+ $('#foo').dataAttr('time'); // '9 AM'
+ // Just like $.attr(), $.dataAttr() can be used as a setter
+ $('#foo').dataAttr('time', '3 PM');
+ // Computed data-* attribute values are possible as well
+ $('p').dataAttr('id', function() {
+ return this.id;
+ }); // p data-id="foo"
+
+## Useful?
+
+That’s up to you. This plugin isn’t rocket science. Using it won’t save you bytes or anything.
+
+However, it does allow you to write *even more readable code*. Personally, I like to keep custom data attributes separated from other attributes in my code — hence this plugin.
+
+## Credits
+
+_– [Mathias](http://mathiasbynens.be/)_
11 jquery.dataAttr.js
@@ -0,0 +1,11 @@
+/*!
+ * HTML5 custom data attributes plugin for jQuery
+ * @link http://github.com/mathiasbynens/HTML5-dataAttr-jQuery-plugin
+ * @description An easy setter/getter for HTML5 data-* attributes
+ * @author Mathias Bynens <http://mathiasbynens.be/>
+ */
+;(function($) {
+ $.fn.dataAttr = function(attr, val) {
+ return val ? $(this).attr('data-' + attr, val) : $(this).attr('data-' + attr);
+ };
+})(jQuery);
7 jquery.dataAttr.min.js
@@ -0,0 +1,7 @@
+/*!
+ * HTML5 custom data attributes plugin for jQuery
+ * @link http://github.com/mathiasbynens/HTML5-dataAttr-jQuery-plugin
+ * @description An easy setter/getter for HTML5 data-* attributes
+ * @author Mathias Bynens <http://mathiasbynens.be/>
+ */
+(function(a){a.fn.dataAttr=function(b,c){return c?a(this).attr('data-'+b,c):a(this).attr('data-'+b)}})(jQuery);
Please sign in to comment.
Something went wrong with that request. Please try again.