EasyUI系列—点击按钮加载tabs_day26

我们先来看下效果图

 

1.为div添加点击事件(也可使用jQuery绑定事件)

<div id="mm2" style="100px;">
                    <div onclick="my()">我的信息</div>
                    <div onclick="changePassword()">修改密码</div>
                    <div class="menu-sep"></div>
                    <div onclick="logoutFun()">退出系统</div>
</div>

 2. 编写函数。

首先判断tabs里是否已经有‘我的信息’存在，若存在，则选中它。（此操作为避免重复点击出现多个tab选项）

如:

if ($("#tabs").tabs('exists', '我的信息')) {// 判断tab是否存在
             $('#tabs').tabs('select', '我的信息'); // 切换tab
          } else {}

 3.创建标签页：两种方式，

　　1、通过标记创建标签页（Tabs）：把 'easyui-tabs' class 添加到 <div> 标记。每个标签页面板（tab panel）通过子 <div> 标记被创建

　　2、编程创建标签页（Tabs）：通过编写代码 $.fn.tabs.defaults 重写默认的 defaults。

在这里我们使用的是第二种方法：

$('#tabs').tabs('add', {
            title: '我的信息',//标题
            content: content,//内容
            closable: true,//可闭化
            selected: true,//默认选中
            tools: [{
                iconCls: 'icon-reload', // 刷新按钮
                handler: function () {
                    var tab = $('#tabs').tabs('getTab', '我的信息');
                    $("iframe[src='" + myurl + "']").get(0).contentWindow.location.reload(true);
                }
            }]
        });

了解其他属性请点击这里

 最终实现函数代码:  

<script>
    //我的信息
    function my() {
        if ($("#tabs").tabs('exists', '我的信息')) {// 判断tab是否存在
            $('#tabs').tabs('select', '我的信息'); // 切换tab
        } else {
            var myurl = 'pages/Info.jsp';//我的信息页面地址
            /*content：内容*/
            var content = '<div style="100%;height:100%;overflow:hidden;">'
                + '<iframe src="'
                + myurl
                + '" scrolling="auto" style="100%;height:100%;border:0;" ></iframe></div>';

            $('#tabs').tabs('add', {
                title: '我的信息',//标题
                content: content,//内容
                closable: true,//可闭化
                selected: true,//默认选中
                tools: [{
                    iconCls: 'icon-reload', // 刷新按钮
                    handler: function () {
                        var tab = $('#tabs').tabs('getTab', '我的信息');
                        $("iframe[src='" + myurl + "']").get(0).contentWindow.location.reload(true);
                    }
                }]
            });

        }
    }


</script>

4.扩展操作：为tabs添加右击事件，右击实现关闭窗口。

在主页编写右击绑定

<%--绑定右击--%>
<div id="rclick" class="easyui-menu" style="100px;">
    <div data-options="name:'Close'">关闭当前窗口</div>//name:  根据name编写实现代码
    <div data-options="name:'CloseOthers'">关闭其它窗口</div>
    <div class="menu-sep"></div>
    <div data-options="name:'CloseAll'">关闭全部窗口</div>
</div>

 为选项卡添加右击菜单

// 为选项卡，添加右键菜单
    $('#tabs').tabs({
        onContextMenu : function(e,title,index){
            currentRightTitle = title ;
            $('#rclick').menu('show', {
                left: e.pageX,
                top: e.pageY
            });
            e.preventDefault(); // 禁用原来的右键效果
        }
    });

实现右击关闭效果

//实现右击关闭效果
    $('#rclick').menu({
        onClick:function(item){
            if(item.name==='Close'){//关闭当前
                $('#tabs').tabs('close',currentRightTitle);
            }else if(item.name === 'CloseOthers'){//关闭其他
                var tabs = $('#tabs').tabs('tabs');
                $(tabs).each(function(){
                    //做出判断，除标题为消息中心外所有panel关闭
                    if($(this).panel('options').title != '消息中心' && $(this).panel('options').title != currentRightTitle){
                        $('#tabs').tabs('close',$(this).panel('options').title);
                    }
                });
            }else if(item.name === 'CloseAll'){//关闭全部
                var tabs = $('#tabs').tabs('tabs');
                $(tabs).each(function(){
                    if($(this).panel('options').title != '消息中心'){
                        $('#tabs').tabs('close',$(this).panel('options').title);
                    }
                });
            }
        }
    });