Microsoft and jQuery
Upcoming SlideShare
Loading in...5
×
 

Microsoft and jQuery

on

  • 23,248 views

Show Microsoft's jQuery plugins.

Show Microsoft's jQuery plugins.

Statistics

Views

Total Views
23,248
Views on SlideShare
4,333
Embed Views
18,915

Actions

Likes
12
Downloads
90
Comments
0

14 Embeds 18,915

http://blog.ericsk.org 18586
http://infuture.pixnet.net 255
http://feeds2.feedburner.com 44
http://webcache.googleusercontent.com 9
http://feeds.feedburner.com 6
http://dashboard.bloglines.com 4
http://xianguo.com 3
http://static.slidesharecdn.com 2
http://www.mefeedia.com 1
http://tw.mg30.mail.yahoo.com 1
http://blog.ericsk.org} {645539147|||pingback 1
http://translate.googleusercontent.com 1
http://131.253.14.250 1
http://cache.baiducontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Microsoft and jQuery Microsoft and jQuery Presentation Transcript

  • Microsoft與jQuery社群的親密接觸
    上官林傑 (ericsk)
    @ OSDC.tw 2011
  • 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
  • Outlines
    What’s jQuery?
    jQueryIntegration in Microsoft Products
    Microsoft’s Contributions to jQuery
  • 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.
  • 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>
  • 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
  • jQuery Control for ASP.NET
    Implements ASP.NET toolkits with jQuery
    AJAX Control Toolkit
    Client Templates

  • 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
  • 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
  • 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>
  • 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
  • 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>
  • 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>
  • 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.
  • 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>
  • 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)
  • [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
    );
  • [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); //こんにちは, 世界
  • JSDefer
    https://github.com/BorisMoore/JsDefer
    Deferred script loader
    $.defer('/path/to/js')
    .done(function() {
    // DO something
    })
    .fail(function() {
    // DO something when fail
    });
  • Future
    Watch Boris Moore’s repositories:
    https://github.com/BorisMoore
  • 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/