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 相关文章推荐
js 单引号 传递方法
Jun 22 Javascript
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
jQuery实用基础超详细介绍
Apr 11 Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 Javascript
javascript+html5实现绘制圆环的方法
Jul 28 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
使用vuex缓存数据并优化自己的vuex-cache
May 30 Javascript
用Node提供静态文件服务的方法
Jul 06 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
小程序实现日历左右滑动效果
Oct 21 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 Javascript
如何使用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 各种排序算法实现代码
2009/08/20 PHP
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
jquery 将disabled的元素置为enabled的三种方法
2009/07/25 Javascript
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
jQuery 遍历函数详解
2015/07/05 Javascript
js实现圆盘记速表
2015/08/03 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
使用Python横向合并excel文件的实例
2018/12/11 Python
Python for循环与range函数的使用详解
2019/03/23 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
python 实现dict转json并保存文件
2019/12/05 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
animation和transition的区别
2020/10/12 HTML / CSS
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
大学毕业后的十年规划
2014/01/07 职场文书
2014年迎新年活动方案
2014/02/19 职场文书
幼儿园招生广告
2014/03/19 职场文书
驻村工作简报
2015/07/20 职场文书