前端时间花了一些时间学习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: ,
height: ,
});

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: ,
height: ,
}
});

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

Easyui tabs学习的更多相关文章

  1. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(23)-设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用

    ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据库访问层的设计Demo    (3):面向接口编程   (4 ):业务逻辑层的封装    ...

  2. 设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用

    设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据库访问层的设计Demo ...

  3. JQuery EasyUI框架学习

    前言 新项目的开发前端技术打算採用EasyUI框架(基于EasyUI较为丰富的UI组件库),项目组长将前端EasyUI这块的任务分配给了我.在进行开发之前,须要我这菜鸟对EasyUI框架进行一些基础的 ...

  4. 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局

    EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...

  5. EasyUI Tabs + Yii2.0实现iframe方式打开页面(解决共用静态文件引入加载的问题)

    在项目实际开发中,有将打开的各个链接页面隔离的需求(防止静态资源起冲突),这个时候常规思路就是使用iframe来实现!但遇到一个比较棘手的问题,当用easyui Tabs打开一个iframe页面时,怎 ...

  6. 【EasyUI学习-3】Easyui tabs入门实践

    作者:ssslinppp       1. 摘要 一般我们在设计程序主框架的时候,当点击(子)菜单时,希望相应界面都在tabs页中显示: 在显示的时候,如果之前打开过该界面,则希望重新选中对应的tab ...

  7. EasyUI整理学习

    参考博客: https://www.cnblogs.com/adc8868/p/6647680.html http://www.jeasyui.com/documentation/# http://w ...

  8. easyui tabs update后tab上关闭图标失效的解决方案

    问题:使用easyui的tabs组件的时候,调用了tab的update方法,更新后的tab标签上的关闭图标失效 使用的js文件是1.3版本的jquery.easyui.min.js文件,通过读源文件发 ...

  9. Easyui tabs的herf和content属性

    在backstage.jsp页面中我写了一个方法,用于在指定位置添加面板(id为msg的地方)function addTab(t,h){ if($('#msg').tabs('exists',t)){ ...

随机推荐

  1. STM32之------独立看门狗(IWDG)和窗体看门狗(WWDG)

    一     前沿废语: 之前有很风靡的游戏,名字叫<看门狗>.该游戏用了很新的引擎技术,打造出了一个辽阔庞大的世界,内容是玩家Aiden·Pearce(主角)是一名精通黑客技术的高手,当时 ...

  2. 编程修养-C语言篇(二)

    1.版权和版本——————— 好的程序员会给自己的每个函数,每个文件,都注上版权和版本.  对于C/C++的文件,文件头应该有类似这样的注释: /*************************** ...

  3. wordpress教程之如何修改与制作wordpress的作者页面

    一.如何使用与创建作者页面 一般情况下,多数主题下都有author.php这个文件,这既是作者展示页面.如果发现自己正在使用的主题中没有author.php这个文件的话, Wordpress 会默认寻 ...

  4. Nginx限制模块研究

    已有方案:无非两种 1. 限制连接个数: 是指一台机多线程或多进程开启请求. 解决方案-ngx_http_limit_conn_module 缺点: 定义$variable为单机时,只能限制已有ngi ...

  5. Effective Java单元测试TestNG - 就是爱Java

    TestNG是另一种单元测试的framework,与JUnit的类似,这次Mix将使用它来撰写测试程序,大部分所引用的class package都一样,只差在JUnit与TestNG的字样,可以直接用 ...

  6. Apache监控

    Apache性能监控 http://www.cnblogs.com/fnng/archive/2012/11/11/2765463.html 要监控apache的性能,我们需要修改配置文件,允许查看a ...

  7. QSizePolicy可均匀调整控件的大小,还可设置比例,非常完美(每个QWidget都有这个功能)

    http://blog.csdn.net/liang19890820/article/details/51986284 它是QWidget的固有属性: http://doc.qt.io/qt-4.8/ ...

  8. Android实现自适应正方形GridView

    Android实现自适应正方形GridView  

  9. Java Keyword -- super

    Reference: super When we override superclass's methods, but still want to invoke them, we can use ke ...

  10. OpenGL进阶(十一) - GLSL4.x中的数据传递

    in out 对于 vertex shader,每个顶点都会包含一次,它的主要工作时处理关于定点的数据,然后把结果传递到管线的下个阶段. 以前版本的GLSL,数据会通过一些内建变量,比如gl_Vert ...