jQuery EasyUI 选项卡面板tabs的使用实例讲解


Posted in jQuery onDecember 25, 2017

1、 对选项卡面板区域 div 设置 class=”easyui-tabs”

2、 对选项卡面板区域添加多个 div,每个 div 就是一个选项卡(每个面板一定设置 title)

3、 设置面板 fit 为 true ,自适应父容器大小

4、 设置选项卡 closable 为 true ,添加可关闭按钮

5、通过超链接,点击后,添加新的选项卡

语法: 页面对象.easyui 插件(方法名, 参数) ;

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>easyui-选项卡面板tabs的使用</title>
 <!-- 导入jquery核心类库 -->
 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
 <!-- 导入easyui类库 -->
 <link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css" rel="external nofollow" >
 <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css" rel="external nofollow" >
 <link rel="stylesheet" type="text/css" href="../css/default.css" rel="external nofollow" >
 <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
 <script type="text/javascript">
  //页面加载后执行
  $(function(){
  //对链接绑定点击事件
  $("#nwtxxb").click(function(){
   //添加一个新的选项卡
   $("#mytabs").tabs('add',{
   title:'CSDN博客',
   content:'学IT,你我他学习吧'
   });
  });
  });
 </script>
 </head>
 <body class="easyui-layout">
 <div data-options="region:'north',title:'你我他学习吧-学习Java的好博客!'" style="height:100px"></div>
 <div data-options="region:'west',title:'菜单导航'" style="width:200px">
  <!--折叠面板-->
  <div class="easyui-accordion" data-options="fit:true">
  <div data-options="title:'基础菜单'">
   <a href="javascript:void(0)" rel="external nofollow" id="nwtxxb">你我他学习吧</a>
  </div>
  <div data-options="title:'系统菜单'">你我他学习吧</div>
  </div>
 </div>
 <div data-options="region:'center',title:'中部区域'">
  <!--选项卡面板-->
  <div id="mytabs" class="easyui-tabs" data-options="fit:true">
  <div data-options="title:'CSDN博客',closable:true">学Java后台编程,就来你我他学习吧!</div>
  <div data-options="title:'博客园',closable:true">学前端开发,就来你我他学习吧!</div>
  </div>
 </div>
 <div data-options="region:'east',title:'东部区域'" style="width:100px"></div>
 <div data-options="region:'south',title:'南部区域'" style="height:100px"></div>
 </body>
</html>

以上这篇jQuery EasyUI 选项卡面板tabs的使用实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jQuery实时统计输入框字数及限制
Jun 24 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 #jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 #jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 #jQuery
webpack写jquery插件的环境配置
Dec 21 #jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 #jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 #jQuery
jquery自定义显示消息数量
Dec 19 #jQuery
You might like
用PHP 4.2书写安全的脚本
2006/10/09 PHP
PHP页面中文乱码分析
2013/10/29 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
Yii2框架实现利用mpdf创建pdf文件功能示例
2019/02/08 PHP
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
js防止页面被iframe调用的方法
2014/10/30 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
vue+Element-ui实现分页效果
2020/11/15 Javascript
Python中的zip函数使用示例
2015/01/29 Python
Python获取网页上图片下载地址的方法
2015/03/11 Python
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
python读取大文件越来越慢的原因与解决
2019/08/08 Python
在python中做正态性检验示例
2019/12/09 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
美国领先的眼镜和太阳镜在线零售商:Glasses.com
2019/08/26 全球购物
关于.NET, HTML的五个问题
2012/08/29 面试题
法学专业应届生求职信
2013/10/16 职场文书
家长给孩子的表扬信
2014/01/17 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
考研复习计划
2015/01/19 职场文书
舞出我人生观后感
2015/06/16 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers