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

精华好帖回顾
· E&E -- 无油无面粉零难度 -- 香橙杏仁蛋糕 (2011-12-12) 闲夏采薇	· TIGUAN 项目竣工了 2012年继续更新 V4.1地图上路.. 第8页 (2011-3-23) morningsun
· 泳池水泵修理记 (2014-12-30) daniello	· 【美食接龙】第3棒~ 鱿鱼两吃: 玉环酿&金封碎-接棒食材- 鲜虾- tritri 请接棒啦~ (2009-6-1) 闲夏采薇

查看: 1388|回复: 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: