Merge pull request #4 from buchuki/documentation

* Path from buchuki: Create a pyjaco example that utilizes jQuery.
chrivers · Dec 27, 2011 · bab5601 · bab5601
2 parents 1c4af8c + 6971a58
commit bab5601
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 0 deletions.
diff --git a/examples/jquery/README b/examples/jquery/README
@@ -0,0 +1,16 @@
+An example of using pyjaco to build a stand-alone javascript file that can be
+included with HTML. I like this method as it allows separating javascript from
+HTML and can therefore be used with a variety of backend setups.
+
+First run the following command in the main pyjaco directory:
+
+# python generate_library.py
+
+This will create the py-builtins.js that is included in the index.html file
+
+Next, generate the clicker.js javascript from clicker.py:
+
+python pyjs.py -N --output clicker.js 
+
+Now you can load index.html in a browser and click the heading for a simple
+jQuery interaction.
diff --git a/examples/jquery/clicker.py b/examples/jquery/clicker.py
@@ -0,0 +1,16 @@
+@JSVar("jQuery")
+def ready():
+    jQuery('h1').click(on_click)
+
+@JSVar("jQuery", "Math.random", "Math.floor")
+def on_click():
+    if jQuery('#when_clicked').html():
+        r = Math.floor(Math.random() * 255)
+        g = Math.floor(Math.random() * 255)
+        b = Math.floor(Math.random() * 255)
+        color = "rgb(%d, %d, %d)" %(r,g,b)
+        jQuery('#when_clicked').attr('style', 'background-color: ' + color)
+    else:
+        jQuery('#when_clicked').html("you clicked it!")
+
+jQuery(ready)
diff --git a/examples/jquery/index.html b/examples/jquery/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html> 
+<html> 
+	<head> 
+    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
+    <script type="text/javascript" src="../../py-builtins.js"></script>
+    <script type="text/javascript" src="clicker.js"></script>
+  </head> 
+<body> 
+  <h1>Click me</h1>
+  <p id="when_clicked"></p>
+</body>
+</html>