分享用easyUI框架

1、我是真的压根不会easyUI，网上下载的demo，看了半天又半天。最后同事给了源码，看了看，研究了下。

首页引用js，把easyUI包导入解决方案中

    <link href="EasyUI/themes/icon.css" rel="stylesheet" />
    <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" />
    <link href="css.css" rel="stylesheet" />
    <script language="javascript" src="EasyUI/jquery-1.8.0.js"></script>
    <script language="javascript" src="EasyUI/jquery.easyui.min.js"></script>
    <script language="javascript" src="EasyUI/easyextend.js"></script>
    <script language="javascript" src="EasyUI/locale/easyui-lang-zh_CN.js"></script>

2、在body里写

    <div region="north" split="true" border="false" style="overflow: hidden; height: 30px; background: url(images/layout-browser-hd-bg.gif) #7f99be repeat-x center 50%; line-height: 20px; color: #fff; font-family: Verdana, 微软雅黑,黑体">
        <span style="padding-left: 10px; font-size: 16px;">
            <img src="/images/blocks.gif" width="20" height="20" align="absmiddle" />
            CRM客户管理信息系统</span>
    </div>
    <div region="south" split="true" style="height: 30px; background: #D2E0F2;">
    </div>


    <div data-options="region:'center',title:''" style="overflow: hidden;">
        <div id="layout_center_tabs" style="overflow: hidden;">
        </div>
        <div id="layout_center_tabsMenu" style="width: 120px; display: none;">
            <div type="refresh">
                刷新
            </div>
            <div type="OpenInNewWindow">
                在新窗口中打开
            </div>
            <div class="menu-sep">
            </div>
            <div type="close">
                关闭
            </div>
            <div type="closeOther">
                关闭其他
            </div>
            <div type="closeAll">
                关闭所有
            </div>
        </div>
    </div>
  <div id="mainPanle" region="center" style="background: #eee; overflow-y: hidden">
        <div id="layout_center_tabs" style="overflow: hidden;">
        </div>


        <div id="layout_center_tabsMenu" style="width: 120px; display: none;">
            <div type="refresh">
                刷新
            </div>
            <div type="OpenInNewWindow">
                在新窗口中打开
            </div>
            <div class="menu-sep">
            </div>
            <div type="close">
                关闭
            </div>
            <div type="closeOther">
                关闭其他
            </div>
            <div type="closeAll">
                关闭所有
            </div>


        </div>


    </div>

3、调用js的函数时

<script type="text/javascript">


    $(function () {
 
        init_page();




    });
    //初始化页面
    function init_page() {
        $('#layout_center_tabsMenu').menu({
            onClick: function (item) {
                var curTabTitle = $(this).data('tabTitle');
                var type = $(item.target).attr('type');


                //刷新
                if (type === 'refresh') {
                    layout_center_refreshTab(curTabTitle);
                    return;
                }
                //打开新窗口
                if (type === 'OpenInNewWindow') {


                    var t = $('#layout_center_tabs').tabs('getTab', curTabTitle);
                    if (t.panel('options').url) {
                        window.open(t.panel('options').url, '', '');
                    }
                    return;
                }
                //关闭
                if (type === 'close') {
                    var t = $('#layout_center_tabs').tabs('getTab', curTabTitle);
                    if (t.panel('options').closable) {
                        $('#layout_center_tabs').tabs('close', curTabTitle);
                    }
                    return;
                }


                //关闭其它
                if (type === "closeOther") {
                    var allTabs = $('#layout_center_tabs').tabs('tabs');
                    var closeTabsTitle = [];


                    $.each(allTabs, function () {
                        var opt = $(this).panel('options');
                        if (opt.closable && opt.title != curTabTitle) {
                            closeTabsTitle.push(opt.title);
                        } else if (opt.closable && type === 'closeAll') {
                            closeTabsTitle.push(opt.title);
                        }
                    });


                    for (var i = 0; i < closeTabsTitle.length; i++) {
                        $('#layout_center_tabs').tabs('close', closeTabsTitle[i]);
                    }
                }
            }
        });


        $('#layout_center_tabs').tabs({
            fit: true,
            border: false,
            onContextMenu: function (e, title) {
                e.preventDefault();
                $('#layout_center_tabsMenu').menu('show', {
                    left: e.pageX,
                    top: e.pageY
                }).data('tabTitle', title);
            },
            onAdd: function (title, index) {
                //解决IE9下Iframe嵌套未定义问题
                var panel = $('#layout_center_tabs').tabs('getTab', index).panel('panel');
                var opts = $('#layout_center_tabs').tabs('getTab', index).panel('options');
                if (opts.url) {
                    var frame = panel.find('#tabIframe');
                    if (frame.length > 0) {
                        for (var i = 0; i < frame.length; i++) {
                            frame[i].src = opts.url;
                        }
                    }
                }
            },
            tools: [{
                iconCls: 'icon-reload',
                handler: function () {
                    var href = $('#layout_center_tabs').tabs('getSelected').panel('options').href;
                    if (href) { /*说明tab是以href方式引入的目标页面*/
                        var index = $('#layout_center_tabs').tabs('getTabIndex', $('#layout_center_tabs').tabs('getSelected'));
                        $('#layout_center_tabs').tabs('getTab', index).panel('refresh');
                    } else { /*说明tab是以content方式引入的目标页面*/
                        var panel = $('#layout_center_tabs').tabs('getSelected').panel('panel');
                        var frame = panel.find('iframe');
                        try {
                            if (frame.length > 0) {
                                for (var i = 0; i < frame.length; i++) {
                                    frame[i].contentWindow.document.write('');
                                    frame[i].contentWindow.close();
                                    frame[i].src = frame[i].src;
                                }
                                if ($.browser.msie) {
                                    CollectGarbage();
                                }
                            }
                        } catch (e) {
                        }
                    }
                }
            }, {
                iconCls: 'icon-cancel',
                handler: function () {
                    var index = $('#layout_center_tabs').tabs('getTabIndex', $('#layout_center_tabs').tabs('getSelected'));
                    var tab = $('#layout_center_tabs').tabs('getTab', index);
                    if (tab.panel('options').closable) {
                        $('#layout_center_tabs').tabs('close', index);
                    } else {
                        $.messager.alert('提示', '[' + tab.panel('options').title + ']不可以被关闭', 'error');
                    }
                }
            }]
        });


        layout_center_addTabFun({
            title: "首页",
            closable: true,
            url: "HtmlIndex.aspx",
            content: '<iframe id="tabIframe" src="" frameborder="0" style="border:0;width:100%;height:99%;"></iframe>'
        });
    }


    //刷新页面
    function layout_center_refreshTab(title) {
        $('#layout_center_tabs').tabs('getTab', title).panel('refresh');
    }
    //打开页面
    function layout_center_addTabFun(opts) {
        var t = $('#layout_center_tabs');
        if (t.tabs('exists', opts.title)) {
            t.tabs('select', opts.title);
        } else {
            t.tabs('add', opts);
        }
    }
    //插入页面
    function layout_center_insertTabFun(opts) {
        var t = $('#layout_center_tabs');
        if (t.tabs('exists', opts.title)) {
            t.tabs('select', opts.title);
        } else {
            t.tabs('add', opts);
        }
    }


</script>