Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Tree: b3db791b0d
267 lines (209 sloc) 6.533 kB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>PURE Unobtrusive Rendering Engine for HTML - Version 2</title>
<link rel="stylesheet" type="text/css" href="index.css" />
<!--JSON needed to show the source code only -->
<script src="libs/json2.js"></script>
<script src="libs/pure_min.js"></script>
<!-- Example page files -->
<script src="js/demo.js"></script>
<script src="js/examples.js"></script>
</head>
<body>
<a href="http://github.com/pure/pure/tree/version2" style="float:right;margin:1em">Project site &amp; Download</a>
<div id="chooseLib">
Choose a library to run the examples with:<br />
<a class="lib" href="javascript:" onclick="loadLib('dojo');">dojo</a>
<a class="lib" href="javascript:" onclick="loadLib('domassistant');">DomAssistant</a>
<a class="lib" href="javascript:" onclick="loadLib('jquery');">jQuery</a>
<a class="lib" href="javascript:" onclick="loadLib('mootools');">Mootools</a>
<a class="lib" href="javascript:" onclick="loadLib('prototype');">Prototype</a>
<a class="lib" href="javascript:" onclick="loadLib('sizzle');">Sizzle</a>
<a class="lib" href="javascript:" onclick="loadLib('sly');">Sly</a> -
<a class="lib" href="javascript:" onclick="loadLib('pure');">PURE Alone (modern browsers only)</a>
<p>Or look at the source code of the tutorials:</p>
<ul>
<li>Automatic rendering(autoRender):
<ol>
<li><a href="tutorial/tuto1.html">Set the value of an HTML node</a>
<li><a href="tutorial/tuto2.html">Set the value to an HTML attribute</a>
<li><a href="tutorial/tuto3.html">Repeat a HTML node (loop)</a>
</ol>
<li>Render with directives:
<ol>
<li><a href="tutorial/tuto4.html">Set the value of an HTML node and attribute</a>
<li><a href="tutorial/tuto5.html">Repeat an HTML node (loop)</a>
<li><a href="tutorial/tuto9.html">How to use PURE with jQuery</a>
<li><a href="tutorial/tuto5b.html">Use sort and filter on loops</a>
<li><a href="tutorial/tuto5c.html">Chaining multiple rendering</a>
<li><a href="tutorial/tuto5d.html">Nested loops</a>
<li><a href="tutorial/tuto6.html">Using function as directive for more complex needs</a>
<li><a href="tutorial/tuto8.html">Recursion example</a>
<li><a href="tutorial/tuto7.html">Extend PURE with a plugin. Here an post rendering animation.</a>
</ol>
</ul>
</div>
<div id="examples">
<ul class="exampleList">
<li class="ex01">
<h3>1. Hello World</h3>
<div class="template">
<div class="who"></div>
</div>
</li>
<li class="ex02">
<h3>2. Hello World with directives</h3>
<div class="template">
<div class="hello">
<span></span>
</div>
</div>
</li>
<li class="ex03">
<h3>3. Auto Rendering with loops (+ directives)</h3>
<div class="template">
<div class="friends">
The friends of <a target="_blank" href="http://twitter.com/" class="who"></a> are
<ul>
<li class="friend">
<a target="_blank" class="name twitter@title twitter@href+" href="http://twitter.com/"></a>
</li>
</ul>
</div>
</div>
</li>
<li class="ex04">
<h3>4. Loop on a table and events</h3>
<div class="template">
<table class="playerList">
<thead>
<tr>
<th>Player</th>
</tr>
</thead>
<tbody>
<tr class="player">
<td>Chloe</td>
</tr>
</tbody>
</table>
</div>
</li>
<li class="ex05">
<h3>5. Dynamic table</h3>
<div class="template">
<table class="partialTable">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
</li>
<li class="ex06">
<h3>6. Nested loops</h3>
<div class="template">
<div class="scoreBoard">
<table>
<tbody>
<tr class="scoreBoard">
<td class="teamName">Team Name</td>
<td class="teamPlace">
<table>
<thead>
<tr>
<th class="position">Position</th>
<th class="player">Player</th>
<th class="score">Score</th>
</tr>
</thead>
<tbody>
<tr class="teamList">
<td class="position">1</td>
<td class="player">Chloe</td>
<td class="score">3</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ex07">
<h3>7. Recursion</h3>
<div class="template">
<ul class="treeItem">
<li>
<a class="name" href="javascript:">name</a>
<div class="children"></div>
</li>
</ul>
</div>
</li>
<li class="ex08">
<h3>8. Reuse a template and load JSONP data every sec</h3>
<div class="template">
<div id="clock">
It is now <span class="hour"></span> : <span class="minute"></span> : <span class="second"></span><br />
In <span class="tz"></span>
</div>
</div>
<p><a href="javascript:" onclick="clearTimeout(_to);">stop it!</a></p>
</li>
<li class="ex09">
<style>
.ex09 table { border:1px solid #999; text-align:left; border-collapse:collapse;}
.ex09 th { padding:.5em; background:#FFC;text-align:center;border-bottom:1px solid #999;border-right:1px solid #999;}
.ex09 td { padding:.3em; border-right:1px solid #999;border-bottom:1px solid #999;background:#FFF;}
.ex09 .percent, .price, .change{text-align:right;}
.ex09 .red { color:#900; }
.ex09 .green { color:#090; }
</style>
<h3>9. World Indices: dynamic table, reuse a template and JSONP load every 10 sec</h3>
<div class="template">
<table class="indices">
<thead><tr><th></th></tr></thead>
<tbody><tr><td></td></tr></tbody>
</table>
</div>
<a href="javascript:" onclick="clearTimeout(_to10);this.style.visibility='hidden';">stop it!</a>
</li>
<li class="ex10">
<h3>10. Populate a drop down list and set a default value</h3>
<div class="template">
<form class="sizes">
<select>
<option value="XXS">Extra Small</option>
</select>
</form>
</div>
</li>
<li class="ex11">
<h3>11. Linked drop down boxes</h3>
<div class="template">
Make:
<select class="make">
<option>Choose..</option>
<option class="values"></option>
</select>
Model:
<select disabled class="model">
<option></option>
</select>
</div>
</li>
</ul>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.