template jquery

using jquery-template plugin(example) template,jquery,data,x-jquey-tmpl,tmpl,appendTo,jquery.tmpl

by Ekaterina Klimovich

HTML

<script src="http://www.debugni.ru/js/jquery.tmpl.min.js"></script>
<div class="control-panel">
    <div id="bag-for-strap">
    </div>
    <br/>
    <a href="www.debugni.ru" class="site">www.debugni.ru</a>
</div>

<script id="strapTmpl" type="text/x-jquery-tmpl">
    <div class="strap-cont">
        <img src="${img}"/>
        <div class="strap-about">
            <h2>
                ${title}
            </h2>
            <p>
                Model: ${model}<br />
                Color: ${color}<br />
                Serial Number: ${serialNum}<br />
                Country: ${country}<br />
                Price: ${price}<br/>
                <a href="${link}">Show more...</a>
            </p>
        </div>
    </div>
</script>

CSS

.control-panel{
    border:solid 1px #dddddd;
    margin: 1em;
    padding:1em
}
h2{
    text-decoration: underline;
}
img{
    width: 150px;
    height: 130px
}
.pull-left{
    float:left
}
.bag-for-strap{
        width: 200px
}
.adsense{
    float:right
}
.site{
    text-decoration:none;
    position:absolute;
    top: 2em;
    right: 3em;
    font-size: 0.9em
}

JavaScript

$(document).ready(function(){
           $('#strapTmpl').tmpl(strapItems).appendTo('#bag-for-strap'); 
});


var strapItems = [
    {
        title: 'Suunto strap',
        img: 'http://www.debugni.ru/images/strap/$_12.JPG',
        model: 'Elementum Terra VENTUS',
        color:  'black',
        serialNum: 'SS014826000',
        country: 'Finland',
        price: "$59,77",
        link: "http://www.ebay.com/itm/251630933184?ssPageName=STRK:MESELX:IT&_trksid=p3984.m1555.l2649"
    },
    {
        title: 'Suunto strap',
        img: 'http://www.debugni.ru/images/strap/$_12.JPG',
        model: 'Elementum Terra VENTUS',
        color:  'black',
        serialNum: 'SS014826000',
        country: 'Finland',
        price: "$59,77",
        link: "http://www.ebay.com/itm/251630933184?ssPageName=STRK:MESELX:IT&_trksid=p3984.m1555.l2649"
    },
    {
        title: 'Suunto strap',
        img: 'http://www.debugni.ru/images/strap/$_12.JPG',
        model: 'Elementum Terra VENTUS',
        color:  'black',
        serialNum: 'SS014826000',
        country: 'Finland',
        price: "$59,77",
        link: "http://www.ebay.com/itm/251630933184?ssPageName=STRK:MESELX:IT&_trksid=p3984.m1555.l2649"
    }]