百度模板baiduTemplate的使用

最新推荐文章于 2022-09-01 15:31:33 发布

StrongDarkness

最新推荐文章于 2022-09-01 15:31:33 发布

阅读量811

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/strong_darkness/article/details/104973180

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

日常开发中，我们经常遇到一些标准格式，页面布局相似的网页开发，这时，百度模板就解决了我们的问题

首先引入js、css等

 <script src='./js/jquery-3.4.1.min.js'></script>
 <script src='./js/baiduTemplate.js'></script>
 <link rel='stylesheet' href='./jqmath/jqmath-0.4.3.css'>
 <script src='./jqmath/jqmath-etc-0.4.6.min.js' charset='utf-8'></script>
 <link rel='stylesheet' href='./jqmath/ques.css' type='text/css' />
 <link rel="stylesheet" href="./layui/css/layui.css" type="text/css">
 <script src="./layui/layui.js" charset="utf-8"></script>
 <link rel="stylesheet" href="./jqmath/mescroll.min.css">
 <script src="jqmath/mescroll.min.js" charset="utf-8"></script>

然后给需要使用模板的地方加上id

<div id="mescroll" class="mescroll content">
    <ul class="flow-default" id="quesdatalist">
    </ul>
</div>

然后我们来定义这个模板的布局样式

<script id="quesdatalisttemplate" type="text/html">
         <div id="div_quesdetail_<%=quesId%>" class="layui-card">
            <div class="layui-card-body">
                <div class="quesrowcontent questext">
                    <div class="quesrowcontent-left layui-inline">
                         <!-- 题目分数 -->
                         <%if(isShowScore) { %>
                            <div class="quesscore">
                                <span class="quesscorecontent" id="div_quesscore_<%=quesId%>"
                                    onclick="editScore(<%=quesId%>, <%=quesScore%>,<%=isCanEditScore%>);"><%=quesScore%></span>分
                            </div>
                        <%}%>
                        <!-- 大题内容--常理来说必须存在，不做空判断 -->
                        <div id="div_quescontent_<%=quesId%>">
                            <%if(isShowQuesNumber) { %>
                                <span id="div_quesnum_<%=quesId%>">
                                    <%:=quesNumber%>
                                </span>
                            <%}%>
                            <%:=quesContent%>
                        </div>
                        
                        <% if(childQues && childQues.length > 0){ %>
                            <div class="childques">
                                <%for(var i=0;i<childQues.length;i++){%>
                                    <!--有小题就必须有题目内容-->
                                    <div>
                                        <!--小题题号、内容以及分数-->
                                        <%if(childQues[i].isShowQuesNumber) { %>
                                            <span id="div_quesnum_<%=childQues[i].quesId%>">
                                                <%:=childQues[i].quesNumber%>
                                            </span>
                                        <%}%>
                                        <span id="div_quescontent_<%=childQues[i].quesId%>">
                                            <%:=childQues[i].quesContent%>
                                        </span>
                                            <!-- 题目分数 -->
                                        <%if(childQues[i].isShowScore) { %>
                                            <span class="quesscorecontent" id="div_quesscore_<%=childQues[i].quesId%>"
                                                onclick="editScore(<%=childQues[i].quesId%>, <%=childQues[i].isCanEditScore%>);"><%=childQues[i].quesScore%></span>分
                                        <%}%>
                                    </div>
                                <%}%>
                            </div>
                        <%}%>
                    </div>

                    <div class="quesrowcontent-right layui-inline">
                        <%if(isHasVideo) { %>
                        <button id="btn_quesvideo_<%=quesId%>" type="button" onclick="openVideo(<%=quesId%>);"
                            class="quesbtn layui-btn layui-btn-radius">视频</button>
                        <%}%>
                                    <%if(isHasAudio) { %>
                        <button id="btn_quesaudio_<%=quesId%>" type="button" onclick="openAudio(<%=quesId%>);"
                            class="quesbtn layui-btn layui-btn-radius">音频</button>
                        <%}%>
                    </div>
                </div>
                <br />
                <div class="quesrowcontent questext">
                    <div  class="quesrowcontent-left layui-inline">
                        <div id="div_quesanswer">
                            <div id="div_quesanswer_<%=quesId%>">
                                <span class="quesdesctext"><%:=quesAnswerDesc%></span>
                                <span ><%:=quesAnswer%></span>
                                <% if(childQues && childQues.length > 0){ %>
                                    <div class="childques">
                                        <%for(var i=0;i<childQues.length;i++){%>
                                            <%if(childQues[i].quesAnswer && childQues[i].quesAnswer.length > 0){%>
                                                <div>
                                                    <%if(childQues[i].isShowQuesNumber) { %>
                                                        <span>
                                                            <%:=childQues[i].quesNumber%>
                                                        </span>
                                                    <%}%>
                                                    <span id="div_quesanswer_<%=childQues[i].quesId%>">
                                                        <%:=childQues[i].quesAnswer%>
                                                    </span>
                                                </div> 
                                            <%}%>
                                        <%}%>
                                    </div>
                                <%}%>
                            </div>
                        </div>
                        
                        <div id="div_quesparse">
                            <div id="div_quesparse_<%=quesId%>">
                                <span class="quesdesctext"><%:=quesParseDesc%></span>
                                <span ><%:=quesParse%></span>
                            </div>
                            <% if(childQues && childQues.length > 0){ %>
                                <div class="childques">
                                    <%for(var i=0;i<childQues.length;i++){%>
                                        <%if(childQues[i].quesParse && childQues[i].quesParse.length > 0){%>
                                            <div>
                                                <%if(childQues[i].isShowQuesNumber) { %>
                                                    <span>
                                                        <%:=childQues[i].quesNumber%>
                                                    </span>
                                                <%}%>
                                                <span id="div_quesparse_<%=childQues[i].quesId%>">
                                                    <%:=childQues[i].quesParse%>
                                                </span>
                                            </div>
                                        <%}%>
                                    <%}%>
                                </div>
                            <%}%>
                        </div>
                    </div>
                    <div class="quesrowcontent-right layui-inline">
                        <div>
                            <button id="btn_quesadd_<%=quesId%>"
                                style="display:<%if(isAddToCart) { %> none <%}else{%>inline<%}%>" onclick="addQues(<%=quesId%>);"
                                type="button" class="quesbtn layui-btn layui-btn-radius">添加</button>
                            <button id="btn_quesdel_<%=quesId%>"
                                style="display:<%if(isAddToCart) { %> inline <%}else{%>none<%}%>" onclick="delQues(<%=quesId%>);"
                                type="button" class="quesbtn layui-btn layui-btn-radius">移除</button>
                        </div>
                        <%if(isHasParseVideo) { %>
                        <br />
                        <div>
                            <button id="btn_quesparsevideo_<%=quesId%>" type="button" onclick="openParseVideo(<%=quesId%>);"
                                class="quesbtn layui-btn layui-btn-radius">解析视频</button>
                        </div>
                        <%}%>
                    </div>
                </div>
            </div>
        </div>
        </script>

