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

Microsoft and jQuery

on

  • 23,130 views

Show Microsoft's jQuery plugins.

Show Microsoft's jQuery plugins.

Statistics

Views

Total Views
23,130
Views on SlideShare
4,290
Embed Views
18,840

Actions

Likes
12
Downloads
89
Comments
0

14 Embeds 18,840

http://blog.ericsk.org 18513
http://infuture.pixnet.net 253
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/