首页 > 代码库 > jquery easyui 选项卡

jquery easyui 选项卡

2024-09-25 19:44:39   215人阅读

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>
 

jquery easyui 选项卡


联系
我们