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

精华好帖回顾
· 孟加拉生活的进行式（276楼更新）随便走，随便照 (2009-9-3) 蒲公英	· 北疆风光——白哈巴 (2013-12-23) flyingdog12321
· 我读过的一本好书－陈慧的《拾香记》 (2011-8-31) astina	· 熊猫做甜点--水晶桂花羊羹，牛轧糖，焦糖酱，北海道杯子蛋糕，婴儿推车蛋糕，奶瓶蛋糕，甜甜蜜蜜新一年 (2015-2-28) 小白的熊猫

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