JQuery EasyUI(10)

最新推荐文章于 2020-02-13 21:19:35 发布
最新推荐文章于 2020-02-13 21:19:35 发布
阅读量266 收藏
点赞数
分类专栏： WEB - jQuery EasyUI
原文链接：https://study.163.com/course/courseMain.htm?courseId=943002
版权

                           第十章：Tabs（选项卡）组件

学习要点：

  1. 加载方式
  2. 属性列表
  3. 事件列表
  4. 方法列表
  5. 选项卡面板

一、加载方式：

1.class加载方式：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <div id="box" class="easyui-tabs" style="width:500px;height:300px;">
      <div title="Tab1">tab1</div> 
      <div title="Tab2">tab2</div>
      <div title="Tab3">tab3</div>     
  </div>
</html>

2.JS调用：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <div id="box" style="width:500px;height:300px;">
      <div title="Tab1">tab1</div> 
      <div title="Tab2">tab2</div>
      <div title="Tab3">tab3</div>     
  </div>
</html>
 

$(function(){

   $('#box').tabs();
});

 

二、属性列表： 

Tabs属性
属性名值说明
width number选项卡容器宽度，默认值为auto
heightnumber选项卡容器高度，默认值为auto
plainboolean设置为true时，将不显示控制面板背景。默认值为：false
fitboolean设置为true时，选项卡的大小将铺满他所在的容器。默认值为：false
borderboolean设置为true时，显示选项卡容器边框。默认值为：false
scrollIncrementnumber选项卡滚动条每次滚动的像素值，默认值为100
scrollDurationnumber每次滚动动画持续的时间， 单位：毫秒。默认值400
toolsarray,selector工具栏添加在选项卡面板头的左侧或者右侧。可用的值有：1.一个菜单工具数据，每一个工具选项都和linkbutton相同。2.一个指向<div/>容器工具菜单的选择器。默认值为null。
toolPositionstring工具栏位置，可用值：'letf'，'right'，默认值为：right
tabPositionstring选项卡位置，可用值：'top','buttom','left','right'。默认值：top
headerWidthnumber选项卡标题宽度，在tabPosition属性设置为'left'或'right'的时候才有效。默认值：150。
tabWidthnumber标签条的宽度，默认值：auto
tabHightnumber标签条的高度，默认值：27
selectednumber初始化选中一个tab页。默认值：0
showHeaderboolean设置为true时，显示tab页标题，默认值：true
<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <div id="box" style="width:500px;height:300px;">
      <div title="Tab1">tab1</div> 
      <div title="Tab2">tab2</div>
      <div title="Tab3">tab3</div>     
  </div>

  <div id="tt">
      <a class="icon-add" onclick="javascript:alert('add')">&nbsp;&nbsp;</a>
      <a class="icon-edit" onclick="javascript:alert('edit')"></a>
      <a class="icon-cut" onclick="javascript:alert('cut')"></a>    
  </div>
</html>

$(function(){

  $('#box').tabs({
       //width:300,
       //height:100,
       //plain:true,
       //fit:true,
       //border:false,
       //tabWidth:300,
       //tabHeight:50,
       //scrollIncrement:50,
       //scrollDuration:1000,
    
       /*
       tools：[{
         iconCls:'icon-add',
         handler:function(){
           alert('add');
         },
        },{}],
       */

       //tools:'#tt',
       //toolPosition:'left',
       //tabPosition:'left',
       //headerWidth:300,
       //selected:1,
       //showHeader:false,

    });
});

 

 三、事件列表：

Tabs事件
事件名传参说明
onLoadpanel 在ajax选项卡面板加载完远程数据的时候触发。
onSelecttitle,index用户在选择一个选项卡面板的时候触发。
onUnselecttitle,index用户在取消选择一个选项卡面板的时候触发。
onBeforeClosetitle,index在选项卡面板关闭的时候触发，返回false取消关闭操作，下面的例子展示了，在关闭选项卡面板之前以何种方式显示确认对话框。
onClosetitle,index在用户关闭一个选项卡面板的时候触发。
onAddtitle,index在添加一个新的选项卡面板的时候触发。
onUpdatetitlte,index在更新一个选项卡面板的时候触发。
onContextMenu e,tilte,index在右键点击一个选项卡面板的时候触发
<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <div id="box" style="width:500px;height:300px;">
      <div title="Tab1">tab1</div> 
      <div title="Tab2" data-options="colsable:true;">tab2</div>
      <div title="Tab3">tab3</div>     
  </div>

  <div id="tt">
      <a class="icon-add" onclick="javascript:alert('add')">&nbsp;&nbsp;</a>
      <a class="icon-edit" onclick="javascript:alert('edit')"></a>
      <a class="icon-cut" onclick="javascript:alert('cut')"></a>    
  </div>
