Easyui tabs学习

　　前端时间花了一些时间学习easy ui，这个东西非常好用，界面也很美观，你都不需要在界面上花太多的工夫，例子程序也比较完善，基本上看下例子就能很好的使用easyui了，很方便。

特地分享一些使用时候遇到的问题。

　　1.如何单独加载easy ui的某个插件的css和js？

　　因为只想要其中的一个插件，例如tabs，加载整个easyui.css 和easyui.js 比较耗费资源和流量，对网站的响应速度有印象。这时候，我们可以注意到官网中下载的文件中的demo文件夹里的一个easyloader的demo了，如下图可见。

　　　EasyLoader是可以动态加载脚本和CSS文件，也可以动态加载EasyUI已有组件,需要引用EasyLoader.js文件，引用了EasyLoader.js 就可以不需要再引用easyui.js了。

比如需要加载linkbutton组件，则可以用下面的两种方式来加载：

第一种通过设置class来实现:

 

　　<a href="#" class="easyui-linkbutton" onclick="load1()">加载日历</a>

 　　只要class设置了easyui-组件名，easyloader就会自动动态加载相应的组件

第二种通过脚本来实现: 

　　using('calendar', function () { alert("加载成功！") });

 　　或者

　　easyloader.load('calendar', function () { alert("加载成功！") });

 　　这里using 等同于 easyloader.load，也就是说using是 easyloader.load方法的简写。 

 

案例：

引用的文件有：

1、icon.css (因为代码中用到了icon图标)

2、easyloader.js (加载js和css文件的js)

html代码如下：

  <div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'">
    </div>
    <div id="tab-tools">
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'"></a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'"></a>
    </div>

JS代码如下：

<script type="text/javascript">
    $(function () {
        using("tabs", function () {
            $("tt").tabs()
        })
    })
</script>

只需要如此一段代码就可以引用tabs插件相关联的 js和css了。

如果不想引用easyui.js ，想单独加载整个关联js和css呢？那就可以借助Chrome浏览器的开发者工具，查看加载顺序，进行手动添加了。

 

2、对tabs进行增删改选项卡操作：

　　首先来看看tabs面板的属性：

　　

　　tabs插件提供了这些方法，在官网的demo中也能找到，下面来介绍几种常用的方法：

　　2.1 新增选项

$('#tt').tabs('add', {
                title: tagLabel,
                content: '<div><iframe id="' + index + '" class="frame" src="' + href + '" ></iframe></div>',
                closable: true,
                width: 200,
                height: 100,
            });

 

2.2 移除选项

    function removePanel() {
            var tab = $('#tt').tabs('getSelected');     //选择当前选中的选项
            if (tab) {
                var index = $('#tt').tabs('getTabIndex', tab);    //获得当前选中选项的索引
                $('#tt').tabs('close', index);     //根据索引删除选项
            }
        }

删除选项调用的方法是tabs插件中的close方法.

 

3.修改选项卡内容：

修改选项卡内容跟新增大同小异

var tab = $('#tt').tabs('getSelected');  //获得选中的选项页
$('#tt').tabs('update', {
    tab: tab,
    options: {
               title: tagLabel,
                content: '<div><iframe id="' + index + '" class="frame" src="' + href + '" ></iframe></div>',
                closable: true,
                width: 200,
                height: 100,
    }
});

 

 除此之外还提供了一些实用的方法：