microsoft and jquery

21
MICROSOFT 與 JQUERY 與 與與與與與與 上上上上 (ericsk) @ OSDC.tw 2011

Upload: lin-chieh-shangkuan

Post on 03-Sep-2014

23.184 views

Category:

Documents


1 download

DESCRIPTION

Show Microsoft's jQuery plugins.

TRANSCRIPT

Page 1: Microsoft and jQuery

MICROSOFT與JQUERY社群的親密接觸

上官林傑 (ericsk)@ OSDC.tw 2011

Page 2: Microsoft and jQuery

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

Page 3: Microsoft and jQuery

Outlines What’s jQuery? jQuery Integration in Microsoft Products Microsoft’s Contributions to jQuery

Page 4: Microsoft and jQuery

What’s jQuery? http://jquery.com

https://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.

Page 5: Microsoft and jQuery

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>

Page 6: Microsoft and jQuery

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

Page 7: Microsoft and jQuery

jQuery Control for ASP.NET Implements ASP.NET toolkits with

jQueryAJAX Control ToolkitClient Templates…

Page 8: Microsoft and jQuery

Community Engagement Created proposals to jQuery developer

forumtemplate 、 globalization 、 datalink

jQuery accepted them as official plugins:http://github.com/jquery/jquery-tmplhttp://github.com/jquery/jquery-globalhttp://github.com/jquery/jquery-datalink

Page 9: Microsoft and jQuery

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

Page 10: Microsoft and jQuery

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>

Page 11: Microsoft and jQuery

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

Page 12: Microsoft and jQuery

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>

Page 13: Microsoft and jQuery

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(/\n/g, '<br>'); } }) .appendTo($('#message-list')); });</script>

Page 14: Microsoft and jQuery

jQuery Datalink Project: https://github.com/jquery/jquery-datalink Document:

http://api.jquery.com/category/plugins/data-link/ Link fields from one object to another

automatically.

Page 15: Microsoft and jQuery

jQuery Datalink 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>

Page 16: Microsoft and jQuery

jQuery Globalzation 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)

Page 17: Microsoft and jQuery

[Global] Date Format// 2011/03/25var dateStrEn = $.global.format( new Date(2011, 3, 25), 'yyyy/MM/dd');

// 2011 年 3 月 25 日 var $zhTW = $.global.cultures['zh-TW'];var dateStrZhTW = $.global.format( new Date(2011, 3, 25), $zhTW.calendars.standard.patterns.D, $zhTW);

Page 18: Microsoft and jQuery

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

var tz = $.global.localize('trans', 'zh-TW');alert(tz.Hello + ', ' + tz.world); // 哈囉 , 世界var tj = $.global.localize('trans', 'ja');alert(tz.Hello + ', ' + tz.world); // こんにちは , 世界

Page 19: Microsoft and jQuery

JSDefer https://github.com/BorisMoore/JsDefer Deferred script loader

$.defer('/path/to/js') .done(function() { // DO something }) .fail(function() { // DO something when fail });

Page 20: Microsoft and jQuery

Future Watch Boris Moore’s repositories:

https://github.com/BorisMoore

Page 21: Microsoft and jQuery

Ads Try Visual Web Developer® Express FREEhttp://www.microsoft.com/express/Web/

BizSpark / DreamSpark for Startups!http://www.microsoft.com/taiwan/bizspark/http://www.microsoft.com/taiwan/dreamspark/