jquery easyui 选项卡

Posted 2020-09-20 lanlanDong

CSS加载

<div class="easyui-tabs" style="width: 400px;height: 250px">

  <div title="Tab1" data-options="closable:true">

   tab1

  </div>

  <div title="Tab2" data-options="closable:true">

   tab2

  </div>

  <div title="Tab3" data-options="iconCls:‘icon-reload‘,closable:true">

   tab3

  </div>

</div>

JS加载

<div id="box" style="width: 400px;height: 250px">

 <div title="Tab1" data-options="closable:true">

  tab1

 </div>

 <div title="Tab2" data-options="closable:true">

  tab2

 </div>

 <div title="Tab3" data-options="iconCls:‘icon-reload‘,closable:true">

  tab3

 </div>

</div>

 

<script>

 $(function () {

  $(‘#box‘).tabs({

   // 选项卡容器宽度

   width : 500,

   // 项卡容器高度

   height: 400,

   // 是否不显示控制面板背景。

   plain : false,

   // 选项卡是否将铺满它所在的容器

   fit : false,

   // 是否显示选项卡容器边框

   border : true,

   // 选项卡滚动条每次滚动的像素值

   scrollIncrement : 200,

   // 每次滚动动画持续的时间

   scrollDuration : 400,

   // 工具栏添加在选项卡面板头的左侧或右侧

   tools:[{

    iconCls : ‘icon-add‘,

    handler : function () {

     alert(‘添加!‘);

    },

   }],

   // 工具栏位置

   toolPosition : ‘left‘,

   // 选项卡位置

   tabPosition : ‘left‘,

   // 选项卡标题宽度，在 tabPosition 属性设置为‘left‘或‘right‘的时候才有效

   headerWidth : 300,

   // 标签条的宽度

   tabWidth : 250,

   // 标签条的高度

   tabHeight : 25,

   // 初始化选中一个 tab 页, 从0开始

   selected : 2,

   // 是否显示 tab 页标题

   showHeader: true

  }) ;

 });

</script>