kendoui中tabstrip+iframe实现多标签页面

红太狼 2020-11-29 15:39 779阅读 0赞

# kendoui中 tabstrip + iframe 实现多标签页面 #

## 页面效果 ##

1.  展示要实现的页面样式：  
    ![ti1.png][]![这里写图片描述][SouthEast]  
    ![ti2.png][ti1.png]![这里写图片描述][SouthEast 1]  
    如图所示，多个标签页，每个页面都是一个单独的页面，有自己的增删改查等方法，互不影响。

## html代码 ##

1.  首先6个tab页中后五个是iframe，第一个是当前页面grid实现
````
    <div id="tabstrip" style="clear:both">
            <ul>
                <li id="main_tab" class="k-state-active">数据清洗列映射</li> //class="k-state-active" 打开页面展示的第一个tab页 
                <li>数据自定义筛选</li>
                <li>值集验证</li>
                <li>一致性验证</li>
                <li>唯一性验证</li>
                <li>自定义校验</li>
            </ul>
            <div id="div1">
                <div class="pull-left" id="toolbar-btn1" style="padding-bottom:10px;">
                    <button id="new1" class="btn btn-primary k-grid-add" style="float:left;margin-right:5px;" data-bind="click:create"><@spring.message "hap.new"/></button>
                    <button id="save1" class="btn btn-success k-grid-save-changes" data-bind="click:save" style="float:left;margin-right:5px;"><@spring.message "hap.save"/></button>
                    <button id="delete1" data-bind="click:remove" class="btn btn-danger" style="float:left;margin-right:5px;"><@spring.message "hap.delete"/></button>
                    <button id="btn-baseSQL" class="btn btn-primary" style="float:left;">生成基础SQL</button>
                </div>
                <script> kendo.bind($('#toolbar-btn1'), viewModel); $("#btn-baseSQL").click(function () { kendo.ui.showConfirmDialog({ title: '提示', message: '根据已启用的映射生成基础SQL!' }).done(function (e) { if(e.button=='OK'){ var type="BaseSql"; $.ajax({ type: "POST", url: "/v1/organization/dataCleanHeaders/generateBaseSql?headerId="+headerId+"&type="+type, async:false, success: function (data) { headerSet(data); } }) } }) }) </script>
                <div style="clear:both">
                    <div id="grid1"></div>
                </div>
            </div>
            <div id="div2">
                <iframe src="data_filter.html" width="100%" height="486" frameborder="0" allowtransparency="yes"></iframe>
            </div>
            <div id="div3">
                <iframe src='validate_value_set.html' width="100%" height="486" frameborder="0" allowtransparency="yes"></iframe>
            </div>
            <div id="div4">
                <iframe src='validate_uniformity.html' width="100%" height="486" frameborder="0" allowtransparency="yes"></iframe>
            </div>
            <div id="div5">
                <iframe src='validate_unique.html' width="100%" height="486" frameborder="0" allowtransparency="yes"></iframe>
            </div>
            <div id="div6">
                <iframe src='validate_custom.html' width="100%" height="486" frameborder="0" allowtransparency="yes"></iframe>
            </div>
        </div>
````
    6个 li 标签定义的头，下面对应放6个 div ，里面放入内容，也就是相对应的iframe 写上各自的scr，当然其他页面可以有哪些功能，放过来后就有哪些功能 ，毕竟iframe就相当于在浏览器页面中再打开了个小浏览器页面。。。 frameborder="0" 表示边框为0，因为iframe的边框看起来是真的丑。。。allowtransparency="yes" 背景透明，这样就和原页面的背景一样了。

2. 第一个tab页的grid就不说了，然后看其他script代码，很简单，只需要对整个div进行：
````
    $("#tabstrip").kendoTabStrip({
            animation: false  // 弹出效果为false
        });
````
## 子iframe页面调用父页面元素，标签的值等等 ##

子iframe页面调用父页面元素，标签的值等等，只需要在子iframe页面的script中使用parent.各种东西就行了。比如：
    我在父页面中定义了：
````
    <input id=head_input value="123" />
    <script>
        var headerId = 1;
    </script>
    则在子iframe页面中：
    <script>
        var headerId = parent.headerId;
        var i = parent.$("#head_input").val();
        console.log(headerId);  //1
        console.log(i);  //123
    </script>
````
## 关于一个页面中展示其他页面的一些方法的尝试 ##

1.  iframe
    
    在iframe页面中，通过parent定位到父html,可以通过top定位到顶层的html.  
    同级iframe之间调用，需要先定位到父html，再定位到iframe.
2.  jquery的load方法
    
    例如：我之前曾尝试过，变量值可以通过地址栏传值的形式传递过去，相当于异步加载过来，因此很容易起各种id同名，方法同名冲突等，从而不能使用。很蓝瘦。
````
    // grid3 值集验证
        //$("#div3").load('validate_value_set.html?headerId='+headerId);
        // grid4 一致性验证
        //$("#div4").load('validate_uniformity.html?headerId='+headerId);
        // grid5 唯一性验证
        //$("#div5").load('validate_unique.html?headerId='+headerId);
        // 自定义校验
        //$("#div6").load('validate_custom.html?headerId='+headerId);
        // grid2 数据自定义筛选
        //$("#div2").load('data_filter.html?headerId='+headerId);
````
1.  import  
    例如：
````
    <link rel = "import" href = "test1.html"/>
        <srcript>
        // 接收
         var post = document.querySelector("link[rel = 'import']").import;
        // 然后用jquery操作再放到哪里
        </script>
````
1.  include  
    这些就不说了，我自己也没详细尝试。。比如：
````
    <#include "../include/header.html">
````

[SouthEast]: /images/1606664349272.png
[SouthEast 1]: /images/1606664373130.png