前端easyui的簡化調用

easyui近期一直都比較流行，雖然它在效果上被extjs爆了，它的使用難度低，在IE6下表現不錯，的確受到了廣泛企業程序員的好評。

但是他的API說明還是比較簡陋的，剛上手可能還需要摸索一下，為什么這樣做不會來？

 

我做了一些封裝

盡量地封裝，隱藏它的API，保持簡單調用。

不要擔心看不懂，最后還提供Demo下載。

 

工作開始

Tabs

先貼一張簡陋的圖，與官方的Demo差不多，但是在Tabs中只加入一個模仿VS的右鍵菜單，並且設置了選項卡最大個數，打開選項卡時超出最大個數會關閉一個。

另外做了寫控制，不會重復打開選項卡。

總體上定義一個jeasyui的類，可以看到他包含Tabs,Messager,Redirect這幾個部分的功能。

var jeasyui = {
    Tabs: {} ,                                           //選項卡
    Messager: {},                                     //消息框
    Redirect:{}                                         //重定向
};

先來看看Tabs

/*
選項卡
id                          easyui標簽的ID
maxlength             設置選項卡最大個數
*/
jeasyui.Tabs = function (id, maxlength) {
    this.id = id;
    this.maxlength = maxlength;
    this.currTabCount = 1;
    //自動關閉選項卡函數
    this.autoCloseTab = function () {
        $('#' + this.id).tabs('close', 1);
    };
    //關閉指定選項卡函數
    this.CloseTab = function (title) {
        $('#' + this.id).tabs('close', title);
    };
    //關閉除選中外所有選項卡函數
    this.CloseAllTabExceptThis = function (title) {
        var alltabs = $('#' + this.id).tabs('tabs');
        var currtab = $('#' + this.id).tabs("getTab", title);
        var titlelist = new Array();
        var listcount = 0;
        for (var i = 0; i < alltabs.length; i++) {
            if (alltabs[i] != currtab && alltabs[i].panel('options').title != "首頁") {
                titlelist[listcount] = alltabs[i].panel('options').title;
                listcount++;
            }
        }
        for (var j = 0; j < listcount; j++) {
            $('#' + this.id).tabs('close', titlelist[j]);
        }
    };
};
//添加一個選項卡
jeasyui.Tabs.prototype.addTab = function (titleName, url) {
    if (!this.exists(titleName)) {
        //var iframe = $('<iframe style="width:100%;height:100%;border:0" />');
        $('#' + this.id).tabs('add', {
            title: titleName,
            //content: iframe,
            href:url,
            closable: true,
            cache: true,
            fit: true
        });
        //iframe.attr('src', url);
    } else {
        this.selectTab(titleName);
    }
};
//選中指定選項卡（參數titleName:選項卡標題名）
jeasyui.Tabs.prototype.selectTab = function (titleName) {
    $('#'+this.id).tabs('select', titleName);
};
//獲取當前選項卡
jeasyui.Tabs.prototype.getSelected = function () {
    return $('#' + this.id).tabs('getSelected');
};
//刷新選項卡（參數tab:選項卡）
jeasyui.Tabs.prototype.refresh = function (tab) {
    tab.panel('refresh', tab.panel('options').href);
};
//驗證選項卡是否存在（參數titleName:選項卡標題名）
jeasyui.Tabs.prototype.exists = function (titleName) {
    var tab = $('#' + this.id).tabs('exists', titleName);
    return tab;
};

使用起來也比較簡單，右鍵菜單的事件如下。

        var jtab = new jeasyui.Tabs('tabs', 10);

        function AddTab(obj) {
            jtab.addTab(obj.title, obj.url);
        }

        function CloseCurrTab() {
            var title = $('#hidCurrTab').val();
            jtab.CloseTab(title);
        }

        function ReloadTab() {
            var selectedTab = jtab.getSelected();
            jtab.refresh(selectedTab);
        }

        function CloseAllTabExceptThis() {
            var title = $('#hidCurrTab').val();
            jtab.CloseAllTabExceptThis(title);
        }

構建選項卡，這里注意下tabs的幾個事件的綁定。

        $(document).ready(function () {
            //構建手風琴
            var aaOptions = {
                fit: true,
                border: false
            };
            $('#aa').accordion(aaOptions);

            //構建選項卡
            var tabsOptions = {
                fit: true,
                tools: '#tab-tools',
                onContextMenu: function (e, title) {
                    e.preventDefault();
                    if (title == "首頁") {
                        $('#mm-closeone').attr('style', 'display:none');
                    } else {
                        $('#mm-closeone').attr('style', '');
                    }
                    $('#mm').menu('show', { left: e.pageX, top: e.pageY })
                    $('#hidCurrTab').val(title);
                },
                onAdd: function (title) {
                    jtab.currTabCount++;
                    if (jtab.currTabCount > jtab.maxlength) {
                        jtab.autoCloseTab();
                    }
                },
                onClose: function (title) {
                    jtab.currTabCount--;
                }
            };
            $('#tabs').tabs(tabsOptions);
        });

 

消息框，這里可以衍生出更豐富的功能，比如確認后執行一個函數，只要稍稍改動即可，比較簡單的。

而且經過封裝之后可以提高開發效率，因為我設置了一些參數的默認值，這樣在一般情況下可以少輸入一些參數。

jeasyui.Messager = {};

//提示框

jeasyui.Messager.Show = function (message, titleName, time, type) {
    titleName = titleName || '提示';
    type = type || 'slide';
    time = time || 5000;
    $.messager.show({
        title: titleName,
        msg: message,
        timeout: time,
        showType: type
    });
};

//彈出提示信息
jeasyui.Messager.Alert = function (msg, title, type) {
    title = title || '提示';
    type = type || 'info';
    $.messager.alert(title, msg, type);
};

//彈出提示確認后重定向
jeasyui.Messager.ConfirmAndRedirect = function (msg, title, url) {
    title = title || '提示';
    $.messager.confirm(title, msg, function (r) {
        if (r) {
            location.href = url;
        }
    });
};

//彈出提示確認后關閉窗口
jeasyui.Messager.ConfirmAndClose = function (msg, title) {
    title = title || '提示';
    $.messager.confirm(title, msg, function (r) {
        if (r) {
            window.close();
            parent.location.href = parent.location.href;
        }
    });
};

//彈出提示信息后父窗體重定向
jeasyui.Messager.MRedirect = function (msg, url, title ) {
    title = title || '提示';
    $.messager.alert(title, msg, 'info', function () {
            location.href = url;
    });
};

//彈出提示信息后重定向
jeasyui.Messager.Redirect = function (msg, url, title) {
    title = title || '提示';
    $.messager.alert(title, msg, 'info', function () {
        var selectedTab = $('#tabs').tabs('getSelected');
        selectedTab.panel('refresh', url);
    });
};

//進度條開啟
jeasyui.Messager.ProgressOpen=function () {
    $.messager.progress({
        msg: '正在處理，請稍后...',
        interval: 100
    });
}

//進度條關閉
jeasyui.Messager.ProgressClose=function () {
    $.messager.progress('close');
}

 

這次報告就到這里，感謝閱讀。

附件下載：easyuiframe.rar