(1)EasyUI 动态添加标签页(Tabs)
来源:互联网 发布:隔音卷帘 知乎 编辑:程序博客网 时间:2024/05/27 01:22
在本教程中,我们将使用 iframe 动态地添加显示在一个页面上的 Tabs。 当点击添加按钮,一个新的 tab 将被添加。如果 tab 已经存在,它将被激活。
步骤 1:引入需要的远程文件
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css"><script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script><script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
步骤 2:创建 Tabs
<div style="margin-bottom:10px"> <a href="#" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')">google</a> <a href="#" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')">jquery</a> <a href="#" class="easyui-linkbutton" onclick="addTab('easyui','http://jeasyui.com/')">easyui</a></div><div id="tt" class="easyui-tabs" style="width:400px;height:250px;"> <div title="Home"> </div></div>
这个 html 代码非常简单,我们创建了带有一个名为 ‘Home’ 的 tab 面板的 Tabs。请注意,我们不需要写任何的 js 代码
步骤 3:实现 ‘addTab’ 函数
function addTab(title, url){ if ($('#tt').tabs('exists', title)){ $('#tt').tabs('select', title); } else { var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>'; $('#tt').tabs('add',{ title:title, content:content, closable:true }); }}
我们使用 ‘exists’ 方法来判断 tab 是否已经存在,如果已存在则激活 tab。如果不存在则调用 ‘add’ 方法来添加一个新的 tab 面板。
效果:
阅读全文
0 0
- (1)EasyUI 动态添加标签页(Tabs)
- eazyUI动态添加标签页(tabs)
- EasyUI 动态添加tabs
- 动态添加删除tabs标签
- EasyUI 动态添加标签页
- easyui动态表头 && 动态添加tabs
- easyui 动态添加Trees 和 Tabs
- easyui tabs组件,关闭所有标签页
- easyui 动态添加input标签
- jquery easyui tabs 在子Tab页中动态添加创建新tab页
- 使用easyui创建tabs组件和动态添加
- 使用easyui创建tabs组件和动态添加
- EasyUI基本使用(tabs)
- 使用easyUI创建Tabs标签
- EasyUI Layout实现tabs标签
- 【easyui学习笔记】4.动态添加标签页
- jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
- 扩展 easyui-tabs 插件 关闭标签页方法
- 数据结构:排序算法之插入排序
- python学习
- 大数据概述1
- 讯飞语音的语音听写功能实现的总结以及新手如何着手第三方SDK
- Ubuntu16.04 配置opencv3.1.0+python
- (1)EasyUI 动态添加标签页(Tabs)
- Reids 设置远程登陆
- 2017.08.07工作日记
- Hibernate学习之---事件机制
- Redis 设置密码登陆
- HTML 简介
- Redis介绍
- 【vector】用法
- webService框架cxf的简单使用