首页 > 其他 > 详细

模板引擎(案例)

时间:2019-11-17 23:45:52      阅读:114      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>落网</title>

    <style type="text/css">
        .item {
            width: 640px;
            /* height: 452px; */
            background-color: #eee;
            margin-top: 50px;
            border-radius: 5px;
            overflow: hidden;
        }

        .item .cover {
            display: block;
        }

        .item .cover img {
            display: block;
        }

        .item .bottom {
            height: 35px;
            position: relative;
        }

        .item .bottom a {
            text-decoration: none;
            line-height: 35px;
            font-family: ‘微软雅黑‘;
            margin-left: 20px;
            color: gray;
        }

        .item .bottom .rightBox {
            position: absolute;
            top: 0px;
            right: 0px;
            height: 100%;
        }

        .item .bottom .rightBox span {
            line-height: 35px;
            margin: 0 20px;
            font-size: 15px;
            /* font-family: "微软雅黑"; */
            color: gray;
        }

        .item .bottom .rightBox span::before {
            margin-right: 10px;
            color: #dd5a64;
        }

        .left-control {
            position: fixed;
            right: 100px;
            top: 50%;
            transform: translateY(-50%);
        }

        #getMore {
            width: 100px;
            height: 100px;
            border: none;
            text-align: center;
            line-height: 100px;
            cursor: pointer;
        }

        #getSome {
            width: 100px;
            height: 100px;
            border: none;
            text-align: center;
            line-height: 100px;
            cursor: pointer;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="css/font-awesome.css">
</head>

<body>
    <div class="left-control">
        <h2>加载一张</h2>
        <div id=‘getMore‘ class="icon-download icon-4x"></div>
        <!--<div id=‘getMore‘ class="icon-spinner icon-spin icon-4x"></div>-->
        <h2>加载多张</h2>
        <div id=‘getSome‘ class="icon-download icon-4x"></div>
    </div>
    <div class="container">
        <div class="item">
            <a href="#" class=‘cover‘><img src="images/vol.859.jpg" alt=""></a>
            <div class="bottom">
                <a href="#">vol.847 用一首歌来想象你</a>
                <div class=‘rightBox‘>
                    <span class=‘icon-heart‘>18554</span>
                    <span class=‘icon-comment‘>292</span>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

<!-- 1.使用jQuery 发送ajax请求 -->
<script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
<!--
        步骤
            0.导入模板引擎
            1.定义模板
            2.挖坑 起名字
                挖坑 一般是取决于 数据
            3.填坑
                数据 服务器 ajax
                回调函数
            4.使用
    -->
<!--  导入模板引擎  -->
<script src=‘./js/template-web.js‘></script>
<!-- 定义模板  -->
<script type=‘text/html‘ id=‘template‘>
    
    <div class="item">
                <a href="#" class="cover"><img src="{{path}}" alt=""></a>
                <div class="bottom">
                    <a href="#">{{name}}</a>
                    <div class="rightBox">
                        <span class="icon-heart">{{star}}</span>
                        <span class="icon-comment">{{message}}</span>
                    </div>
            </div>
    </div>
</script>

<script>
    // 获取数据
    $(function(){
        $(#getMore).click(function(){
            $.ajax({
                url:_api/luowang.php,
                data:{
                    index:3
                },
                success:function(data){
                    console.log(data);
                    // 填坑
                 var result =    template(template,data.item);
                    console.log(result);
                    $(.container).append(result);
                }
            })
        })

        // 获取多条
        $(#getSome).click(function(){
            $.ajax({
                url:_api/luowang_getSome.php,
                data:{
                    num:Math.floor((16*Math.random()))
                },
                success:function(data){
                        console.log(data);
                        // 循环 填坑
                        for(var i =0;i<data.items.length;i++){
                            // 填坑 使用
                            $(.container).append(template(template,data.items[i]));
                        }
                }
            })
        })
    })
</script>

 

模板引擎(案例)

原文:https://www.cnblogs.com/qtbb/p/11879267.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!