Your SlideShare is downloading. ×
Microsoft and jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Microsoft and jQuery

23,413
views

Published on

Show Microsoft's jQuery plugins.

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,413
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
93
Comments
0
Likes
12
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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/