jQuery Plugin For Editable and Runnable JS Code Blocks - Codeblock.js
File Size: | 8.58KB |
---|---|
Views Total: | 1168 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Codeblock.js is a jQuery plugin that allow to turn javascript code into an editable and runnable code block that your visitor can poke at and play with to better understand your API.
How to use it:
1. Include jQuery Codeblock CSS to your web page
<link href="codeblock.css" rel="stylesheet" type="text/css">
2. Create a container for the editable and runnable code block
<div class="codeblock" id="sandstorm_demo"> //Try playing with the parameters var R=0, s=5; x1=.1; y1=.05, x2=.25, y2=.24, x3=1.6, y3=.24, x4=300, y4=200, x5=300, y5=200; //Try various tags here (p, a, code, etc.) //var elems=document.getElementsByTagName("h3"); var elems=document.querySelectorAll("#sandstorm_demo span"); var l=elems.length; var i, c; var A = function (){ for(i=0; i-l; i++){ c=elems[i].style; c.position='absolute'; c.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px"; c.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"; } R++; }; //Loop setInterval(function(){A()},s); console.log("Sandstorm!"); </div>
3. Include necessary javascript libraries on your web page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://rawgithub.com/ajaxorg/ace-builds/master/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script> <script src="codeblock.js"></script>
4. Call the plugin
<script> $(function(){ $(".codeblock").codeblock(); }); </script>
This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.