Tuesday, October 12, 2010

JQuery Template Plugin

JQuery officially released new plugins. Please check here . http://blog.jquery.com/2010/10/04/new-official-jquery-plugins-provide-templating-data-linking-and-globalization/

Example.
I would describe only main steps.

Step 1. Include file
<script src="<%= Url.Content("~/Scripts/jquery.tmpl.js") %>" type="text/javascript"></script>
Step - 2.  Template Structure :
<
<table width="100%">
<tr id=rec${UserName}>
<td width="20%">${FirstName}</td>
<td width="20%">${LastName}</td>
<td width="20%">${UserName}</td>
<td width="20%">${Email}</td>
<td align="center" width="5%" title="Edit"><img src="<%
<td align="center" width="5%" title="Delete"><img src="<%
</tr>
</table>
script id="userTemplate" type="text/x-jquery-tmpl"> =Url.Content("~/Images/IconEditRecord.png") %>" alt="Edit" onmouseover="this.style.cursor='pointer';" onclick=showdialog('${UserName}'); /></td>=Url.Content("~/Images/IconXRed.png") %>" alt="Delete" onmouseover="this.style.cursor='pointer';" onclick="deleteUser(this,'${UserName}');" /></td></

Step 3 - Where to render
<table id="UserList">

Step 4 - Ajax Call and Append Data
 



No comments:

Post a Comment