码迷,mamicode.com
首页 > Web开发 > 详细

jquery easyui 选项卡

时间:2017-05-25 23:38:43      阅读:344      评论:0      收藏:0      [点我收藏+]

标签:plain   string   function   head   keyword   工具栏   控制   number   ber   

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 选项卡

标签:plain   string   function   head   keyword   工具栏   控制   number   ber   

原文地址:http://www.cnblogs.com/lanlanJser/p/6903023.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!