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 相关文章推荐
动态调用css文件——jquery的应用
Feb 20 Javascript
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
js 设置选中行的样式的实现代码
May 24 Javascript
我的Node.js学习之路(二)NPM模块管理
Jul 06 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 Javascript
JS数组属性去重并校验重复数据
Jan 10 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 Javascript
js实现带积分弹球小游戏
Jul 21 Javascript
vue自定义组件实现双向绑定
Jan 13 Vue.js
如何使用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中bind_param()函数用法分析
2017/03/28 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
php设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
Javascript 事件流和事件绑定
2009/07/16 Javascript
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
jQuery 中使用JSON的实现代码
2011/12/01 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
javascript学习总结之js使用技巧
2015/09/02 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
jQuery事件详解
2017/02/23 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
vue3.0实现插件封装
2020/12/14 Vue.js
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
python对日志进行处理的实例代码
2018/10/06 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
python实现图片上添加图片
2019/11/26 Python
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
BOSE德国官网:尽探索之力,享音乐之极
2016/12/11 全球购物
学生违反校规检讨书
2014/10/28 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
react 项目中引入图片的几种方式
2021/06/02 Javascript