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

时间:2022-08-25 10:04:50

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精彩范例&lpar;1&rpar;——Jquery EasyUI应用的一个框架实例

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

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

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

  7. Android——Fragment实例精讲——底部导航栏&plus;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. Moq让单元测试变得更简单

    [ASP.Net MVC3 ]使用Moq让单元测试变得更简单 前几天调查完了unity.现在给我的任务是让我调查Moq. 以下是自己找了资料,总结并实践的内容.如果有表述和理解错误的地方.恳请指正. ...

  2. XHTML表格

    1.基本格式: <table> <tr> <th>A</th><th>B</th><th>C</th>& ...

  3. HTML5 Video player jQuery plugin

    <!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8&qu ...

  4. 【OpenStack】相关概念

    网络 network和subnet Service subnets: 创建network,subnet, instances 官方示例 Network components: Switches/ Ro ...

  5. openjudge noi 鸡尾酒疗法

    题目链接:http://noi.openjudge.cn/ch0105/18/ 总时间限制: 1000ms 内存限制: 65536kB 描述 鸡尾酒疗法,原指“高效抗逆转录病毒治疗”(HAART),由 ...

  6. BZOJ3879&colon;SvT&lpar;后缀数组&comma;单调栈&comma;ST表&rpar;

    Description (我并不想告诉你题目名字是什么鬼) 有一个长度为n的仅包含小写字母的字符串S,下标范围为[1,n]. 现在有若干组询问,对于每一个询问,我们给出若干个后缀(以其在S中出现的起始 ...

  7. &lbrack;LeetCode&rsqb; 785&period; Is Graph Bipartite&quest;&lowbar;Medium tag&colon; DFS&comma; BFS

    Given an undirected graph, return true if and only if it is bipartite. Recall that a graph is bipart ...

  8. Microsoft DirectX SDK 2010 版本下载

    Microsoft DirectX SDK 2010 版本下载 Version:Date Published:9.29.19626/7/2010File name:File size:DXSDK_Ju ...

  9. IO异常 的处理

    package com.throwsss; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFou ...

  10. &lbrack;转帖 cnblog 的news &rsqb;技术实力超群的Netflix,为何没有CTO

    技术实力超群的Netflix,为何没有CTO https://news.cnblogs.com/n/581824/ 投递人 itwriter 发布于 2017-11-05 16:12 评论(2) 有1 ...