zoukankan      html  css  js  c++  java
  • 选项卡tabs

    <!DOCTYPE html>
    <html>
    <head>
    <title>jQuery Easy UI</title>
    <meta charset="UTF-8" />
    <script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js" ></script>
    <link rel="stylesheet" type="text/css" href="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/themes/icon.css" />
    <script type="text/javascript">
        $(function(){
            $("#box1").tabs({
                width : 350,
                height : 200,
                plain : true,
                fit : false,//是否铺满所在的容器
                border : true,//是否显示边框
                scrollIncrement : 500,//选项卡每次滚动的像素值
                scrollDuration : 200,//每次滚动动画持续的时间 需要标签条的长度大一地啊儿
                /*tools : [{//工具栏
                    iconCls : "icon-add",
                    handler : function(){
                        //alert("工具");
                        $(this).tabs("closable",true);
                    },
                },{#}],*/
                tools : "#tt",
                toolPosition : "right",//工具栏的位置
                tabPosition : "right",//选项卡的位置
                headerWidth : 70,//选项卡的宽度
                tabWidth : 200,//标签条的宽度
                tabHeight : 40,//标签条的高度
                selected : 2,//默认被选中的tab页
                showHeader : true,//是否显示tab页标题
                onLoad : function(panel){//在ajax选项卡面板加载完远程数据时 触发
                    console.log("加载完数据时触发");
                },
                onSelect : function(title,index){
                    console.log("在选择一个选项卡面板时触发");
                },
                onUnselect : function(title,index){
                    console.log("在取消选择一个选项卡面板时触发");
                },
                onBeforeClose : function(title,index){
                    console.log("在选项卡面板关闭时触发");
                },
                onClose : function(title,index){
                    console.log("在用户关闭一个选项卡面板时触发");
    
                },
                onAdd : function(title,index){
                    console.log("在添加一个选项卡面板时触发");
                },
                onUpdate : function(title,index){
                    console.log("更新一个选项卡面板时触发"+index
                        +"---"+title);
                },
                onConTextMenu : function(e,title,index){
                    console.log("右击点击一个选项卡面板时触发");
                }
            });
            $("#box1").tabs('update',{
                tab :$("#box1_1"),
                options :{
                    title :"跟新后的标题",
                }
            });
            console.log($("#box1").tabs("getTabIndex","#box1_1"));
        });
    </script>
    </head>
    <body>
    <div id="box" class="easyui-tabs"
    style="300px;height : 100px;">
        <div title="tab1"></div>
        <div title="tab2"></div>
        <div title="tab3" 
        data-options="inconCls : 'icon-reload',closable : true"></div>
    </div>
    <div id="box1">
        <div id="box1_1" title="tab1">tab1</div>
        <div title="tab2">tab2</div>
        <div title="tab3">tab3</div>
        <a href="#" class="icon-add" 
        onclick="javascript:alert("add")"></a>
    </div>
    <div id="tt">
        <a class="icon-add" onclick="javascript:alert('add')">&nbsp;&nbsp;</a>
        <a class="icon-edit" onclick="javascript:alert('edit')">&nbsp;&nbsp;</a>
        <a class="icon-cut" onclick="javascript:alert('cut')">&nbsp;&nbsp;</a>
    </div>
    
    </body>
    </html>
  • 相关阅读:
    Newtonsoft.Json序列化 对时间格式化处理
    CSS常用提示浮出层的写法
    避免常见的6种HTML5错误用法
    varchar(Max) 对应SqlParameter 数据类型长度改为1
    IIS指定域名不能调试解决办法
    如何弹出固定大小及内容的网页窗口
    CSS图片圆角框的灵活处理
    精通CSS:高级Web标准解决方案(中文电子书下载)
    AjaxControlToolKit(整理)三.......(35个控件)简单介绍
    CSS通用开发库
  • 原文地址:https://www.cnblogs.com/m01qiuping/p/6502301.html
Copyright © 2011-2022 走看看