zoukankan      html  css  js  c++  java
  • jquery easyui 选项卡

    CSS加载

    <div class="easyui-tabs" style=" 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=" 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>
     
  • 相关阅读:
    Win10关闭自动更新
    NGUI(三) 下拉框(弹出列表)PopupList、单选框Checkbox
    NGUI(二) widget,Anchor锚点,Tween补间动画,Slider滑动器,滑动条变色,打字机TypewriterEffect
    NGUI(一) UIROOT,Label,Sprite,Button,Panel,创建字体,创建图集,按钮添加点击音效
    NGUI脚本
    c#常用类库
    Application位置
    常用单词
    Proto在C++的使用
    Protobuf语法
  • 原文地址:https://www.cnblogs.com/lanlanJser/p/6903023.html
Copyright © 2011-2022 走看看