最后使用模板，添加数据

<script type="text/javascript">
        var bt = baidu.template;

        var data = [{
                "quesId": 1,
                "quesType": "",
                "isHasVideo": false,
                "isHasAudio": false,
                "isHasParseVideo": false,
                "isShowScore": false,
                "isCanEditScore": false,
                "isShowQuesNumber": true,
                "rightFlag":0,
                "quesPoint": 100,
                "quesScore": 100,
                "quesNumber": "1.",
                "quesAnswerDesc":"正确答案：",
                "quesContent": "<span class=\"qml-an-sq\"><span class=\"qml-an\"><span style=\"\">（1）｛</span><img src=\"http://qbm-images.oss-cn-hangzhou.aliyuncs.com/QBM/2016/2/17/1573972044849152/1573972051058688/ANSWER/369696ff2033464088671a7d1afa9da1.png\" wmf=\"http://static.zujuan.com/Upload/2016-02/17/3067cd1d-8904-47b1-999f-08fbb5069af2/resource.files/image3067cd1d-8904-47b1-999f-08fbb5069af235.wmf\"><span style=\"\">……｝</span><p style=\"\"><span style=\"\">（2）｛</span><img src=\"http://qbm-images.oss-cn-hangzhou.aliyuncs.com/QBM/2016/2/17/1573972044849152/1573972051058688/ANSWER/535ec723a41f4864824ce638ba93b49d.png\" wmf=\"http://static.zujuan.com/Upload/2016-02/17/3067cd1d-8904-47b1-999f-08fbb5069af2/resource.files/image3067cd1d-8904-47b1-999f-08fbb5069af236.wmf\"><span style=\"\">……｝</span></p><p style=\"\"><span style=\"\">（3）｛</span><img src=\"http://qbm-images.oss-cn-hangzhou.aliyuncs.com/QBM/2016/2/17/1573972044849152/1573972051058688/ANSWER/d8f0928982924e26b16c50846777b8ed.png\" wmf=\"http://static.zujuan.com/Upload/2016-02/17/3067cd1d-8904-47b1-999f-08fbb5069af2/resource.files/image3067cd1d-8904-47b1-999f-08fbb5069af237.wmf\"><span style=\"\">……｝</span></p></span></span><br>",
                "quesAnswer": "小兔子采蘑菇。<br />",
                "studentAnswerDesc":"TA的答案：",
                "studentAnswer":"",
                "quesParseDesc":"",
                "isAddToCart ":false,
                "quesParse": "",
                "childQues": [{
                    "quesId": 1,
                    "isShowScore": true,
                    "isCanEditScore": false,
                    "isShowQuesNumber": true,
                    "quesScore": 100,
                    "quesNumber": "1.",
                    "studentAnswer":"studentAnswer1",
                    // "quesContent": "小兔子采蘑菇1。",
                    "quesContent":"<span class=\"qml-an-sq\"><span class=\"qml-an\"><span style=\"\">（1）｛</span><img src=\"http://qbm-images.oss-cn-hangzhou.aliyuncs.com/QBM/2016/2/17/1573972044849152/1573972051058688/ANSWER/369696ff2033464088671a7d1afa9da1.png\" wmf=\"http://static.zujuan.com/Upload/2016-02/17/3067cd1d-8904-47b1-999f-08fbb5069af2/resource.files/image3067cd1d-8904-47b1-999f-08fbb5069af235.wmf\"><span style=\"\">……｝</span><p style=\"\"><span style=\"\">（2）｛</span><img src=\"http://qbm-images.oss-cn-hangzhou.aliyuncs.com/QBM/2016/2/17/1573972044849152/1573972051058688/ANSWER/535ec723a41f4864824ce638ba93b49d.png\" wmf=\"http://static.zujuan.com/Upload/2016-02/17/3067cd1d-8904-47b1-999f-08fbb5069af2/resource.files/image3067cd1d-8904-47b1-999f-08fbb5069af236.wmf\"><span style=\"\">……｝</span></p><p style=\"\"><span style=\"\">（3）｛</span><img src=\"http://qbm-images.oss-cn-hangzhou.aliyuncs.com/QBM/2016/2/17/1573972044849152/1573972051058688/ANSWER/d8f0928982924e26b16c50846777b8ed.png\" wmf=\"http://static.zujuan.com/Upload/2016-02/17/3067cd1d-8904-47b1-999f-08fbb5069af2/resource.files/image3067cd1d-8904-47b1-999f-08fbb5069af237.wmf\"><span style=\"\">……｝</span></p></span></span><br>",
                    "quesAnswer": "小兔子采蘑菇1。<br />",
                    "quesParse": "",
                }, {
                    "quesId": 2,
                    "isShowScore": true,
                    "isCanEditScore": false,
                    "isShowQuesNumber": true,
                    "quesScore": 100,
                    "quesNumber": "2",
                    "studentAnswer":"studentAnswer2",
                    "quesContent": "小兔子采蘑菇2。",
                    "quesAnswer": "小兔子采蘑菇2。<br />",
                    "quesParse": "",
                }]
        }];
        window.onload=function(){
            setListData(data,10)
        }
        var mescroll = new MeScroll("mescroll", {
            down: {
                use: false
            },
            up: {
                use: true,
                auto: true,
                page: {
                    num: 0,
                    size: 20
                },
                callback: upCallback //上拉加载的回调
            }
        });

        function upCallback(page) {
            // djtMdMQuesLocal.loadData(page.num, page.size);
        }

        // /*设置列表数据*/
        function setListData(curPageDataStr, totalPage) {
            // var curPageData = JSON.parse(curPageDataStr);
            var curPageData = curPageDataStr;
            mescroll.endByPage(curPageData.length, totalPage);
            // mescroll.endSuccess(curPageData.length);
            for (var i = 0; i < curPageData.length; i++) {
                var getTpl = bt(quesdataitemtemplate.innerHTML, curPageData[i]);
                $('#quesdatalist').append(getTpl)
            }
        }

        function loadDataFail() {
            mescroll.endErr();
        }

        function startLoadData() {
            mescroll.triggerUpScroll();
        }

        function clearData() {
            mescroll.resetUpScroll(false);
            $("#quesdatalist").empty();
        }

        function openParseVideo(quesId) {
            djtMdMQuesLocal.openParseVideo(quesId);
        }

        function addQues(quesId) {
            document.getElementById("btn_quesadd_" + quesId).style.display = "none";
            document.getElementById("btn_quesdel_" + quesId).style.display = "inline";
            djtMdMQuesLocal.addQues(quesId);
        }

        function delQues(quesId) {
            document.getElementById("btn_quesadd_" + quesId).style.display = "inline";
            document.getElementById("btn_quesdel_" + quesId).style.display = "none";
            djtMdMQuesLocal.delQues(quesId);
        }

        function refreshOptions(selectQuesIdStr) {
            var addBtnItemArr = $("[id^=btn_quesadd_]");
            if (addBtnItemArr && addBtnItemArr.size() > 0) {
                for (var i = 0; i < addBtnItemArr.size(); i++) {
                    var addBtnItem = addBtnItemArr[i];
                    var quesId = addBtnItem.id.substring(addBtnItem.id.lastIndexOf("_") + 1);
                    if (selectQuesIdStr.indexOf("_" + quesId + "_")) {
                        document.getElementById("btn_quesadd_" + quesId).style.display = "none";
                        document.getElementById("btn_quesdel_" + quesId).style.display = "inline";
                    } else {
                        document.getElementById("btn_quesadd_" + quesId).style.display = "inline";
                        document.getElementById("btn_quesdel_" + quesId).style.display = "none";
                    }
                }
            }
        }
    </script>

最终实现效果
效果图

StrongDarkness

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度模板baiduTemplate的使用

日常开发中，我们经常遇到一些标准格式，页面布局相似的网页开发，这时，百度模板就解决了我们的问题首先引入js、css等 <script src='./js/jquery-3.4.1.min.js'></script> <script src='./js/baiduTemplate.js'></script> <link rel='styl...
复制链接

扫一扫