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 相关文章推荐
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
Mar 01 Javascript
利用javascript解决图片缩放及其优化的代码
May 23 Javascript
js检查页面上有无重复id的实现代码
Jul 17 Javascript
适用于javascript开发者的Processing.js入门教程
Feb 24 Javascript
浅析JS异步加载进度条
May 05 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
React简单介绍
May 24 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
js实现全选反选不选功能代码详解
Apr 24 Javascript
Javascript中的奇葩知识,你知道吗?
Jan 25 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运行时强制显示出错信息的代码
2011/04/20 PHP
php实现通过ftp上传文件
2015/06/19 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
50个比较实用jQuery代码段
2011/09/18 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
Python MySQLdb 使用utf-8 编码插入中文数据问题
2018/03/13 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
python plotly绘制直方图实例详解
2019/07/22 Python
关于pycharm中pip版本10.0无法使用的解决办法
2019/10/10 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
python 调用Google翻译接口的方法
2020/12/09 Python
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
linux面试题参考答案(5)
2014/09/01 面试题
人力资源管理专业应届生求职信
2013/09/28 职场文书
《北京的春节》教学反思
2014/04/07 职场文书
《骑牛比赛》教后反思
2014/04/22 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
python 爬取天气网卫星图片
2021/06/07 Python