精华内容
参与话题
问答
  • Tabs选项卡切换

    千次阅读 2019-07-07 19:58:54
    Tabs选项卡切换 开发工具与关键技术:JS 作者:赵纯雨 班级:1803撰写时间:2019.7.5 Tabs选项卡切换,他就是能够在一个页面里面通过点击Tabs选项卡进行切换,从而显示多个内容,点击进到页面之后,一般设的都...

    Tabs选项卡切换


    开发工具与关键技术:JS

    作者:赵纯雨

    班级:1803
    撰写时间:2019.7.5
     

    Tabs选项卡切换,他就是能够在一个页面里面通过点击Tabs选项卡进行切换,从而显示多个内容,点击进到页面之后,一般设的都是第一个标签为第一个页面,在li标签里面添加内容,你需要多少,就添加多少,代码如下:

    <div class="layui-tab layui-tab-card">

    <ul class="layui-tab-title">

    <li class="layui-this">尺码管理</li>

    <li>尺码组管理</li>

    </ul>

    </div>

    通过通过追加class:layui-tab-card来设定卡片风格,这个里面就是你添加Tabs选项卡的位置,我把这两个添加好之后,在页面显示就是这样的:

    这个就上面你添加的内容,通过给他一个点击事件,跳转到尺码组管理,

    <div class="layui-tab-content">

     @*尺码管理*@

    <div class="layui-tab-item layui-show">

    <form id="forSize" action="" method="post">

    <div>

    <input type="text" id="chiID" name="SizeManagementID" hidden />

    <label class="mx-3">尺码编号:</label>

    <input type="text" style="width:120px;height:20px;" id="chi" name="SizeNumber" />

    <span style="color:#808080;">(无重复,如:S,39,35B,165等)</span>

    </div>

    <table id="employee" lay-filter="employee"></table>

    </form>

    </div>

    @*尺码组管理*@

    <div class="layui-tab-item">

    <div class="row m-0 p-0">

    <div class="col-9">

    <span style="color:#808080;">

    (注:请直接在网格中选择相应的尺码创建尺码组;<br />

    每一行表示一个尺码组,行号就是尺码组的序号,建议不多于四个尺码组.<br />

    若删除整行,选中行后(支持多选),按键盘的删除键Delete即可)

    </span>

    </div>

    <div class="col-3">

    <button type="button" class="layui-btn layui-btn-sm"   style="height:20px;line-height:20px;font-size:10px;position:relative;top:30px;">保存尺码组</button>

    </div>

    </div>

    <div id="table" class="container-fluid">

    </div>

    </div>

    </div>

    在外部给他一个div,然后给他追加一个class:layui-tab-content从而进行通过点击去进行切换,如果你没写这个的话,你是转换不了的,然后再在里面写入你li标签里面的内容,如下图所示:

    这个就成功的切换到另一个选项卡里面了,你想要多少选项卡就添加多少,直接在上面的ul标签里面再加一个li标签,再在li标签里面写入你选项卡命名的名称,如下列所示:

       <div class="layui-tab layui-tab-card">

            <ul class="layui-tab-title">

                <li class="layui-this">尺码管理</li>

                <li>尺码组管理</li>

                <li>尺码组管理</li>

                <li>尺码组管理</li>

    ……

            </ul>

       </div>

    当你添加了10个li标签之后,因为你是把界面的宽度设置死了的,所以界面不管你添加多少选项卡,他都是不会变形的,他而是在最右边出现一个箭头符号,当容器的宽度不足以显示全部的选项时,即会自动出现展开图标点击箭头,展示剩余的部分,如下图所示:这是未展开前,当你宽度不够时,自动出现展开图标、

    点击箭头,展示剩下的部分

     

    展开全文
  • 这是一款在原生Bootstrap Tabs选项卡的基础上,通过css3来对它进行了一些美化效果,增加简单且好看的css3动画特效。
  • Bootstrap Tabs选项卡切换代码
  • 主要为大家详细介绍了ionic组件ion-tabs选项卡切换效果实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • easyui tabs 选项卡切换

    千次阅读 2017-10-13 10:05:26
    获取当前选项卡的索引 var tab = $('#tt').tabs('getSelected'); var index = $('#tt').tabs('getTabIndex',tab); alert(index);...切换选项卡,0表示要切换的选项卡索引 $('#tt').tabs('select', 0);

    获取当前选项卡的索引

    var tab = $('#tt').tabs('getSelected');
    var index = $('#tt').tabs('getTabIndex',tab);
    alert(index);

    切换选项卡,0表示要切换的选项卡索引

    $('#tt').tabs('select', 0);


    展开全文
  • 常用的页面效果有弹出层效果,无缝滚动效果,选项卡切换效果,接下来与大家分享一款自己用原生javascript写的选项卡切换效果在原有的基础上进行了扩展,加入了自动轮播,这样就变成了类似图片轮播的效果
  • 选项卡切换组件,常用于平级区域大块内容的的收纳和展现。 源码地址:https://github.com/iview/iview/tree/2.0/src/components/tabs 使用: <template> <Tabs name="first"> <TabPane label=...

    概述 

    选项卡切换组件,常用于平级区域大块内容的的收纳和展现。

    源码地址:https://github.com/iview/iview/tree/2.0/src/components/tabs

    使用:

    <template>
        <Tabs name="first">
            <TabPane label="macOS" icon="logo-apple" tab="first">
                <Tabs name="second" >
                    <TabPane label="macOS" icon="logo-apple" tab="second">标签一的内容</TabPane>
                    <TabPane label="Windows" icon="logo-windows" tab="second">标签二的内容</TabPane>
                    <TabPane label="Linux" icon="logo-tux" tab="second">标签三的内容</TabPane>
                </Tabs>
            </TabPane>
            <TabPane label="Windows" icon="logo-windows" tab="first">标签二的内容</TabPane>
        </Tabs>
    </template>

    在源码的tabs文件下有三个文件:index.js,tabs.vue,pane.vue

    index.js中引入了tabs.vue和pane.vue.

    import Tabs from './tabs.vue';
    import Pane from './pane.vue';
    
    Tabs.Pane = Pane;
    export default Tabs;

    tabs.vue

    tabs.vue是整个组件的容器,分为三部分:

    1 通过<slot name="extra"></slot> 扩展tabs选项的附加内容。

    2 通过this.$children获取tabs下的每一个TabPane并放进navLIst,遍历navLIst设置tabs选项标签。

    3 声明slot接收整个panes。

    this.$children查找当前组件的直接子组件,可以遍历全部子组件, 需要注意 $children 并不保证顺序,也不是响应式的。
    
    slot 插槽
    父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。Slot分发的内容,作用域是在父组件上
    <template>
        <div :class="classes">
            <div :class="[prefixCls + '-bar']">
                <div :class="[prefixCls + '-nav-right']" v-if="showSlot"><slot name="extra"></slot></div>
                <div
                    :class="[prefixCls + '-nav-container']"
                    tabindex="0"
                    ref="navContainer"
                    @keydown="handleTabKeyNavigation"
                    @keydown.space.prevent="handleTabKeyboardSelect(false)"
                >
                    <div ref="navWrap" :class="[prefixCls + '-nav-wrap', scrollable ? prefixCls + '-nav-scrollable' : '']">
                        <span :class="[prefixCls + '-nav-prev', scrollable ? '' : prefixCls + '-nav-scroll-disabled']" @click="scrollPrev"><Icon type="ios-arrow-back"></Icon></span>
                        <span :class="[prefixCls + '-nav-next', scrollable ? '' : prefixCls + '-nav-scroll-disabled']" @click="scrollNext"><Icon type="ios-arrow-forward"></Icon></span>
                        <div ref="navScroll" :class="[prefixCls + '-nav-scroll']">
                            <div ref="nav" :class="[prefixCls + '-nav']" :style="navStyle">
                                <div :class="barClasses" :style="barStyle"></div>
                                <div :class="tabCls(item)" v-for="(item, index) in navList" @click="handleChange(index)">
                                    <Icon v-if="item.icon !== ''" :type="item.icon"></Icon>
                                    <Render v-if="item.labelType === 'function'" :render="item.label"></Render>
                                    <template v-else>{{ item.label }}</template>
                                    <Icon :class="[prefixCls + '-close']" v-if="showClose(item)" :type="arrowType" :custom="customArrowType" :size="arrowSize" @click.native.stop="handleRemove(index)"></Icon>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div :class="contentClasses" :style="contentStyle" ref="panes"><slot></slot></div>
        </div>
    </template>

    pane.vue

    pane窗格文件主要作用是,接收传进来name,label,icon,disabled,closable,tab,index参数,和父组件传进来的注入inject: ['TabsInstance'],以获取父组件的this引用.以便在参数及销毁时调用父组件的updateNav更新每一个tab.

    provide/inject
    
    在vue中不同组件通信方式如下:
    1.父子组件,通过prop
    2.非父子组件,通过vuex或根vue转载器
    
    通常是以上两种情况,然而还有一种比较特殊的情况,即孙子组件或更深层次的组件通信
    
    为什么不用vuex,简单省事????
    有很多为了这个引入vuex会导致代码性价比比较低,项目本身没有使用vuex的必要
    1.provide就相当于加强版父组件prop
    2.inject就相当于加强版子组件的props 
    
    缺点
    这么做也是有明显的缺点的,在任意层级都能访问导致数据追踪比较困难,因此这个属性通常并不建议使用。能用vuex的使用vuex,但是在做组件库开发时,不对vuex进行依赖,且不知道用户使用环境的情况下可以很好的使用 
    
    
    <template>
        <div :class="prefixCls" v-show="show" :style="contentStyle"><slot></slot></div>
    </template>
    <script>
        const prefixCls = 'ivu-tabs-tabpane';
    
        export default {
            name: 'TabPane',
            inject: ['TabsInstance'],
            props: {
                name: {
                    type: String
                },
                label: {
                    type: [String, Function],
                    default: ''
                },
                icon: {
                    type: String
                },
                disabled: {
                    type: Boolean,
                    default: false
                },
                closable: {
                    type: Boolean,
                    default: null
                },
                // Tabs 嵌套时,用 tab 区分层级,指向对应的 Tabs 的 name
                tab: {
                    type: String
                },
                // 在 TabPane 使用 v-if 时,并不会按照预先的顺序渲染,这时可设置 index,并从小到大排序
                // 数值需大于 0
                index: {
                    type: Number
                }
            },
            data () {
                return {
                    prefixCls: prefixCls,
                    show: true,
                    currentName: this.name
                };
            },
            computed: {
                contentStyle () {
                    return {
                        visibility: this.TabsInstance.activeKey !== this.currentName ? 'hidden' : 'visible'
                    };
                }
            },
            methods: {
                updateNav () {
                    this.TabsInstance.updateNav();
                }
            },
            watch: {
                name (val) {
                    this.currentName = val;
                    this.updateNav();
                },
                label () {
                    this.updateNav();
                },
                icon () {
                    this.updateNav();
                },
                disabled () {
                    this.updateNav();
                }
            },
            mounted () {
                this.updateNav();
            },
            destroyed () {
                this.updateNav();
            }
        };
    </script>
    

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    展开全文
  • 以前写过一篇 tabs 选项卡切换效果,不过是用 javascript 写的,最近在学习 jquery,今天抽空用 jquery 重写了这个效果。 效果图如下: html 代码如下: <!DOCTYPE HTML> <html lang="en-US"> ...

    以前写过一篇 tabs 选项卡切换效果,不过是用 javascript 写的,最近在学习 jquery,今天抽空用 jquery 重写了这个效果。

    效果图如下:

    html 代码如下:

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8"/>
        <title>选项卡(jquery版)</title>
        <link rel="stylesheet" type="text/css" href="css/base.css" media="all"/>
        <style type="text/css">
        .tabs{width:500px;margin:100px auto;}
        .tabs_menu{font-size:0;}
        .tabs_menu a{padding:5px;border:1px solid blue;font-size:12px;margin-left:10px;background:#ECECEC;float:left;}
        .tabs_menu .selected{background:white;border-bottom:1px solid white;position:relative;}
        .tabs_content{border:1px solid blue;padding:10px;margin-top:-1px;}
        </style>
    </head>
    <body>
        <div class="tabs">
            <h2 class="tabs_menu clearfix">
                <a href="javascript:;" class="selected">新闻</a>
                <a href="javascript:;">体育</a>
                <a href="javascript:;">娱乐</a>
            </h2>
            <div class="tabs_content_wrap">
                <div class="tabs_content">新闻新闻新闻新闻新闻新闻</div>
                <div class="tabs_content hide">体育体育体育体育体育体育</div>
                <div class="tabs_content hide">娱乐娱乐娱乐娱乐娱乐娱乐</div>
            </div>
        </div>
    </body>
    </html>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
    var $menu = $('.tabs > .tabs_menu a');
    $menu.click(function(){
        $(this).addClass('selected').siblings().removeClass('selected');
        var index = $menu.index(this);
        $('.tabs_content_wrap > .tabs_content').eq(index).show().siblings().hide();
    });
    </script>

    PS:以上是本人通过所学的 jquery 知识,随意写的一些效果。

    转载于:https://www.cnblogs.com/yjzhu/archive/2013/03/27/2984058.html

    展开全文
  • 现在的页面上有许多各种各样的页面效果,常用的有弹出层效果,无缝滚动效果,选项卡切换效果。今天分享一款自己用原生 js 写的选项卡切换效果,由于本人水平有限,如有问题请指出。 效果图如下: html 代码: ...
  • 以前写过一篇 tabs选项卡切换效果,不过是用原生 javascript 写的,最近在学习 jquery,今天抽空用 jquery 重写了这个效果。 效果图如下: html 代码如下: DOCTYPE HTML> html lang="en-US"> head> meta ...
  • 【jquery】tabs选项卡切换效果(jquery版)
  • 以前写过一篇 tabs选项卡切换效果,不过是用原生 javascript 写的,最近在学习 jquery,今天抽空用 jquery 重写了这个效果。 效果图如下: html 代码如下: &lt;!DOCTYPE HTML&gt; &lt;...
  • ion-tabs是ionic中的选项卡组件,路由使用的是angular-ui-router.js。因此必须先掌握uiRoute。 效果图 实例代码 index.html <body ng-app="starter"> <!--ion-nav-view用来渲染模板...
  • 在echats图表使用tabs选项卡切换时,只有第一个图表宽度显示正常,echats图表宽度设置的100%,但是第二个,第三个。。。都图表宽度都只显示100px宽度,所有的东西都压缩显示在一小块,显示不完整。 原因:由于v-show...
  • 使用场景:在tab 选项卡中使用了 echart 图表,然后在页面切换时,echarts 图表的宽度由原来的 100% 变为 100px 问题原因:echarts 渲染时 tab 选项卡 的 display 属性为 none,所以 width 属性为 100% 就没有可继承...
  • Simple Tabs 简单的Tabs——选项卡菜单切换插件,橘子香水原创,兼容IE6,7,FF1.5,FF3.0,ie8下样式有一点问题,刷新页面后仍然可以保持被激活的选项卡,其中样式借用了jquery的ui-tab的样式,JS部分...
  • 主要为大家详细介绍了Vue.js组件tabs实现选项卡切换效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了jquery自动切换tabs选项卡的具体实现,有需要的朋友可以参考一下
  • jquery自动切换tabs选项卡

    千次阅读 2010-04-15 11:34:00
    pageEncoding="utf-8"%> String path = request.getContextPath(); %>Insert title here/js/jquery-1.2.6.js">/js/ui.core.js" type="text/javascript">/css/ui.tabs.css" rel=
  • Tabs带图形按钮选项卡切换是一款基于jquery css3实现的tab选项卡切换特效代码。
  • 一、创建菜单项 aa1 bb1 bb2 二、点击菜单生成tabs选项卡,并添加刷新按钮,实现选项卡之间切换(只显示一个) $(".tree-node").cli
  • vue element tabs 点击链接切换选项卡

    千次阅读 2019-02-22 17:39:12
    内容中点击某个内容,然后切换到其他选项卡中显示对应的内容 如图 我需要点击提货单编号后在第二个选项卡中显示对应的提货单信息 对应的提货单信息 二、代码实现 思路就是:在需要链接的地方添加事件(我在...
  • 大容器左侧Tabs选项卡是一款左侧三个Tabs选项卡切换的焦点图特效代码。
  • 这是一款使用纯CSS3制作的Tabs选项卡特效。该Tabs选项卡简约时尚,各个选项卡之间切换时使用了下划线跟随动画,整体效果非常不错。
  • 这是一款效果非常炫酷的HTML5 SVG和jQuery垂直选项卡布局特效。该选项卡布局将tabs垂直排列在左侧,每个Tab都使用SVG来制作图标,当用户切换Tab时,旧的选项卡往上移动,新的选项卡从上面往下移动,效果非常酷。
  • easyUI切换tabs(选项卡)

    千次阅读 2015-04-02 17:22:50
    在做项目时候遇到一个需求就是当我保存第一个tabs选项卡里面的数据之后,自动跳到第二个选项卡中, 查看easyui的API后发现使用select方法可以实现(select which 选择一个选项卡面板,'which'参数可以是选项卡...

空空如也

1 2 3 4 5 ... 20
收藏数 21,594
精华内容 8,637
关键字:

tabs