JavaScript模板引擎--art-template

网址：http://aui.github.io/art-template/docs/

1、在对应网址下载js文件art-template.js，并引入<script src="./resources/art-template.js"></script>

2、定义对应的模板
    //插入的为HTML，所以type取值“text/html”，取值方式{{属性名}}
    <script type="text/html" >
        <h5 class="text-truncate">{{bookName}}</h5>
         <img class="img-fluid" src="{{cover}}">
    </script>

3、通过ajax后台调用，返回json格式循环遍历
    ...    
    success：function(json){
        var list = json.records;
        for(var i = 0 ; i < list.length ; i++){
             var book = json.records[i];
             //将数据结合tpl模板,生成html；其中tpl为模板中的id
             var html = template("tpl" , book);
             $("#bookList").append(html);
        }
    }  
    ...

jquery评分插件jquery.raty.js

1、使用方式：引入以下文件
<script type="text/javascript" src="./static/js/jquery.min.js"></script>
<script type="text/javascript" src="./static/raty/lib/jquery.raty.min.js"></script>

2、HTML结构
　　<div style="500px; margin:100px auto;">
　　　　<div class="demo">
    　　　　<div ></div>
    　　　　<div ></div>
　　　　</div>
　　　　<div class="demo">
　　　　　　<div ></div>
　　　　　　<div ></div>
　　　　</div>
　　</div>
3、js调用
    $(function() {
    $.fn.raty.defaults.path = 'lib/img';
    $('#function-demo').raty({
        number: 5, //多少个星星设置
        targetType: 'hint', //类型选择，number是数字值，hint，是设置的数组值
        path: 'demo/img',
        hints: ['差', '一般', '好', '非常好', '全五星'],
        cancelOff: 'cancel-off-big.png',
        cancelOn: 'cancel-on-big.png',
        size: 24,
        starHalf: 'star-half-big.png',
        starOff: 'star-off-big.png',
        starOn: 'star-on-big.png',
        target: '#function-hint',
        cancel: false,
        targetKeep: true,
        targetText: '请选择评分',
        click: function(score, evt) {
            alert('ID: ' + $(this).attr('id') + "
score: " + score + "
event: " + evt.type);
        }
    });
    $('#function-demo1').raty({
        number: 10, //多少个星星设置
        score: 2, //初始值是设置
        targetType: 'number', //类型选择，number是数字值，hint，是设置的数组值
        path: 'demo/img',
        cancelOff: 'cancel-off-big.png',
        cancelOn: 'cancel-on-big.png',
        size: 24,
        starHalf: 'star-half-big.png',
        starOff: 'star-off-big.png',
        starOn: 'star-on-big.png',
        target: '#function-hint1',
        cancel: false,
        targetKeep: true,
        precision: false, //是否包含小数
        click: function(score, evt) {
            alert('ID: ' + $(this).attr('id') + "
score: " + score + "
event: " + evt.type);
        }
    });
});

JavaScript模板引擎--art-template

相关推荐