Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Microsoft and jQuery

24,198 views

Published on

Show Microsoft's jQuery plugins.

Published in: Technology
  • Be the first to comment

Microsoft and jQuery

  1. 1. Microsoft與jQuery社群的親密接觸<br />上官林傑 (ericsk)<br />@ OSDC.tw 2011<br />
  2. 2. About myself<br />上官林傑 a.k.a. ericsk<br />Experiences<br />Developer Evangelist @ Microsoft Taiwan2011.03 ~ <br />Organizer @ Taipei GTUG2009.08 ~ 2010.12<br />Military Service @ CHT2007.01 ~ 2011.02<br />http://plurk.com/ericskhttp://facebook.com/ericsk0313<br />
  3. 3. Outlines<br />What’s jQuery?<br />jQueryIntegration in Microsoft Products<br />Microsoft’s Contributions to jQuery<br />
  4. 4. What’s jQuery?<br />http://jquery.comhttps://github.com/jquery<br />Lightweight, powerful, cross-browser JavaScript library<br />Full CSS3 Selector Support<br />Easy and useful DOM, Event, AJAX APIs<br />Active communities, includes UI, tool, plugins, etc.<br />
  5. 5. jQuery Sample<br />[DOM Manipulation]<br /><div id="foo"></div><br /><script src="jquery-1.5.1.min.js"></script><br /><script><br /> $('<h1>Hello, world</h1>')<br /> .css({color: 'red', display: 'none'})<br /> .appendTo($('#foo'))<br /> .show('slow');<br /></script><br />[Event, AJAX]<br /><button id="btn">Click</button><br /><div id="foo"></div><br /><script src="jquery-1.5.1.min.js"></script><br /><script><br />$('#btn').click(function(e){<br /> $.getJSON('/path/to/json', function(data) {<br /> // do something with data<br /> });<br />});<br /></script><br />
  6. 6. Integrates with MS Products<br />Starts from Visual Studio® 2008 SP1<br />jQuery code intellisense<br />Microsoft CDN also supports intellisense (VS2010)<br />http://ajax.microsoft.com/ajax/jquery/jquery-1.5.1.min.js<br />
  7. 7. jQuery Control for ASP.NET<br />Implements ASP.NET toolkits with jQuery<br />AJAX Control Toolkit<br />Client Templates<br />…<br />
  8. 8. Community Engagement<br />Created proposals to jQuery developer forum<br />template、globalization、datalink<br />jQuery accepted them as official plugins:<br />http://github.com/jquery/jquery-tmpl<br />http://github.com/jquery/jquery-global<br />http://github.com/jquery/jquery-datalink<br />
  9. 9. jQuery Template<br />Project: https://github.com/jquery/jquery-tmpl<br />Document: http://api.jquery.com/category/plugins/templates/<br />CDN: http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js<br />Render template with Array or Object.<br />Simple template syntax<br />
  10. 10. Templates<br />3 ways to prepare the template:<br />$('<div>${foo}</div><div>${bar}</div>').tmpl(data)<br /><script id="my-tmpl" type="text/x-jquery-tmpl"><div>${foo}</div><div>${bar}</div></script><script> $('#my-tmpl').tmpl(data)...</script><br /><div id="my-tmpl" style="display:none">${foo} says ${bar}.</div><script>$('#my-tmpl').tmpl(data)...</script><br />
  11. 11. Template Syntax<br />${variableOrExpression}<br />{{html variableOrExpression}}<br />Output HTML content<br />{{if}} {{else}} {{/if}}<br />Conditional tags. (else could be used as `else if`)<br />{{each data}} ${$index} ${$value} {{/each}}<br />Iterate over an array or object<br />{{tmpl template}} ... {{/tmpl}}<br />Composite templates<br />{{wrap template}} ... {{/wrap}}<br />Wrap with another template<br />
  12. 12. jQuery Template Sample<br /><script src="jquery-1.5.1.min.js"></script><br /><script src="jquery.tmpl.min.js"></script><br /><script id="message-tmpl" type="text/x-jquery-tmpl"><br /> <li class="message-item"><br /> <h4 class="message-name">${UserId}</h4><br /> <div class="message-content">${Comment}</div><br /> <div class="message-time">${PostTime}</div><br /> </li><br /></script><br />...<br /><script><br /> $.post('/path/to/post', { ... }, function(resp) {<br />$('#message-tmpl').tmpl(resp)<br /> .appendTo($('#message-list'));<br /> });<br /></script><br />
  13. 13. jQuery Template Sample<br /><script id="message-tmpl" type="text/x-jquery-tmpl"><br /> <li class="message-item"><br /> <h4 class="message-name">${UserId}</h4><br /> <div class="message-content"><br />{{html $item.NL2BRComment()}<br /> </div><br /> <div class="message-time">${PostTime}</div><br /> </li><br /></script><br />...<br /><script><br /> $.post('/path/to/post', { ... }, function(resp) {<br />$('#message-tmpl').tmpl(resp, {<br /> NL2BRComment: function() {<br /> return this.data.Comment.replace(/n/g, '<br>');<br /> }<br /> })<br /> .appendTo($('#message-list'));<br /> });<br /></script><br />
  14. 14. jQueryDatalink<br />Project: https://github.com/jquery/jquery-datalink<br />Document: http://api.jquery.com/category/plugins/data-link/<br />Link fields from one object to another automatically.<br />
  15. 15. jQueryDatalink Sample<br /><script src="jquery-1.5.1.min.js"></script><br /><script src="jquery.datalink.js"></script><br /><form><br /> <input type="text" name="userid"><br /> <input type="text" name="text"><br /></form><br /><script><br />var foo = {};<br />$('form').link(foo);<br />$('input[name=userid]').val('ericsk');<br />alert(foo.userid); // ericsk<br />$(foo).setField('text', 'kscire');<br />$('input[name=text]').val(); // kscire<br /></script><br />
  16. 16. jQueryGlobalzation<br />Project: https://github.com/jquery/jquery-global<br />Used to make page i18n.<br />$.global.cultures defines “culture” of each locale, such as number format, calendar format, etc.<br />Set $.global.culture to switch locale<br />Localize words (tokens)<br />
  17. 17. [Global] Date Format<br />// 2011/03/25<br />vardateStrEn = $.global.format(<br /> new Date(2011, 3, 25),<br /> 'yyyy/MM/dd'<br />);<br />// 2011年3月25日<br />var $zhTW = $.global.cultures['zh-TW'];<br />vardateStrZhTW = $.global.format(<br /> new Date(2011, 3, 25),<br /> $zhTW.calendars.standard.patterns.D,<br /> $zhTW<br />);<br />
  18. 18. [Global] Localize Words<br />$.global.localize('trans', 'zh-TW', {<br /> 'Hello': '哈囉',<br />'world': '世界'<br />});<br />$.global.localize('trans', 'ja', {<br />'Hello': 'こんにちは',<br />'world': '世界'<br />});<br />vartz = $.global.localize('trans', 'zh-TW');<br />alert(tz.Hello + ', ' + tz.world); // 哈囉, 世界<br />vartj = $.global.localize('trans', 'ja');<br />alert(tz.Hello + ', '+ tz.world); //こんにちは, 世界<br />
  19. 19. JSDefer<br />https://github.com/BorisMoore/JsDefer<br />Deferred script loader<br />$.defer('/path/to/js')<br /> .done(function() { <br /> // DO something<br /> })<br /> .fail(function() {<br /> // DO something when fail<br /> });<br />
  20. 20. Future<br />Watch Boris Moore’s repositories:<br />https://github.com/BorisMoore<br />
  21. 21. Ads<br />Try Visual Web Developer® Express FREE<br />http://www.microsoft.com/express/Web/<br />BizSpark / DreamSpark for Startups!<br />http://www.microsoft.com/taiwan/bizspark/<br />http://www.microsoft.com/taiwan/dreamspark/<br />

×