<?xml version="1.0" encoding="UTF-8"?>
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
|
<head>
|
<title>Customers</title>
|
<script type="text/javascript" src="jquery.js"></script>
|
<script type="text/javascript" src="jquery-jtemplates.js"></script>
|
<link rel="stylesheet" href="style.css">
|
|
<script type="text/javascript">
|
$(document).ready(function() {
|
//set template
|
$("#CustomersList").setTemplateElement("Template-List");
|
//add parameter using to calculate "age"
|
//$("#CustomersList").setParam("year", 2012);
|
//process template
|
$("#CustomersList").processTemplateURL("data.json");
|
|
//set template for detailed info
|
$("#CustomerDetails").setTemplateElement("Template-Details");
|
});
|
|
//show customer detail, run from template
|
function ShowDetails(cust) {
|
//process a template
|
$("#CustomerDetails").processTemplate(cust);
|
}
|
|
function fuck(s){
|
return s;
|
//document.write(s);
|
}
|
</script>
|
</head>
|
|
<body>
|
|
<!-- Templates -->
|
<p style="display:none"><textarea id="Template-List" rows="0" cols="0"><!--
|
{#template MAIN}
|
<table>
|
<tr class="{#cycle values=['bcEEC','bcCEE']}">
|
<td class="header">Details</td>
|
<td class="header">Name</td>
|
<td class="header">Age</td>
|
<td class="header">Fuck</td>
|
</tr>
|
{#foreach $T.Customers as Cust}
|
{#include ROW root=$T.Cust}
|
{#/for}
|
</table>
|
{#/template MAIN}
|
|
{#template ROW}
|
<tr class="{#cycle values=['bcEED','bcDEE']}">
|
<td><a href="#" onclick="ShowDetails({#var $T})">SELECT</a></td>
|
<td>{$T.FirstName} {$T.LastName}</td>
|
<td>{$P.year-$T.Born}</td>
|
<td>{#if $T.FirstName == "John"}
|
fuck
|
{#else }
|
jbda
|
{#/if}
|
{#if $T.firstName}
|
haha
|
{#/if}
|
|
</td>
|
</tr>
|
{#/template ROW}
|
--></textarea></p>
|
|
<p style="display:none"><textarea id="Template-Details" rows="0" cols="0"><!--
|
<table>
|
<tr><td class="header">First Name</td><td>{$T.FirstName}</td></tr>
|
<tr><td class="header">Last Name</td><td>{$T.LastName}</td></tr>
|
<tr><td class="header">Born</td><td>{$T.Born}</td></tr>
|
<tr><td class="header">E-mail</td><td>{$T.Email.link('mailto:'+$T.Email)}</td></tr>
|
</table>
|
--></textarea></p>
|
|
<!-- Output elements -->
|
<div id="CustomersList" class="Content"></div>
|
<div id="CustomerDetails" class="Content"></div>
|
|
</body>
|
</html>
|
