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和ajax代替iframe的方法(详解)
Apr 12 jQuery
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
jquery实现图片轮播器
May 23 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
jQuery实现日历效果
Sep 11 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自定义函数call_user_func和call_user_func_array详解
2011/07/14 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
javascript模拟命名空间
2015/04/17 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
微信小程序日历组件calendar详解及实例
2017/06/08 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
2017/11/11 Javascript
vue+iview+less+echarts实战项目总结
2018/02/22 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
JQuery实现ajax请求的示例和注意事项
2018/12/10 jQuery
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python实现的数据结构与算法之链表详解
2015/04/22 Python
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
Python算法应用实战之栈详解
2017/02/04 Python
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
Python实现端口检测的方法
2018/07/24 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
趣味运动会活动方案
2014/02/12 职场文书
体育专业求职信
2014/07/16 职场文书
大学生安全责任书
2014/07/25 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
辞职信格式范文
2015/05/13 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
员工升职自我评价
2019/03/26 职场文书
Python自动化测试PO模型封装过程详解
2021/06/22 Python
Python与C++中梯度方向直方图的实现
2022/03/17 Python