1、 对选项卡面板区域 div 设置 class=”easyui-tabs” 
2、 对选项卡面板区域添加多个 div，每个 div 就是一个选项卡（每个面板一定设置 title） 
3、 设置面板 fit 为 true ，自适应父容器大小 
4、 设置选项卡 closable 为 true ，添加可关闭按钮 
5、通过超链接，点击后，添加新的选项卡 
语法： 页面对象.easyui 插件(方法名, 参数) ;

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title>easyui-选项卡面板tabs的使用</title>
  6.          <!-- 导入jquery核心类库 -->
  7.          <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
  8.          <!-- 导入easyui类库 -->
  9.          <link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
  10.          <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
  11.          <link rel="stylesheet" type="text/css" href="../css/default.css">
  12.          <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
  13.          <script type="text/javascript">
  14.              //页面加载后执行
  15.              $(function(){
  16.                  //对链接绑定点击事件
  17.                  $("#nwtxxb").click(function(){
  18.                      //添加一个新的选项卡
  19.                      $("#mytabs").tabs('add',{
  20.                          title:'CSDN博客',
  21.                          content:'学IT，你我他学习吧'
  22.                      });
  23.                  });
  24.              });
  25.          </script>
  26.      </head>
  27.      <body class="easyui-layout">
  28.          <div data-options="region:'north',title:'你我他学习吧-学习Java的好博客！'" style="height:100px"></div>
  29.          <div data-options="region:'west',title:'菜单导航'" style="width:200px">
  30.              <!--折叠面板-->
  31.              <div class="easyui-accordion" data-options="fit:true">
  32.                  <div data-options="title:'基础菜单'">
  33.                      <a href="javascript:void(0)" id="nwtxxb">你我他学习吧</a>
  34.                  </div>
  35.                  <div data-options="title:'系统菜单'">你我他学习吧</div>
  36.              </div>
  37.          </div>
  38.          <div data-options="region:'center',title:'中部区域'">
  39.              <!--选项卡面板-->
  40.              <div id="mytabs" class="easyui-tabs" data-options="fit:true">
  41.                  <div data-options="title:'CSDN博客',closable:true">学Java后台编程，就来你我他学习吧！</div>
  42.                  <div data-options="title:'博客园',closable:true">学前端开发，就来你我他学习吧！</div>
  43.              </div>
  44.          </div>
  45.          <div data-options="region:'east',title:'东部区域'" style="width:100px"></div>
  46.          <div data-options="region:'south',title:'南部区域'" style="height:100px"></div>
  47.      </body>
  48.  </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. ContentTypes 的应用

    ContentTypes django 中的一个应用程序(app),可以跟踪Django项目中安装的所有模型(Model),提供用于处理模型的高级通用接口. Contenttypes应用的核心是Con ...

  2. I/O 机制的介绍（Linux 中直接 I/O 机制的介绍）

    IO连接的建立方式 1.缓存IO.流式IO: 2.映射IO.块式IO: 3.直接IO. IO的方式: 同步.异步.定时刷新: MMAP与内核空间 mmap使用共享用户空间与内核空间实现: 直接 I/O ...

  3. UVA12107-Digit Puzzle（迭代加深搜索）

    Problem UVA12107-Digit Puzzle Accept:85  Submit:612 Time Limit: 3000 mSec  Problem Description  Inpu ...

  4. mysql-备份数据库脚本

    备份数据库脚本,包括单库,全库备份脚本 #!/bin/bashc_user=rootc_password=12345678c_date=`date +"%Y%m%d"`c_dir= ...

  5. Linux 创建静态库(.a)和动态库(.so)

    0. 回顾一下 gcc 选项 ============================================== -E : 仅做预处理,例如去注释,宏展开,include 展开等 -S : ...

  6. day10--函数之形参与实参

    ''' def fn(形参们): pass fn(实参们) ''' # 形参:定义函数,在括号内声明的变量名,用来结束外界传来的值 # 实参:调用函数,在括号内传入的实际值,值可以为常量.变量.表达式 ...

  7. Debian 8.9 搭建wordpress个人博客

    想自己搭个博客玩玩,就搭建了此博客,过程可谓艰辛啊! 先在阿里云买了个  轻量应用服务器 1个月10块钱,好贵.... 用 windows sever 下载不了phpstudy,也不知道怎么回事... ...

  8. springboot 创建非web项目及数据源简单使用

    项目组马上要使用springboot来重构程序,首先要对几个比较小的非web项目重构,所以新手入门,简单做了个小例子 代码结构如下: dao层 package com.mysping.myboot00 ...

  9. Generative Adversarial Nets[content]

    0. Introduction 基于纳什平衡,零和游戏,最大最小策略等角度来作为GAN的引言 1. GAN GAN开山之作 图1.1 GAN的判别器和生成器的结构图及loss 2. Condition ...

  10. Generative Adversarial Nets[Improved GAN]

    0.背景 Tim Salimans等人认为之前的GANs虽然可以生成很好的样本,然而训练GAN本质是找到一个基于连续的,高维参数空间上的非凸游戏上的纳什平衡.然而不幸的是,寻找纳什平衡是一个十分困难的 ...