【EasyUI】Tabs常用操作及href和content的异同
说明:EasyUI版本1.3.4 ,jQuery版本1.8.3
EasyUI Tabs常见使用方式
按照官方文档的说法,创建Tabs的方式有两种:
- 静态页面标签
- 动态JS代码
静态方式主要用于创建一些内容固定的Tabs,而动态方式通常用来导入Ajax请求返回的内容或者嵌入其他已存在页面。
我个人觉得创建并使用Tabs的方式其实只有一种,那就是先创建装载选项卡的容器,然后在容器中放入具体的选项卡,至于你怎么放,就是官方给出的静态和动态两种方式了。
创建容器:
- <div id="data_tabs" data-options="fit:true,border:false,tabWidth:110,tabHeight:25" class="easyui-tabs"> </div>
添加选项卡到容器
1、静态页面标签
- <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
- <div title="Tab1" style="padding:20px;display:none;">
- tab1
- </div>
- <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
- tab2
- </div>
- <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
- tab3
- </div>
- </div>
2、动态JS代码
- $('#tt').tabs('add',{
- title:'New Tab',
- content:'Tab Body',
- closable:true,
- tools:[{
- iconCls:'icon-mini-refresh',
- handler:function(){
- alert('refresh');
- }
- }]
- });
个人觉得,JS动态添加选项卡的情况会比较多,比如创建下面这样的Tabs,内容是从其他页面导入并动态更新的
如果在页面上创建,扩展起来不方便,并且同时还需要在JS中使用Tabs的update功能,如果动态添加就会很方便,具体实现的代码如下:
- <div id="data_tabs" data-options="fit:true,border:false,tabWidth:110,tabHeight:25" class="easyui-tabs">
- <div title=””></div>
- <div title=””></div>
- <div title=””></div>
- …
- </div>
- //点击页面之后更新每个tab的内容,用到onSelect事件
- $(document).ready(function(){
- $(“#data_tabs”).tabs({
- onSelect:function(title, index){
- …
- }
- });
- });
- var t = $(“#data_tabs”);
- var mytab = t.tabs('getSelected'); // 获取选择的面板
- t.tabs('update', {
- tab: mytab,
- options: {
- title: title,
- content: mycontent // 新内容的URL
- }
- });
首先在页面上创建一个Tabs容器
- <div id="data_tabs" data-options="fit:true,border:false,tabWidth:110,tabHeight:25" class="easyui-tabs"></div>
然后把所有选项卡的title和url信息保存在对象中,需要扩展就给这个对象添加title和url
- var userName = $("#userName").val();
- var userId = $("#userId").val();
- var titleAndUrls = {
- "大区" : "",
- "品牌" : BasePath+"/authority_user_brand/listtwo?moduleId=1&userName=" + userName + "&userId=" + userId,
- "管理城市" : "",
- "经营城市" : BasePath+"/authority_user_managing_city/listtwo?moduleId=1&userName=" + userName + "&userId=" + userId,
- "订货单位" : BasePath+"/authority_user_order_unit/listtwo?moduleId=1&userName=" + userName + "&userId=" + userId,
- "结算公司" : BasePath+"/authority_user_settlement_company/listtwo?moduleId=1&userName=" + userName + "&userId=" + userId,
- "店铺" : BasePath+"/authority_user_store/listtwo?moduleId=1&userName=" + userName + "&userId=" + userId,
- "仓库" : BasePath+"/authority_user_storage/listtwo?moduleId=1&userName=" + userName + "&userId=" + userId
- };
然后再遍历这个对象创建出所有的tabs
- //遍历titleAndUrls并创建所有tab
- $.each(titleAndUrls, function(title, url){
- user_data_auth.createTab(title, url);
- });
- //用title和url创建tab
- user_data_auth.createTab = function (title, url) {
- var content = '<iframe src="' + url + '" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="yes" width="100%" height="100%"
- $('#data_tabs').tabs('add', {
- title : title,
- selected : false,
- closable : false,
- content : content
- });
- };
如果需要创建完之后默认选中第一个,可以使用EasyUI Tabs的select函数
- //初始化第一个tab
- $('#data_tabs').tabs("select", 0);
url和content的异同
add或者update一个选项卡的时候,可以通过指定url属性或者content属性来嵌入其他页面内容
使用url:嵌入的其他页面和本页面处于同一个作用域,也就是说,本页面的和导入的JS方法不能有命名冲突,标签的id也不能冲突,而且导入的页面不能有body和html标签,仅仅作为一个内容子页面,此时导入页面的JS代码可以在本页面一起引入,也可以在导入页面的底部引入
使用content:嵌入时可以使用iframe标签,也就是说你可以嵌入任意你想嵌入的内容而不受任何限制,但是嵌入完整页面会造成一定程度的资源浪费,比如同样一个js文件需要被两次或多次请求
【EasyUI】Tabs常用操作及href和content的异同的更多相关文章
- JQuery EasyUI DataGrid常用操作及注意事项(未完)
1.获取当前选中行,如果没有选中行,则返回 null var row = $('#gridID').datagrid('getSelected'); 2.获取当前所有选中行数据,返回的是选择的数组数据 ...
- easyui api常用操作
一.FORM表单类 一.textbox validatebox 验证 1.验证规则:validType : 验证规则,类型STRING|ARRAY:1个规则就直接一个字符串,多个规则写在数组里 例如: ...
- 解决easyui tabs中href无法跨域跳转
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content ...
- Easyui tabs的herf和content属性
在backstage.jsp页面中我写了一个方法,用于在指定位置添加面板(id为msg的地方)function addTab(t,h){ if($('#msg').tabs('exists',t)){ ...
- 关于html中的 script标签中的 代码写法有效性? easyui tabs的href不能载入内容页面
script标签, 即 html中的 js脚本区域中: 它其实就是一个 普通的 html标签, 在 html 渲染器 parser 看来, 它跟其他任何的普通 的 html标签 , 比如 p 标签, ...
- 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局
EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...
- 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 ...
- EasyUI Tabs + Yii2.0实现iframe方式打开页面(解决共用静态文件引入加载的问题)
在项目实际开发中,有将打开的各个链接页面隔离的需求(防止静态资源起冲突),这个时候常规思路就是使用iframe来实现!但遇到一个比较棘手的问题,当用easyui Tabs打开一个iframe页面时,怎 ...
随机推荐
- Python开发网络爬虫抓取某同城房价信息
前言: 苦逼的我从某某城市换到另一个稍微大点的某某城市,面临的第一个问题就是买房,奋斗10多年,又回到起点,废话就不多说了,看看如何设计程序把某同城上的房价数据抓取过来. 方案:方案思路很简单,先把网 ...
- CSS:超出省略三部曲
overflow:hidden; 超出隐藏 white-space:nowrap; 不让换行,直到<br /> text-overflow:ellipsis; 超出显示省略号... ...
- linux使用其它用户 su - op -c
su - op -c "whoami"
- 基于CentOS与VmwareStation10搭建Oracle11G RAC 64集群环境:2.搭建环境-2.8. 配置用户环境
2.8.配置用户环境 2.8.1. 配置节点RAC1 配置grid用户环境变量: cat >> /home/grid/.bash_profile <<EOF export TM ...
- [Python爬虫] 之二十三:Selenium +phantomjs 利用 pyquery抓取智能电视网数据
一.介绍 本例子用Selenium +phantomjs爬取智能电视网(http://news.znds.com/article/news/)的资讯信息,输入给定关键字抓取资讯信息. 给定关键字:数字 ...
- mongodb 踩坑记录
Map-Reduce Map-Reduce 是 mongodb 处理批量数据的大杀器,凡是数据量大并且定时处理能满足需求的,都可以试着扔给 mongodb,让它去 Map-Reduce. 以下截取自文 ...
- 两个IP实现IIS和Apache公用80端口的设置方法
1. 打开命令提示符并确保您位于 X:\Inetpub\Adminscripts 文件夹(其中 X 是 IIS 安装驱动器)中.为此,请在命令提示符下键入以下命令行: X: CD \Inetpub ...
- B10:迭代器模式 Iterator
提供了一种方法顺序访问一个聚合对象中各个元素,而又不暴露该对象的内部表示. 适用场景:当你需要访问一个聚合对象,而这个对象不论是什么,你都需要遍历的时候,就用迭代器. UML: 示例代码: class ...
- axios 和 vue-axios
1.main.js 全局引入 /** * 引入 axios 数据请求方式 * axios 和 VueAxios 必须同时注入 */ import axios from 'axios' import V ...
- lodash 判断相等 eq isEqual
var object = { 'a': 1 }; var other = { 'a': 1 }; //true console.log(_.eq(object, object)) //true con ...