EasyUI Tabs

<!DOCTYPE html>
<html>
<head>
    <title>吹泡泡的魚-主页</title>
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/gray/easyui.css">
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/icon.css">
    <script type="text/javascript" src="js/jquery-easyui/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <div style="margin-bottom:10px">
        <a href="#" class="easyui-linkbutton" onclick="showIcon()">标签页显示小图标</a>
        <a href="#" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')">jquery</a>
        <a href="#" class="easyui-linkbutton" onclick="addTab('easyui','http://jeasyui.com/')">easyui</a>
        <a href="#" class="easyui-linkbutton" onclick="addTab('url','xx/xx.action')">url访问</a>
    </div>
    <div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
        <div title="Home"></div>
    </div>

    <script type="text/javascript">
        //使用 'exists' 方法来判断 tab 是否已经存在，如果已存在则激活 tab。如果不存在则调用 'add' 方法来添加一个新的 tab 面板
        function addTab(title, url){
            if ($('#tt').tabs('exists', title)){
                $('#tt').tabs('select', title);
            } else {
                if(title=="url"){
                    $('#tt').tabs('add',{
                        title:title,
                        href:url,
                        closable:true
                    });
                }else{
                    var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
                    $('#tt').tabs('add',{
                        title:title,
                        content:content,
                        closable:true
                    });
                }
                
            }

        }
        //在新的标签页面板后方显示小图标
        function showIcon(){
            $('#tt').tabs('add',{
                title:'New Tab',
                content:'Tab Body',
                closable:true,
                tools:[{
                    iconCls:'icon-add',
                    handler:function(){
                        alert('add')
                    }
                },{
                    iconCls:'icon-save',
                    handler:function(){
                        alert('save')
                    }
                }]
            });
        }
    </script>
</body>
</html>
猜你喜欢
