<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>jQuery Templates – tmpl(), template() and tmplItem()</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function () {
var attendees = [
{ Name: "Hajan", Surname: "Selmani", speaker: true, phones: [070555555, 071888999, 071222333] },
{ Name: "Darko", Surname: "Milevski", phones: [070555555, 071888999, 071222333] },
{ Name: "Ljubomir", Surname: "Zivanovic", phones: [070555555, 071222333] },
{ Name: "Mile", Surname: "Grujovski", phones: [070555555, 071888999, 071222333] },
{ Name: "Ivan", Surname: "Acev", phones: [071888999, 071222333] },
{ Name: "Dejan", Surname: "Dimitrovski", speaker: true, phones: [070555555, 071222333] }
];
var colleges = [
{ College: "Narayana"},
{ College: "Chaitanya"},
{ College: "Balaji"}
];
$("#attendeesTemplate").template("listAttendees"); //compiling the template to named listAttendees
$("#collegesTemplate").template("listColleges"); //compiling the template to named listAttendees
$.tmpl("listAttendees", attendees).appendTo("#attendees"); //using compiled template
//$("#attendeesTemplate").tmpl(attendees).appendTo("#attendees");
$("#findSpeaker").click(function () {
var speakers = $("li.speaker:last").tmplItem();
var speaker = speakers.data;
var htmlElement = speakers.nodes;
$(htmlElement).css("background-color", "yellow");
});
$("#addNew").click(function () {
var sps = false;
if ($("#speaks").attr("checked")) sps = true;
attendees.push({ Name: $("#name").val(), Surname: $("#surname").val(), speaker: sps });
$("#attendees").html("");
$.tmpl("listAttendees", attendees).appendTo("#attendees");
});
$("#addNew").click(function () {
var sps = false;
if ($("#speaks").attr("checked")) sps = true;
attendees.push({ Name: $("#name").val(), Surname: $("#surname").val(), speaker: sps });
$("#attendees").html("");
$.tmpl("listAttendees", attendees).appendTo("#attendees");
});
$("#repalceNew").click(function () {
$("#attendees").html("");
$.tmpl("listColleges", colleges).appendTo("#attendees");
});
});
</script>
<script id="attendeesTemplate" type="text/html">
{{if speaker}}
<li class="speaker">${Name} ${Surname} ${phones}
(<font color="green">speaker</font>)
</li>
{{else}}
<li class="attendee">${Name} ${Surname}
(attendee)
</li>
{{/if}}
</script>
<script id="collegesTemplate" type="text/html">
<li>
${College}
</li>
</script>
</head>
<body>
<div id="content">
<div id="list" style="width:300px;">
<ol id="attendees"></ol>
</div>
<div id="addForm">
Name: <input id="name" type="text" style="display:inline;" />
Surname: <input id="surname" type="text" />
Speaker: <input id="speaks" type="checkbox" /> <br />
<a id="addNew" href="#">Add New</a><br />
<a id="repalceNew" href="#">Replace Some Data</a><br />
</div>
<a id="findSpeaker" href="#">HighLight Last Speaker</a>
</div>
</body>
</html>
<head id="Head1" runat="server">
<title>jQuery Templates – tmpl(), template() and tmplItem()</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function () {
var attendees = [
{ Name: "Hajan", Surname: "Selmani", speaker: true, phones: [070555555, 071888999, 071222333] },
{ Name: "Darko", Surname: "Milevski", phones: [070555555, 071888999, 071222333] },
{ Name: "Ljubomir", Surname: "Zivanovic", phones: [070555555, 071222333] },
{ Name: "Mile", Surname: "Grujovski", phones: [070555555, 071888999, 071222333] },
{ Name: "Ivan", Surname: "Acev", phones: [071888999, 071222333] },
{ Name: "Dejan", Surname: "Dimitrovski", speaker: true, phones: [070555555, 071222333] }
];
var colleges = [
{ College: "Narayana"},
{ College: "Chaitanya"},
{ College: "Balaji"}
];
$("#attendeesTemplate").template("listAttendees"); //compiling the template to named listAttendees
$("#collegesTemplate").template("listColleges"); //compiling the template to named listAttendees
$.tmpl("listAttendees", attendees).appendTo("#attendees"); //using compiled template
//$("#attendeesTemplate").tmpl(attendees).appendTo("#attendees");
$("#findSpeaker").click(function () {
var speakers = $("li.speaker:last").tmplItem();
var speaker = speakers.data;
var htmlElement = speakers.nodes;
$(htmlElement).css("background-color", "yellow");
});
$("#addNew").click(function () {
var sps = false;
if ($("#speaks").attr("checked")) sps = true;
attendees.push({ Name: $("#name").val(), Surname: $("#surname").val(), speaker: sps });
$("#attendees").html("");
$.tmpl("listAttendees", attendees).appendTo("#attendees");
});
$("#addNew").click(function () {
var sps = false;
if ($("#speaks").attr("checked")) sps = true;
attendees.push({ Name: $("#name").val(), Surname: $("#surname").val(), speaker: sps });
$("#attendees").html("");
$.tmpl("listAttendees", attendees).appendTo("#attendees");
});
$("#repalceNew").click(function () {
$("#attendees").html("");
$.tmpl("listColleges", colleges).appendTo("#attendees");
});
});
</script>
<script id="attendeesTemplate" type="text/html">
{{if speaker}}
<li class="speaker">${Name} ${Surname} ${phones}
(<font color="green">speaker</font>)
</li>
{{else}}
<li class="attendee">${Name} ${Surname}
(attendee)
</li>
{{/if}}
</script>
<script id="collegesTemplate" type="text/html">
<li>
${College}
</li>
</script>
</head>
<body>
<div id="content">
<div id="list" style="width:300px;">
<ol id="attendees"></ol>
</div>
<div id="addForm">
Name: <input id="name" type="text" style="display:inline;" />
Surname: <input id="surname" type="text" />
Speaker: <input id="speaks" type="checkbox" /> <br />
<a id="addNew" href="#">Add New</a><br />
<a id="repalceNew" href="#">Replace Some Data</a><br />
</div>
<a id="findSpeaker" href="#">HighLight Last Speaker</a>
</div>
</body>
</html>
No comments:
Post a Comment