Microsoft與jQuery社群的親密接觸<br />上官林傑 (ericsk)<br />@ OSDC.tw 2011<br />
About myself<br />上官林傑 a.k.a. ericsk<br />Experiences<br />Developer Evangelist @ Microsoft Taiwan2011.03 ~ <br />Organize...
Outlines<br />What’s jQuery?<br />jQueryIntegration in Microsoft Products<br />Microsoft’s Contributions to jQuery<br />
What’s jQuery?<br />http://jquery.comhttps://github.com/jquery<br />Lightweight, powerful, cross-browser JavaScript librar...
jQuery Sample<br />[DOM Manipulation]<br /><div id="foo"></div><br /><script src="jquery-1.5.1.min.js"></script><br /><scr...
Integrates with MS Products<br />Starts from Visual Studio® 2008 SP1<br />jQuery code intellisense<br />Microsoft CDN also...
jQuery Control for ASP.NET<br />Implements ASP.NET toolkits with jQuery<br />AJAX Control Toolkit<br />Client Templates<br...
Community Engagement<br />Created proposals to jQuery developer forum<br />template、globalization、datalink<br />jQuery acc...
jQuery Template<br />Project: https://github.com/jquery/jquery-tmpl<br />Document: http://api.jquery.com/category/plugins/...
Templates<br />3 ways to prepare the template:<br />$('<div>${foo}</div><div>${bar}</div>').tmpl(data)<br /><script id="my...
Template Syntax<br />${variableOrExpression}<br />{{html variableOrExpression}}<br />Output HTML content<br />{{if}} {{els...
jQuery Template Sample<br /><script src="jquery-1.5.1.min.js"></script><br /><script src="jquery.tmpl.min.js"></script><br...
jQuery Template Sample<br /><script id="message-tmpl" type="text/x-jquery-tmpl"><br />    <li class="message-item"><br /> ...
jQueryDatalink<br />Project: https://github.com/jquery/jquery-datalink<br />Document: http://api.jquery.com/category/plugi...
jQueryDatalink Sample<br /><script src="jquery-1.5.1.min.js"></script><br /><script src="jquery.datalink.js"></script><br ...
jQueryGlobalzation<br />Project: https://github.com/jquery/jquery-global<br />Used to make page i18n.<br />$.global.cultur...
[Global] Date Format<br />// 2011/03/25<br />vardateStrEn = $.global.format(<br />    new Date(2011, 3, 25),<br />   'yyyy...
[Global] Localize Words<br />$.global.localize('trans', 'zh-TW', {<br />  'Hello': '哈囉',<br />'world': '世界'<br />});<br />...
JSDefer<br />https://github.com/BorisMoore/JsDefer<br />Deferred script loader<br />$.defer('/path/to/js')<br />   .done(f...
Future<br />Watch Boris Moore’s repositories:<br />https://github.com/BorisMoore<br />
Ads<br />Try Visual Web Developer® Express FREE<br />http://www.microsoft.com/express/Web/<br />BizSpark / DreamSpark for ...
Upcoming SlideShare
Loading in...5
×

Microsoft and jQuery

23,515

Published on

Show Microsoft's jQuery plugins.

Published in: Technology
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
23,515
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
93
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

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 />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×