jQuery Template Sample

jQuery Templateを利用したサンプルです。HTMLテンプレート部分を<script type="text/x-jquery-tmpl"> で埋め込んでいます。

by m4xout

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> 
<h2>jQuery Templates Sample</h2>

<script id="template" type="text/x-jquery-tmpl">
<ul>
    <li>
        <dl>
            <dt>name : </dt>
            <dd>${name}</dd>
            <dt>age :</dt>
            <dd>${age}</dd>
        </dl>
    </li>
</ul>
</script>

<div id="userList" />

CSS

dl{
    display: -webkit-box;
    margin-bottom: 5px;
}

dt{
    width: 60px;
    margin-left: 5px;
}

dd{
    width: 70px;
}

#userList{
    margin: 30px;
}

JavaScript

$(function () {
  count = 0;
  wordsArray = ["Beta", "Gamma", "Delta", "Alpha"];
  setInterval(function () {
    count++;
    $("#word").fadeOut(400, function () {
      $(this).text(wordsArray[count % wordsArray.length]).fadeIn(400);
    });
  }, 2000);
});