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

Like this? Share it with your network

Share

Microsoft and jQuery

on

  • 23,332 views

Show Microsoft's jQuery plugins.

Show Microsoft's jQuery plugins.

Statistics

Views

Total Views
23,332
Views on SlideShare
4,379
Embed Views
18,953

Actions

Likes
12
Downloads
90
Comments
0

14 Embeds 18,953

http://blog.ericsk.org 18624
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 Presentation Transcript

  • 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(/n/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/