add HTML5 data attribute to readme.

Johnathon E. Wright committed Nov 10, 2011

commit c47d41fd1a686123f0cc08e793523a8103813bcb

Showing 1 changed file with 27 additions and 0 deletions

README.markdown +27 -0

@@	@@ -1,6 +1,9 @@
	Introducing Sketch
	====================

+	Sketch allows you to create reuseable, inheritable visual
+	elements which can then be rendered on the web.
+

	Examples
	-------
@@	@@ -9,4 +12,28 @@ _basic syntax_

	class Smile < Sketch::Base

+	_html5's data attribute_
+
+	For svg elements and sketches, you can add data which can then be
+	retrieved via javascript.
+
+	Circle.new(:klass => 'data-point',
+	:data => {:country_name => 'USA',
+	:gdp => '13.1 Trillion'})
+
+	will produce this HTML... note then underscores become dashes.
+	This is because data-country_name freaks me out.
+
+	<circle class="data-point"
+	data-country-name="USA"
+	data-gdp="13.1 Trillion" />
+
+	The you can retrieve the data using jQuery, like this:
+
+	$('.data-point').click(function()
+	{
+	country_name = $(this).data('country-name');
+	gdp = $(this).data('gdp');
+	alert( country_name + ' has a gdp of ' + gdp );
+	});