zoukankan      html  css  js  c++  java
  • easyui页签更新

    1.首先引入这个js文件 <script src="/Scripts/tabs.js" type="text/javascript"></script>我直接贴js源码

    /*
    Author:张浩华
    Date:2011.12.27 1:18
    */

    /* 打开一个标签 */
    function OpenTab(title, url, icon){
    /**
    如果这个标题的标签存在,则选择该标签
    否则添加一个标签到标签组
    */
    if($("#tabs").tabs('exists', title)){
    $("#tabs").tabs('select', title);
    }else{
    $("#tabs").tabs('add',{
    title: title,
    content: createTabContent(url),
    closable: true,
    icon: icon
    });
    }
    }

    /* 生成标签内容 */
    function createTabContent(url){
    return '<iframe style="100%;height:100%;" scrolling="auto" frameborder="0" src="' + url + '"></iframe>';
    }

    $(function(){

    //刷新
    $("#m-refresh").click(function(){
    var currTab = $('#tabs').tabs('getSelected'); //获取选中的标签项
    var url = $(currTab.panel('options').content).attr('src'); //获取该选项卡中内容标签(iframe)的 src 属性
    /* 重新设置该标签 */
    $('#tabs').tabs('update',{
    tab:currTab,
    options:{
    content: createTabContent(url)
    }
    })
    });

    //关闭所有
    $("#m-closeall").click(function(){
    $(".tabs li").each(function(i, n){
    var title = $(n).text();
    $('#tabs').tabs('close',title);
    });
    });

    //除当前之外关闭所有
    $("#m-closeother").click(function(){
    var currTab = $('#tabs').tabs('getSelected');
    currTitle = currTab.panel('options').title;

    $(".tabs li").each(function(i, n){
    var title = $(n).text();

    if(currTitle != title){
    $('#tabs').tabs('close',title);
    }
    });
    });

    //关闭当前
    $("#m-close").click(function(){
    var currTab = $('#tabs').tabs('getSelected');
    currTitle = currTab.panel('options').title;
    $('#tabs').tabs('close', currTitle);
    });
    });

     2.父页面html调用位置

    <div class="easyui-tabs" fit="true" border="false" id="tabs">
    <div title="首页">
    <iframe frameborder="0" width="100%" src="about:blank" height="600" id="topPage"
    name="topPage"></iframe>
    </div>
    </div>

    3.//下面因为是在子页面打开的页签所以加了个parent

    function Open(text, url, height) {


    if (parent.$('#tabs').tabs('exists', text)) {
    var tab = $('#tabs').tabs('getSelected');
    alert(33);
    $("#tabs").tabs('update', {
    tab: tab,
    options: {

    href: url
    }
    });
    tab.panel('refresh');
    // parent.$('#tabs').tabs('close', text);
    // parent.$('#tabs').tabs('add', {
    // title: text,
    // closable: true,
    // content: createTabContent(url),
    // url: url
    // });
    //parent.$('#tabs').tabs('select', text);
    } else {
    parent.$('#tabs').tabs('add', {
    title: text,
    closable: true,
    content: createTabContent(url),
    url: url
    });
    }
    }

    子页面调用语句:Open("收藏夹管理", "/Favorites/FavoritesMenuManage.aspx");

  • 相关阅读:
    浅析Vue Router中关于路由守卫的应用以及在全局导航守卫中检查元字段
    react-native 项目配置ts运行环境
    #mobx应用在rn项目中
    react-native TextInput输入框输入时关键字高亮
    react-native-亲测可用插件
    nodejs+express实现图片上传
    cordova图片上传,视频上传(上传多个图片,多个视频)
    cordova图片上传,视频上传(上传单个图片,单个视频)
    移动端如何测试(前端,cordova)
    在mac上将apk包安装到android手机上
  • 原文地址:https://www.cnblogs.com/kexb/p/4679560.html
Copyright © 2011-2022 走看看