Microsoft contributions to jQuery Plugins

Almost 3 years ago Scottgu announced that Microsoft would begin offering product support for jQuery. Now Microsoft is playing a great role on contributing to jQuery plugin. From past 8 to 9 months they were striving on 3 major jQuery plugins.

They were:

          1. Templating

          2. Data-Linking

          3. Globalization
The good news is Templating plugin created by Microsoft is going to be added officially as a new feature in jQuery 1.5 version 

 
1) Client side templating (jquery.tmpl.js)
 

Say suppose you want to get a set of data and display stuffs in structured manner then use template. Initially we used to concatenate the strings and display the data that was very slow process.
Below is one example how to use the template plugin. In below code we are displaying the product object data in UI. The data inside the product can be fetched from server by calling $.ajax
 
Above script is html its type sets to text / html that says the browser not to interpreted
Content within. It injects the HTML. Braces indicating the placeholder for knowing more about the template plugin please read.


[sourcecode language="javascript"]
<form runat="server" id="form1">
<h1>Product</h1>
<div id="productContainer"></div>
</div>
</form>
<script id="productTemplate" type="text/html"><div>
<h3>${name} = $(formatCurrency(price)})</h3>
<img&nbsp;src ="Products/${picture}"/>
<p>
html description
</p>
</div>
</script>
[/sourcecode]
Above script is html its type sets to text / html that says the browser not to interpreted
Content within. It injects the HTML. Braces indicating the placeholder for knowing more about the template plugin please read.

 [sourcecode language="javascript"]
<Script type="text/javascript">
//Array of products
var products = [
{name : "Apple",price : 3.44, picture : "Apple.png", description: "<i><b>Super</b></i> delicious"}
,{name : "Bacon",price : 4.55, picture : "Bacon.png", description: "Quality bacon"}
,{name : "Ice Cream",price : 12.00, picture : "IceCream.png", description: "Low fat ice cream."}
];

//render the array of products
$("#productTemplate")
.tmpl(products)
.appendTo("#productContainer");
tmpl method returns the fragment of html and append to productcontainer.
function formatCurrency(num) {
num = isNaN(num) || num === '' || num === null ? 0.00 : num ;
return "$" + parsefloat(num).tofixed(2);
}
</script>
[/sourcecode]

2) Data Linking (jquery.datalink.js)

Data linking plugin gives the easy way to synchronized to UI field and data object. Its easy way to track the changes in happened in the UI elements and vice versa. Initially we used to check the each form input element which changed and then update the javascript object and then send it to server for update. Now we don’t need to bother about the changes happened in the UI element. The moment any UI element is changed the javascript object will get automatically updated and vice versa. By default linkdata plugin does two-way data binding.

Jquery.datalink.js uses jQuery 1.4.3 version therefore please makes sure that you are including this version of jquery while using datalink plugin.

Let’s look at the below example. Here we have 2 input fields which are linked with a javascript object say product. Now any changes made in product object will reflect in UI automatically and vice versa is true.

[sourcecode language="javascript"]
product Name : <input name="name" id="name" type="text"/>
product price : <input name="price" id="price" type="text"/>
<script class="hiddenSpellError"><!--mce:1--></script>
<script class="hiddenSpellError"><!--mce:2--></script>
//link product form to product object
var product = {}
$("form").link(product);

//changes to product object will be sync'ed&nbsp;with product form
$(product).data("name","Ice Cream");

//changes to product form will be synced with product object
$("#btnSave").click(function ( ) {
e.preventDefault();
//show product object
alert([product.name, product.price]);
});
[/sourcecode]

3) Jquery glob (jquery.glob.js)

Globalization plugin can be used to localize the website to any region.
You want to globalize or localize your own plugin then use this plugin.
Features:
1.Supports over 350 different cultures, including country-specific cultures and language, country-neutral cultures.

2.Culture information for each culture is available through a simple data structure, accessible to plugins for their own purposes.

3.Supports formatting dates to any of these cultures, including those that have non-Gregorian calendars, Gregorian calendars with a year offset, and calendars with multiple Eras.

4.Supports formatting numbers to strings as numbers, currency, or percentages, to any of these cultures, including those with very special formatting rules, such as number group sizes that differ between currency and percentages, or have a different number of digits.

5.Supports parsing dates and numbers from the culture specific string representation of them back into JavaScript dates and numbers.

6.Supports localization through a localize() API that handles selecting the best known match automatically.

7.Supports the Accept-Language header value as-is, to select the culture best suited to the user per their browser settings.

8.Extensibility allows for plugins to access and add to the culture information, including cultures it does not already support.

9.Retrofitted the jQueryUI DatePicker plugin to use this plugin, rather than its existing globalization support. This was fairly simple to do and immediately opens up the range of cultures supported by the plugin to the full set of cultures supported by jQuery.glob.js.

Let’s see below example we want to use the date picker and make it globalize so that in any country if we use this then it will show the calendar on their language.

[sourcecode language="javascript"]</span>
<select id="<span class=">selectCulture"></select>
<option> Loading...</option>
</select>
<div id="picker">
</div>
//populate select list
var select = $("#selectCulture").get(0);
select.options.length = 0;
$.each($.cultures, function ( ) {
select.options[select.options.length] = new Option (this.englishName, this.name);
});

$("#selectCulture").change(function () {
//set culture form select list
$.preferCulture(this.value);

//Destroy and create datepicker
$("#picker").datepicker("destroy").datepicker({
changeMonth:true,
changeYear : true
});
});
</script>
<span style="font-family: <span class=;">Calibri</span>; font-size: large;"> [/sourcecode]