</html>

$(function(){

  $('#box').tabs({
 
    /* 

    onSelect:function(title,index){
         alert('title' + '|' + 'index');
      },

    onUnselect:function(title,index){
         alert('title' + '|' + 'index');
      },

    onBeforeClose:function(title,index){
         alert('title' + '|' + 'index');
      },

    onClose:function(title,index){
         alert('title' + '|' + 'index');
      },
    */

    onContentMenu:function(e,title,index){
         alert(e.type + '|' + 'title' + '|' + 'index');
      },

    });
});

 

 四、方法列表：

Tabs方法
方法名传参说明
options none返回选项卡属性
tabsnone返回所有选项卡面板
resizenone调整选项卡容器大小和布局
addoptions添加一个新选项卡面板，选项参数是一个配置对象，查看选项卡面板属性的更多细节。在添加一个新的选项卡面板 的时候它将变成可选的。
closewhich关闭一个选项卡面板，'which'参数可以是选项卡面板的标题或者索引。以指定要关闭的面板。
getTabwhich获取指定选项卡面板。'which'参数可以是选项卡面板的标题或者索引。
getTabIndextab获取指定选项卡面板的索引。
getSelectednone获取选择的选项卡面板。下面的例子展示了如何获取选择的选项卡面板索引。
select which选择一个选项卡面板，'which'参数可以是选项卡面板的标题或着索引。
unselectwhich取消选择一个选项卡面板，'which'参数可以是选项卡面板的标题或者索引。
showHeadernone显示选项卡的标签头。
hideHeadernone隐藏选项卡的标签头。
existswhich表名指明的面板是否存在。
updateparam更新指定的选项卡面板，'param'参数包含2个属性：tab：要更新的选项卡面板，options：面板的属性。
enableTabwhich启用指定的选项卡面板，'which'参数可以是选项卡面板的标题或者索引。
disadleTabwhich禁用指定的选项卡面板，'which'参数可以是选项卡面板的标题或者索引。
scrollBydeltaX滚动选项卡标题指定的像素数量，负值则向右滚动，正值则向左滚动。
<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <div id="box" style="width:500px;height:300px;">
      <div title="Tab1">tab1</div> 
      <div title="Tab2" id="tab2" data-options="colsable:true;">tab2</div>
      <div title="Tab3">tab3</div>     
  </div>

  <div id="tt">
      <a class="icon-add" onclick="javascript:alert('add')"></a>
      <a class="icon-edit" onclick="javascript:alert('edit')"></a>
      <a class="icon-cut" onclick="javascript:alert('cut')"></a>    
  </div>
</html>

$(function(){

  $('#box').tabs({
 
    /* 

    onSelect:function(title,index){
         alert('title' + '|' + 'index');
      },

    onUnselect:function(title,index){
         alert('title' + '|' + 'index');
      },

    onBeforeClose:function(title,index){
         alert('title' + '|' + 'index');
      },

    onClose:function(title,index){
         alert('title' + '|' + 'index');
      },

    onContentMenu:function(e,title,index){
         alert(e.type + '|' + 'title' + '|' + 'index');
      },

      //tabWidth:300,        
       onAdd:function(title,index){
             alert('title' + '|' + 'index');
        },
      
       onLoad:function(panel){
             alert(panel);
        },

    */ 
       onUpdate:function(title,index){
             alert('title' + '|' + 'index');
        },

    //}).css('display','none');
    });

   //console.log($('#box').tabs('tabs'));
  
   //$(document).click(function(){
   //     $('#box').tabs().css('display','block');
   //     $('#box').tabs('resize');        
   //   });

    /*

    $('box').tabs('add',{
        id:'bbbb',
        title:'新选项卡',
        content:'新模板',
        href:'content.xml',
        iconCls:'add',
        width:1,
        height:1,
        collapsible:true,
        closable:true,
        selected:false,
    });

    */

    //$('#box').tabs('close',1);
    //console.log($('#box').tabs('getTab',1));
    //console.log($('#box').tabs('getTabIndex',$('#tab2')));
    //console.log($('#box').tabs('getSelected'));
    //$('#box').tabs('select',1);
    //$('#box').tabs('unselect',0);
    //$('#box').tabs('hideHeader');
    //$('#box').tabs('showHeader');
    //console.log($('#box').tabs('exists',1));
    

$(document).click(function(){
    $('#box').tabs('update',{
        tab:$('#tab2'),
        options:{
          title:'修改标题',
         },
     });
   });


    //$('#box').tabs('disableTab',1);
    //$('#box').tabs('unableTab',1);
    //$('#box').tabs('scrollBy',100);
});
//content.xml文件
content

 

