新足迹 › 论坛 › 兴趣爱好区 › IT与科技 › AI 相关 › New jQuery plugin from Microsoft

精华好帖回顾
· 好区的Unit还是差一档次区的house? **56~60楼坑已填！5月12日 Rowville看房报告 (2007-3-17) Mylittlelover	· 更换X5空气悬挂（另一边，所以说要换两边应该一起换） (2016-8-1) Simonjo
· 十七回目 – しまなみ海道，以及冈山山口佐贺长崎福冈 (2026-4-24) joaquin	· SUZUKI(铃木)儿童音乐教育法 (2008-8-12) daffodil

查看: 1511|回复: 2

New jQuery plugin from Microsoft [复制链接]

dalaohu

金靴族

发表于 2010-10-6 09:42 |显示全部楼层

此文章由 dalaohu 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 dalaohu 所有！转贴必须注明作者、出处和本声明，并保持内容完整

微軟現在也開始向jquery裡添加新的plugin。

這個jQuery template 是其中的一個，上次有同學問道，現在有第一方的插件了。

http://stephenwalther.com/blog/a ... osoft-ajax-cdn.aspx

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

<style type="text/css">

html {
      background-color:Orange;
}

#catBox div {
      width:250px;
      height:250px;
      border:solid 1px black;
      background-color:White;
      margin:5px;
      padding:5px;
      float:left;
}

#catBox img {
      width:200px;
      height: 200px;
}

</style>

</head>
<body>

<h1>Cat Photos!</h1>

<div id="catBox"></div>

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

<script id="catTemplate" type="text/x-jquery-tmpl">
      <div>
         <b>${title}</b>
         <br />
         <img src="${media.m}" />
      </div>
</script>

<script type="text/javascript">
      var url = "http://api.flickr.com/services/feeds/groups_pool.gne?id=44124373027@N01&lang=en-us&format=json&jsoncallback=?";

      // Grab some flickr images of cats
      $.getJSON(url, function (data) {
         // Format the data using the catTemplate template
         $("#catTemplate").tmpl(data.items).appendTo("#catBox");
      });

</script>

</body>

This page displays a list of cats retrieved from Flickr: