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

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

页面效果

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">