jQuery EasyUI 布局之动态添加tabs标签页


Posted in Javascript onNovember 18, 2015

在没看下文之前先给大家简单介绍easyui相关知识。

easyui是一种基于jQuery的用户界面插件集合。ddd

easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。

使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。

easyui是个完美支持HTML5网页的完整框架。

easyui节省您网页开发的时间和规模。

easyui很简单但功能强大的。

通过使用 jQuery EasyUI 可以很容易地添加 Tabs。您只需要调用 'add' 方法即可。

在本教程中,我们将使用 iframe 动态地添加显示在一个页面上的 Tabs。 当点击添加按钮,一个新的 tab 将被添加。如果 tab 已经存在,它将被激活。

jQuery EasyUI 布局之动态添加tabs标签页

步骤 1:创建 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 代码。

步骤 2:实现 '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 面板。

好了,本教程到此就结束了,希望对大家学习有所帮助。

Javascript 相关文章推荐
var与Javascript变量隐式声明
Sep 17 Javascript
jquery隐藏标签和显示标签的实例
Nov 11 Javascript
三个js循环的关键字示例(for与while)
Feb 16 Javascript
JavaScript常用字符串与数组扩展函数小结
Apr 24 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
js实现继承的方法及优缺点总结
May 08 Javascript
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
Vue修改项目启动端口号方法
Nov 07 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
如何使用jquery easyui创建标签组件
Nov 18 #Javascript
JavaScript严格模式详解
Nov 18 #Javascript
每天一篇javascript学习小结(String对象)
Nov 18 #Javascript
跟我学习javascript的执行上下文
Nov 18 #Javascript
跟我学习JScript的Bug与内存管理
Nov 18 #Javascript
跟我学习javascript的循环
Nov 18 #Javascript
js操作table元素实现表格行列新增、删除技巧总结
Nov 18 #Javascript
You might like
一个php作的文本留言本的例子(二)
2006/10/09 PHP
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
javascript中怎么做对象的类型判断
2013/11/11 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
Python中and和or如何使用
2020/05/28 Python
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
大韩航空官方网站:Korean Air
2017/10/25 全球购物
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
学生请假条
2014/04/11 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
暑假生活随笔
2015/08/15 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
学习计划是什么
2019/04/30 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs
python用海龟绘图写贪吃蛇游戏
2021/06/18 Python
如何Python使用re模块实现okenizer
2022/04/30 Python