jquery easyui 选项卡

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 >

 

转载于:https://www.cnblogs.com/lanlanJser/p/6903023.html