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

精华好帖回顾
· 爪子痒痒，再发回忆录《二》（lilytop的毽球功） (2007-6-19) lilytop	· 2019 面朝大海, 春暖花开一夏威夷之檀香山Honolulu+茂宜岛 Maui（全篇完） (2019-4-14) Pippa
· 参加活动，来自太平洋小岛的贝壳 (2011-8-9) 小泡泡鱼	· 走马观花－ Vivid Sydney 2013 (2013-5-28) feihong

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