游戏技术文章

easyui简单使用

时间:2016-12-29 13:14:56  作者:棋牌资源网  来源:棋牌资源网  查看:7804  评论:0
内容摘要:easyui近期一直都比较流行,虽然它在效果上被extjs爆了,它的使用难度低,在IE6下表现不错,的确受到了广泛企业程序员的好评。但是他的API说明还是比较简陋的,刚上手可能还需要摸索一下,为什么这样做不会来? 我做了一些封装尽量地封装,隐藏它的API,保持简单调用。...
easyui近期一直都比较流行,虽然它在效果上被extjs爆了,它的使用难度低,在IE6下表现不错,的确受到了广泛企业程序员的好评。

但是他的API说明还是比较简陋的,刚上手可能还需要摸索一下,为什么这样做不会来?

 

我做了一些封装

尽量地封装,隐藏它的API,保持简单调用。

不要担心看不懂,最后还提供Demo下载。

 

工作开始

Tabs

先贴一张简陋的图,与官方的Demo差不多,但是在Tabs中只加入一个模仿VS的右键菜单,并且设置了选项卡最大个数,打开选项卡时超出最大个数会关闭一个。

另外做了写控制,不会重复打开选项卡。

easyui简单使用

总体上定义一个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.Alert = function (title,msg,type) {
    $.messager.alert(title, msg, type);
};

//弹出提示确认后重定向
jeasyui.Messager.ConfirmAndRedirect = function (title, msg, url) {
    $.messager.confirm(title, msg, function (r) {
        if (r) {
            location.href = url;
        }
    });
};

//弹出提示确认后关闭窗口
jeasyui.Messager.ConfirmAndClose = function (title, msg) {
    $.messager.confirm(title, msg, function (r) {
        if (r) {
            window.close();
            parent.location.href = parent.location.href;
        }
    });
};

//弹出提示信息后父窗体重定向
jeasyui.Messager.MRedirect = function (title, msg, url) {
    $.messager.alert(title, msg, 'info', function () {
            location.href = url;
    });
};
复制代码
复制代码

这次报告就到这里,感谢阅读。

标签:easyui简单使用 

欢迎加入VIP,【VIP售价:只要288元永久VIP会员】畅享商业棋牌游戏程序下载,点击开通!

下载说明


☉本站所有源码和资源均由站长亲自测试-绝对保证都可以架设,运营!
☉如源码和资源有损坏或所有链接均不能下载,请告知管理员,

☉本站软件和源码大部分为站长独资,资源购买和收集,放心下载!

☉唯一站长QQ:1004003180  [人格担保-本站注重诚信!]

☉购买建议E-mail:1004003180@qq.com   源码收购 E-mail:1004003180@qq.com    

☉本站文件解压密码  【文章内都自带解压密码,每个密码不同!】


本站提供的所有源码,均来源站长提供,仅学习交流 浙ICP备09009969号

由此产生不良后果和法律责任与本站无关,如果侵犯了您的版权,请来信告知 1004003180@qq.com 将及时更正和删除! 

Copyright © 2008-2024 棋牌资源网,你身边的棋牌资源下载站    All Rights Reserved