五、选项卡面板：

选项卡面板继承了panel一些属性，以下是公共属性。

选项卡面板属性
方法名参数说明
idstring选项卡面板的ID属性，默认值为null
titlestring选项卡面板的标题文本。默认值空
contextstring选项卡面板的内容，默认值空
hrefstring从URL加载远程数据内容填充到选项卡面板，默认值null
cacheboolean如果为true，在'href'属性设置了有效值的时候缓存选项卡面板，默认值true
iconClsstring定义了一个图标的CSS类ID显示到选项卡面板标题，默认值null
widthnumber选项卡面板宽度。默认值为auto
heightnumber选项卡面板高度。默认值为auto
collapsibleboolean如果为true,则允许选项卡折叠，默认值false
选项卡面板独有属性
方法名参数说明
closableboolean设置为true时，选项卡面板将显示一个关闭的按钮，在点击的时候会关闭选项卡面板，默认为false。
selectedboolean设置为true时，选项卡面板会被选中，默认为false。

 

 

作者：Roger_CoderLife

链接：https://blog.csdn.net/Roger_CoderLife/article/details/102859534

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载

Roger_CoderLife
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery EasyUI(一)
飞鸿的博客
05-20 2816
这是我第一天学习jquery EasyUI。我发现我都是零碎地学习后才去系统地去学习的，哈哈，不知道有没有跟我一样的博友。接触jquery EasyUI还是在做ASP.NET综合实验的时候，我准备用MVC去做，然后就用到了jquery EasyUI。第一印象：高端大气上档次，编写一个前端页面速度极快，超级爱。开始学习了。http://www.jeasyui.net/我是在中文网里学习的，下面全手打...
jQuery EasyUI快速入门05
jh9758的博客
05-08 162
一、前端新增布局 1、toolbar工具栏的使用 $('#dg').datagrid({ toolbar: '#tb' }); <div id="tb"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help'.
EasyUI的使用
乔木晨子的博客
11-17 235
1.需要的js文件和引入js文件的写法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导入easyui相关文件</title> <!-- 导入easyui的样式 --> <link rel="stylesheet" type="...
Android SwipeBackLayout简单示例
wenzhi的博客
02-13 3441
Android SwipeBackLayout简单示例 GitHub中以前也用过一个SwipeBackLayout的框架也是目前同类中星最多的有6K， 但是最近使用发现滑动，背景页面会出现黑屏， 项目也是几年前的Eclipse工程结构，依赖的还是V4包， 做了简单修改还是有点问题，决定换个框架试试。 后面看了一个新一点的SwipeBackLayout框架： BGASwipeBackLayout-A...
Easy ui数据属性(当前页数,总页数,总记录数,当前记录数)
小马哥(新博客地址 http://maruifu.cn )
12-21 5120
var grid = $('#grid'); var options = grid.datagrid('getPager').data("pagination").options; var curr = options.pageNumber; alert('当前页数:'+max); var total = options.to
用for循环求s=1+2^2+3^3+4^4+5^5+6^6+…+n^n (n^n表示n的n次方)
shaoheng0912的博客
02-12 4301
#include <stdio.h> int main() { int n,i,m,s,sum; scanf("%d",&n); for(i=0;i<=n;i++) { m=i; s=m*m; sum=sum+s; } printf("%d",sum); return 0; } 写作目的：巩固for循环
jqueryEasyUI
07-16
**jQuery EasyUI 知识点详解** jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列的 UI 组件，使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个框架大大简化了网页界面的设计工作，使得...
jQuery EasyUI 1.9.4 chm文档
03-07
针对jQuery EasyUI的1.9.0的在线帮助文档进行整理，生成chm文件，便于开发时或者离线对easyi控件的属性、文法、事件等内容的查看。
jQuery EasyUI的api
05-09
- **EasyUI 组件**: EasyUI 将jQuery的功能进一步扩展，提供了如`datagrid`（数据网格）、`panel`（面板）、`dialog`（对话框）等丰富的UI组件。 2. **组件的使用**： - **初始化组件**: 使用`$(selector)....
jquery easyui demo
10-12
jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列易于使用的组件，帮助开发者快速构建用户界面。这个"jquery easyui demo"压缩包包含了版本为1.5.3的jQuery EasyUI 示例，旨在让学习者快速理解和掌握其...
Jquery EasyUI 日历Demo
10-12
JQuery EasyUI 是一个基于 jQuery 的轻量级前端框架，它提供了一系列的 UI 组件，如对话框、表格、树形菜单、按钮等，用于快速构建用户界面。在这个"Jquery EasyUI 日历Demo"中，我们将探讨如何利用 EasyUI 的日历...
EasyUI整理学习
weixin_30659829的博客
09-06 94
参考博客:https://www.cnblogs.com/adc8868/p/6647680.html http://www.jeasyui.com/documentation/# http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=metro-red&dir=ltr&pitem=Basic...
VB计算机机房管理系统设计(源代码+系统).zip
08-18
计算机毕业设计资源包含（项目部署视频+源码+LW+开题报告等等），所有项目经过助教老师跑通，有问题可以私信博主解决，可以免费帮部署。
毕业设计论文写作模板.zip
08-18
毕业设计 题目： 基于xxxxxx框架的设计与实现 姓 名: 学 号: 层 次: 本科 专 业: 软件工程 班 级: xx级软件工程01班 指导教师: 2022年5月 xxxx学院教务处 制 独创性声明 一、本设计是本人独立完成； 二、本设计没有任何抄袭行为； 三、若有不实，一经查出，请答辩委员会取消本人答辩资格。 承诺人（签名）： 年 月 日
基于springboot的高校心理教育辅导系统 源码+数据库（毕业设计）
08-18
基于Vue.js和SpringBoot的高校心理教育辅导系统是一个综合性的在线平台，旨在为高校学生、教师和管理员提供心理教育和辅导服务。该系统分为管理后台和用户网页端，支持多种角色使用，包括管理员、学生和教师。 辅导预约：学生可以通过该模块预约心理辅导服务，管理员可以查看和管理预约信息。 测评结果：系统提供心理测评工具，学生可以在线完成测评，系统自动生成测评结果供学生和教师查看。 试题和试卷：教师可以创建和管理试题库，设计试卷并组织在线考试，学生可以在线参加考试并查看成绩。 考试：系统支持在线考试功能，包括考试安排、考试监控、成绩统计等。 留言板：提供一个交流平台，学生、教师和管理员可以发布留言、交流心得和反馈意见。 录屏：https://www.bilibili.com/video/BV1Ct4y1d7L4 教程：https://space.bilibili.com/417412814/channel/collectiondetail?sid=2242844
POLYGON Dungeons - Low Poly 3D Art by Synty v1.9.2.unitypackage
最新发布
08-18
POLYGON Dungeons - Low Poly 3D Art by Synty v1.9.2
字节跳动：抖擞传统，短视频与传统文化研究报告
08-18
字节跳动：抖擞传统，短视频与传统文化研究报告
django admin 的一个主题 ，基于element-ui+vue开发，重写和优化90%以上的页面
08-18
django admin 的一个主题 ，基于element-ui+vue开发，重写和优化90%以上的页面。让django admin更符合国人的使用习惯。并且实现了不用修改任何代码为django admin换肤。100%兼容原生admin
jQuery EasyUI 快速入门指南
"JqueryEasyUi 是一个用于快速掌握EasyUI技术的文档，它涵盖了jQuery EasyUI的各种组件和功能，帮助用户高效地构建基于Web的用户界面。" 在Web开发中，jQuery EasyUI是一个基于jQuery库的轻量级框架，它提供了一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值