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">

         <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">

         <link rel="stylesheet" type="text/css" href="../css/default.css">

         <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)" 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使用实例精讲的更多相关文章

  1. jQuery EasyUI 折叠面板accordion的使用实例

    1.对折叠面板区域 div 设置 class=”easyui-accordion” 2.在区域添加多个 div, 每个 div 就是一个面板 (每个面板一定要设置 title 属性). 3.设置面板属 ...

  2. jQuery EasyUI布局容器layout实例精讲

    这个布局容器,有五个区域:北.南.东.西和中心. 他中心地区面板是必需的,但是边缘地区面板是可选的.每一个边缘地区面板可以缩放的拖动其边境, 他们也可以通过点击其收缩触发.布局可以嵌套,从而用户可以建 ...

  3. jQuery easyui刷新当前tabs

    更新特定的选项卡面板 可使用update方法,param参数包含2个属性: tab: 将被更新的选项卡. options: 选项卡相关配置项. Example: //当前tab var current ...

  4. Jquery EasyUI选项卡-Tabs的使用方法

    以下是easyUI的tabs的简单实用介绍. var e =$('#main').tabs('exists','accordion'); if(e==true){  $('#main').tabs(' ...

  5. JavaScript精彩范例(1)——Jquery EasyUI应用的一个框架实例

    从网上看到的,非常漂亮,放在这里和大家分享一下,作者是疯狂秀才 这是截图 >>这是下载地址<<

  6. MySQL创建用户与授权方法实例精讲

    MySQL中创建用户与授权的实现方法. 运行环境:widnows xp professional + MySQL5.0 一, 创建用户: 命令:CREATE USER 'username'@'host ...

  7. Android——Fragment实例精讲——底部导航栏+ViewPager滑动切换页面

    说明: 实现效果: 1- 用ViewPager实现Fragmen之间的切换 2- 底部用RadioGroup实现,更方便的实现图片和字体颜色的改变,更方便的通过RadioButton的点击事件来控制页 ...

  8. plsql实例精讲部分笔记

    转换sql: create or replace view v_sale(year,month1,month2,month3,month4,month5,month6,month7,month8,mo ...

  9. 套用JQuery EasyUI列表显示数据、分页、查询

    声明,本博客从csdn搬到cnblogs博客园了,以前的csdn不再更新,朋友们可以到这儿来找我的文章,更多的文章会发表,谢谢关注! 有时候闲的无聊,看到extjs那么肥大,真想把自己的项目改了,最近 ...

随机推荐

  1. [Java] SpringMVC工作原理之一：DispatcherServlet

    一.DispatcherServlet 处理流程 在整个 Spring MVC 框架中,DispatcherServlet 处于核心位置,它负责协调和组织不同组件完成请求处理并返回响应工作.在看 Di ...

  2. centos7下kubernetes（10。kubernetes-daemonset）

    deployment部署得副本pod会分布在各个node上,每个node上可以运行很多个pod. daemonset的不同之处就在于,daemonset可以让每个node上只运行一个pod daemo ...

  3. P2370 yyy2015c01的U盘（二分+背包）

    思路:先说一下题意吧.就是给你n个文件大小为v,价值为c, 但是硬盘的大小为S, 而且要存的总价值大于等于p.问每次传输k大小的文件.问k的最大值是多少? 我们以k为二分对象. 直接讲检验函数吧. 假 ...

  4. day05 数据基本类型及内置方法：字符串str、列表list

    一:可变不可变类型 1.可变类型 值改变,id不变,说明是直接改变原值,是可变类型 2.不可变类型 值改变,id也跟着改变,说明是产生了新的值,是不可变类型 二:数字类型 1.整型Int 用途: 记录 ...

  5. esp8266 免费wifi强推广告神器(0) 项目介绍

    某宝产品 WIFI SSID广告终端路由推广宝 简单来说,手机连接免费wifi,自动弹出广告页面,有二维码和电话,点击电话直接打电话给商家客服,用户点击链接跳转到商家网页. 同时存在设置页面,使用者可 ...

  6. org.xml.sax.SAXParseException;在实体引用中, 实体名称必须紧跟在 '&' 后面

    错误信息如下:org.xml.sax.SAXParseException;在实体引用中, 实体名称必须紧跟在 ‘’&’’ 后面 出现这个错误的原因是在xml中使用&,实际上xml中不支 ...

  7. Spring配置文件中条件判断标签

    <bean id="propertyConfigurer" class="org.springframework.beans.factory.config.Prop ...

  8. Python脱产8期 Day12 2019/4/26

    一 函数默认值的细节 1.如果函数的默认参数的默认值为变量,在所属函数定义阶段一执行就被确定为当时变量存放的值 例: a = 100def fn(num=a): print(num) # 100a = ...

  9. 学号 20175329 2018-2019-3《Java程序设计》第四周学习总结

    学号 20175329 2018-2019-3<Java程序设计>第四周学习总结 教材学习内容总结 第五章 上周学习的第四章是体现了数据的封装,本章第五章主要是体现出对象的另外两个方面的重 ...

  10. X86-64寄存器和栈帧--牛掰降解汇编函数寄存器相关操作

    X86-64寄存器和栈帧 概要 说到x86-64,总不免要说说AMD的牛逼,x86-64是x86系列中集大成者,继承了向后兼容的优良传统,最早由AMD公司提出,代号AMD64:正是由于能向后兼容,AM ...