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: ,
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学习的更多相关文章
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(23)-设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用
ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框架搭建 (2):数据库访问层的设计Demo (3):面向接口编程 (4 ):业务逻辑层的封装 ...
- 设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用
设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框架搭建 (2):数据库访问层的设计Demo ...
- JQuery EasyUI框架学习
前言 新项目的开发前端技术打算採用EasyUI框架(基于EasyUI较为丰富的UI组件库),项目组长将前端EasyUI这块的任务分配给了我.在进行开发之前,须要我这菜鸟对EasyUI框架进行一些基础的 ...
- 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局
EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...
- EasyUI Tabs + Yii2.0实现iframe方式打开页面(解决共用静态文件引入加载的问题)
在项目实际开发中,有将打开的各个链接页面隔离的需求(防止静态资源起冲突),这个时候常规思路就是使用iframe来实现!但遇到一个比较棘手的问题,当用easyui Tabs打开一个iframe页面时,怎 ...
- 【EasyUI学习-3】Easyui tabs入门实践
作者:ssslinppp 1. 摘要 一般我们在设计程序主框架的时候,当点击(子)菜单时,希望相应界面都在tabs页中显示: 在显示的时候,如果之前打开过该界面,则希望重新选中对应的tab ...
- EasyUI整理学习
参考博客: https://www.cnblogs.com/adc8868/p/6647680.html http://www.jeasyui.com/documentation/# http://w ...
- easyui tabs update后tab上关闭图标失效的解决方案
问题:使用easyui的tabs组件的时候,调用了tab的update方法,更新后的tab标签上的关闭图标失效 使用的js文件是1.3版本的jquery.easyui.min.js文件,通过读源文件发 ...
- Easyui tabs的herf和content属性
在backstage.jsp页面中我写了一个方法,用于在指定位置添加面板(id为msg的地方)function addTab(t,h){ if($('#msg').tabs('exists',t)){ ...
随机推荐
- STM32之------独立看门狗(IWDG)和窗体看门狗(WWDG)
一 前沿废语: 之前有很风靡的游戏,名字叫<看门狗>.该游戏用了很新的引擎技术,打造出了一个辽阔庞大的世界,内容是玩家Aiden·Pearce(主角)是一名精通黑客技术的高手,当时 ...
- 编程修养-C语言篇(二)
1.版权和版本——————— 好的程序员会给自己的每个函数,每个文件,都注上版权和版本. 对于C/C++的文件,文件头应该有类似这样的注释: /*************************** ...
- wordpress教程之如何修改与制作wordpress的作者页面
一.如何使用与创建作者页面 一般情况下,多数主题下都有author.php这个文件,这既是作者展示页面.如果发现自己正在使用的主题中没有author.php这个文件的话, Wordpress 会默认寻 ...
- Nginx限制模块研究
已有方案:无非两种 1. 限制连接个数: 是指一台机多线程或多进程开启请求. 解决方案-ngx_http_limit_conn_module 缺点: 定义$variable为单机时,只能限制已有ngi ...
- Effective Java单元测试TestNG - 就是爱Java
TestNG是另一种单元测试的framework,与JUnit的类似,这次Mix将使用它来撰写测试程序,大部分所引用的class package都一样,只差在JUnit与TestNG的字样,可以直接用 ...
- Apache监控
Apache性能监控 http://www.cnblogs.com/fnng/archive/2012/11/11/2765463.html 要监控apache的性能,我们需要修改配置文件,允许查看a ...
- QSizePolicy可均匀调整控件的大小,还可设置比例,非常完美(每个QWidget都有这个功能)
http://blog.csdn.net/liang19890820/article/details/51986284 它是QWidget的固有属性: http://doc.qt.io/qt-4.8/ ...
- Android实现自适应正方形GridView
Android实现自适应正方形GridView
- Java Keyword -- super
Reference: super When we override superclass's methods, but still want to invoke them, we can use ke ...
- OpenGL进阶(十一) - GLSL4.x中的数据传递
in out 对于 vertex shader,每个顶点都会包含一次,它的主要工作时处理关于定点的数据,然后把结果传递到管线的下个阶段. 以前版本的GLSL,数据会通过一些内建变量,比如gl_Vert ...