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

精华好帖回顾
· 北海道Kiroro雪场滑雪一周纪实详细 (2014-2-3) VulcanOnIce	· 东京富士山8日7晚自驾流水帐 (2019-11-6) 毛毛和当当
· 第一次自制甜酒酿 (2006-9-21) 月亮	· 以八卦的眼光看历史 (2008-7-16) big_beast

查看: 1419|回复: 2

New jQuery plugin from Microsoft [复制链接]

dalaohu

金靴族

发表于 2010-10-6 10: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: