Show Microsoft's jQuery plugins.

1. Microsoft與jQuery社群的親密接觸 上官林傑 (ericsk) @ OSDC.tw 2011

2. About myself 上官林傑 a.k.a. ericsk Experiences Developer Evangelist @ Microsoft Taiwan2011.03 ~ Organizer @ Taipei GTUG2009.08 ~ 2010.12 Military Service @ CHT2007.01 ~ 2011.02 http://plurk.com/ericskhttp://facebook.com/ericsk0313

3. Outlines What’s jQuery? jQueryIntegration in Microsoft Products Microsoft’s Contributions to jQuery

4. What’s jQuery? http://jquery.comhttps://github.com/jquery Lightweight, powerful, cross-browser JavaScript library Full CSS3 Selector Support Easy and useful DOM, Event, AJAX APIs Active communities, includes UI, tool, plugins, etc.

5. jQuery Sample [DOM Manipulation] <div id="foo"></div> <script src="jquery-1.5.1.min.js"></script> <script> $('<h1>Hello, world</h1>') .css({color: 'red', display: 'none'}) .appendTo($('#foo')) .show('slow'); </script> [Event, AJAX] <button id="btn">Click</button> <div id="foo"></div> <script src="jquery-1.5.1.min.js"></script> <script> $('#btn').click(function(e){ $.getJSON('/path/to/json', function(data) { // do something with data }); }); </script>

6. Integrates with MS Products Starts from Visual Studio® 2008 SP1 jQuery code intellisense Microsoft CDN also supports intellisense (VS2010) http://ajax.microsoft.com/ajax/jquery/jquery-1.5.1.min.js

7. jQuery Control for ASP.NET Implements ASP.NET toolkits with jQuery AJAX Control Toolkit Client Templates …

8. Community Engagement Created proposals to jQuery developer forum template、globalization、datalink jQuery accepted them as official plugins: http://github.com/jquery/jquery-tmpl http://github.com/jquery/jquery-global http://github.com/jquery/jquery-datalink

9. jQuery Template Project: https://github.com/jquery/jquery-tmpl Document: http://api.jquery.com/category/plugins/templates/ CDN: http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js Render template with Array or Object. Simple template syntax

10. Templates 3 ways to prepare the template: $('<div>${foo}</div><div>${bar}</div>').tmpl(data) <script id="my-tmpl" type="text/x-jquery-tmpl"><div>${foo}</div><div>${bar}</div></script><script> $('#my-tmpl').tmpl(data)...</script> <div id="my-tmpl" style="display:none">${foo} says ${bar}.</div><script>$('#my-tmpl').tmpl(data)...</script>

11. Template Syntax ${variableOrExpression} {{html variableOrExpression}} Output HTML content {{if}} {{else}} {{/if}} Conditional tags. (else could be used as `else if`) {{each data}} ${$index} ${$value} {{/each}} Iterate over an array or object {{tmpl template}} ... {{/tmpl}} Composite templates {{wrap template}} ... {{/wrap}} Wrap with another template

12. jQuery Template Sample <script src="jquery-1.5.1.min.js"></script> <script src="jquery.tmpl.min.js"></script> <script id="message-tmpl" type="text/x-jquery-tmpl"> <li class="message-item"> <h4 class="message-name">${UserId}</h4> <div class="message-content">${Comment}</div> <div class="message-time">${PostTime}</div> </li> </script> ... <script> $.post('/path/to/post', { ... }, function(resp) { $('#message-tmpl').tmpl(resp) .appendTo($('#message-list')); }); </script>

13. jQuery Template Sample <script id="message-tmpl" type="text/x-jquery-tmpl"> <li class="message-item"> <h4 class="message-name">${UserId}</h4> <div class="message-content"> {{html $item.NL2BRComment()} </div> <div class="message-time">${PostTime}</div> </li> </script> ... <script> $.post('/path/to/post', { ... }, function(resp) { $('#message-tmpl').tmpl(resp, { NL2BRComment: function() { return this.data.Comment.replace(//g, '<br>'); } }) .appendTo($('#message-list')); }); </script>

14. jQueryDatalink Project: https://github.com/jquery/jquery-datalink Document: http://api.jquery.com/category/plugins/data-link/ Link fields from one object to another automatically.

15. jQueryDatalink Sample <script src="jquery-1.5.1.min.js"></script> <script src="jquery.datalink.js"></script> <form> <input type="text" name="userid"> <input type="text" name="text"> </form> <script> var foo = {}; $('form').link(foo); $('input[name=userid]').val('ericsk'); alert(foo.userid); // ericsk $(foo).setField('text', 'kscire'); $('input[name=text]').val(); // kscire </script>

16. jQueryGlobalzation Project: https://github.com/jquery/jquery-global Used to make page i18n. $.global.cultures defines “culture” of each locale, such as number format, calendar format, etc. Set $.global.culture to switch locale Localize words (tokens)

17. [Global] Date Format // 2011/03/25 vardateStrEn = $.global.format( new Date(2011, 3, 25), 'yyyy/MM/dd' ); // 2011年3月25日 var $zhTW = $.global.cultures['zh-TW']; vardateStrZhTW = $.global.format( new Date(2011, 3, 25), $zhTW.calendars.standard.patterns.D, $zhTW );

18. [Global] Localize Words $.global.localize('trans', 'zh-TW', { 'Hello': '哈囉', 'world': '世界' }); $.global.localize('trans', 'ja', { 'Hello': 'こんにちは', 'world': '世界' }); vartz = $.global.localize('trans', 'zh-TW'); alert(tz.Hello + ', ' + tz.world); // 哈囉, 世界 vartj = $.global.localize('trans', 'ja'); alert(tz.Hello + ', '+ tz.world); //こんにちは, 世界

19. JSDefer https://github.com/BorisMoore/JsDefer Deferred script loader $.defer('/path/to/js') .done(function() { // DO something }) .fail(function() { // DO something when fail });

20. Future Watch Boris Moore’s repositories: https://github.com/BorisMoore

21. Ads Try Visual Web Developer® Express FREE http://www.microsoft.com/express/Web/ BizSpark / DreamSpark for Startups! http://www.microsoft.com/taiwan/bizspark/ http://www.microsoft.com/taiwan/dreamspark/