精华内容
下载资源
问答
  • Vue+ElementUI+Tabs实现选项卡|标签页|美化标签页面|局部替换样式|好看的标签页|选项卡
    千次阅读
    2021-08-06 12:42:12

    因为elementUI自带的标签页实在太丑了,所以给他美化了以下,样式截图如下

    1.使用 css 父级选择器来限制样式覆盖的范围, 不然会全局修改的 代码中最外层的样式 class="home" ,下面定义要覆盖的样式都要以.home为前缀.

    2.把原来的边框修改成了圆角.

    3.增加标签页之间的间距.

    4.增加文字到标签页边框的距离

    5.修改背景色, 你也可以自定义颜色

    <template>
      <div class="home">
        <div style="margin-bottom: 20px;margin-top: 20px;">
          <el-button
              type="primary"
              @click="addTab(editableTabsValue)"
    更多相关内容
  • web移动端选项卡切换,可以滑动切换,也能点击切换。
  • C# Winform选项卡集成窗体

    热门讨论 2014-07-19 08:56:37
    最近需要做的一个项目,为了避免从菜单中选择的麻烦,需要把几个窗体集成到一起,通过TabControl选项卡来切换,这样的设计实现在一定程度上也是实现了代码的复用,扩展思路来说我们可以把一些小的功能做到窗体里在...
  • 仿搜狐新闻选项卡

    2015-01-25 14:06:18
    仿搜狐新闻选项卡
  • jquery ajax选项卡使用jQuery选项卡切换异步加载请求数据
  • Android可滑动选项卡

    热门讨论 2014-09-10 15:52:31
    Android可滑动选项卡 一般项目中用的,以前用Tab 现在大多数用Fragment和ViewPage来实现可滑动
  • tab选项卡是常见的网页效果,也叫滑动门特效,本资源实现自动调转和手动(click onmouseover)切换
  • fragment实现选项卡界面

    千次下载 热门讨论 2013-11-24 19:34:56
    而这种底部选项卡的风格界面的实现也由ActivityGroup转向了Fragment。先了,费话不多说了,下面我会一步一步教您怎么实现这个界面。在动手之前,我可能需要把我做好的样式图给你看一下,以遍让您有一个心里预期。
  • DevExpress+XtraTabControl选项卡关闭方法

    热门讨论 2012-10-25 17:44:47
    DevExpress+XtraTabControl选项卡准确关闭方法实现代码
  • 选项卡在项目中非常的常用,每一个项目都会用到,我写的选项卡是坊微信界面的既可以点击切换界面,又可滑动切换
  • html中制作选项卡(tabs)

    千次阅读 2021-06-10 16:12:09
    快速建立一个html选项卡(tabs)在网页中常常会看到这样的标签页,其实实现的方法也不难,接下来就介绍如何快速的建立一个html标签卡 这是我做好的demo预览效果 使用的软件以及技术:sublime text 3编辑器...

    快速建立一个html选项卡(tabs)

    在网页中常常会看到这样的标签页,其实实现的方法也不难,接下来就介绍如何快速的建立一个html标签卡

    00af97f4d406b723f7d1ad4d8564ddbf.png

    这是我做好的demo预览效果

    1bf877adc142e2fa35b4bc820600320d.png

    使用的软件以及技术:

    sublime text 3编辑器

    html+css

    jQuery

    1.建立一个html,并写好基本的结构

    如果你使用的是sublime text 3并安装emmet插件,就可以快速创建了:div>(ul>li{Section $}*4)+div*4,然后敲击tab键。

    2fc84ebad2c2de1db3895e9055b54024.png

    给整体的div添加class为label,给第一个li添加class为showed,给第一个小div添加class为showed,并完善div里的文字内容

    Section 1

    Section 2

    Section 3

    Section 4

    This is the first section

    This is the second section

    This is the third section

    This is the fourth section

    2.编写css样式

    设定label的大小为宽400,高500,位置和文字都居中。

    设定ul的大小为宽400,高50,

    设定li的大小为宽100,高50,无头部样式,向左浮动,默认的背景色为灰色,文字为白色上下居中。

    设定下面的内容宽400,高50,绝对定位(让四个div重叠),文字为白色,背景为灰黑色,默认隐藏。

    li标签中的showed类就是现在要展示的标签,突出展示,颜色为灰黑色,顶部有橘色的边框,文字调整高度居中,设置阴影突出立体感。

    div标签中的showed类就是对应展现的内容了,display改为block显示,并设置阴影突出立体感。

    代码如下:

    *{

    margin: 0px;

    padding: 0px;

    }

    .label{

    width: 400px;

    height: 500px;

    margin: 120px auto;

    text-align: center;

    }

    .label>ul{

    width: 400px;

    height: 50px;

    }

    .label>ul>li{

    list-style: none;

    float: left;

    width: 100px;

    height: 50px;

    background-color: gray;

    line-height: 50px;

    color: white;

    }

    .label>div{

    width: 400px;

    height: 500px;

    position: absolute;

    color: white;

    line-height: 70px;

    background-color: #222222;

    display: none;

    }

    .label li.showed{

    background-color: #222222;

    border-top: 5px solid orange;

    line-height: 40px;

    box-shadow: 5px 5px 20px #333333;

    }

    .label div.showed{

    display: block;

    box-shadow: 5px 5px 20px #333333;

    }

    3.编写js

    首先引入jqurey

    当鼠标悬停在li标签上时,如果不是showed类的话(不是当前展现的内容),执行以下步骤

    将带有showed类的标签去掉showed类

    将当前的li添加上showed类

    将当前对象li标签在父标签中的位置index()对应的内容div也添上showed类

    4.完成

    这样简单的几个步骤就完成动态的选项卡切换效果,演示在文章的开头,完整的demo文件在百度网盘中。

    标签卡Demo.html演示文件:百度网盘 https://pan.baidu.com/s/1bpVwQuV

    展开全文
  • ViewPager+Fragment实现选项卡效果滑动切换,滑动切换界面或者点击页卡切换
  • 选项卡选项卡选项卡选项卡选项卡选项卡选项卡选项卡选项卡选项卡选项卡选项卡选项卡选项卡选项卡选项卡选项卡选项卡选项卡选项卡
  • 仿qqtab选项卡
  • Android快速开发-选项卡

    千次阅读 多人点赞 2017-06-05 15:24:20
    介绍几行代码实现Android选项卡界面,支持标准底部Tab自定义视图选项卡,头部文字选项卡

    介绍

    几行代码实现Android选项卡界面,支持标准底部Tab自定义视图选项卡,头部文字选项卡。

    底部自定义视图选项卡

    先来看看实现下图中的效果我们代码应该怎么写?
    底部自定义视图选项卡

    实现上图效果只需以下代码:

    public class TestBottomTabActivity extends TabActivity {
    
        @Override
        protected List<TabItemView> getTabViews() {
            List tabviews = new ArrayList();
            tabviews.add(new TabItemView(this,"1",R.color.colorPrimary,R.mipmap.ic_launcher,0));
            tabviews.add(new TabItemView(this,"2",R.color.colorPrimary,R.mipmap.ic_launcher,0));
            tabviews.add(new TabItemView(this,"3",R.color.colorPrimary,R.mipmap.ic_launcher,0));
            tabviews.add(new TabItemView(this,"4",R.color.colorPrimary,R.mipmap.ic_launcher,0));
            return tabviews;
        }
    
        @Override
        protected List<Fragment> getFragments() {
            List fragments = new ArrayList();
            fragments.add(BlankFragment.newInstance("1",null));
            fragments.add(BlankFragment.newInstance("2",null));
            fragments.add(BlankFragment.newInstance("3",null));
            fragments.add(BlankFragment.newInstance("4",null));
            return fragments;
        }
    
        @Override
        protected List<String> getTitles() {
            return null;
        }
    
        @Override
        protected TabType getTabType() {
            return TabType.BottomCustomViewTab;
        }
    }
    

    头部文字选项卡

    先来看看实现下图中的效果我们代码应该怎么写?

    头部文字选项卡

    实现上图效果只需以下代码:

    public class TestTopTabActivity extends TabActivity {
    
        @Override
        protected List<TabItemView> getTabViews() {
            return null;
        }
    
        @Override
        protected List<Fragment> getFragments() {
            List fragments = new ArrayList();
            fragments.add(BlankFragment.newInstance("1",null));
            fragments.add(BlankFragment.newInstance("2",null));
            fragments.add(BlankFragment.newInstance("3",null));
            fragments.add(BlankFragment.newInstance("4",null));
            return fragments;
        }
    
        @Override
        protected List<String> getTitles() {
            List list = new ArrayList();
            list.add("待支付");
            list.add("待发货");
            list.add("待收货");
            list.add("待评价");
            return list;
        }
    
        @Override
        protected TabType getTabType() {
            return TabType.TopTitleTab;
        }
    }
    

    实现

    准备知识

    我们都知道在android.support.design.widget包中为我们提供了TabLayout用来进行水平方向的tab展示,不清楚的同学可以先百度了解一下,用法很简单,大致如下:

            viewPager = (ViewPager) findViewById(R.id.viewPager);
            tabLayout = (TabLayout) findViewById(R.id.tabLayout);
    
             //为viewPager设置一个FragmentPagerAdapter
            pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this);
            viewPager.setAdapter(pagerAdapter);
            //进行关联
            tabLayout.setupWithViewPager(viewPager);
            tabLayout.setTabMode(TabLayout.MODE_FIXED);
    

    实现一个头部文字选项卡

    为了能够快速实现一个头部文字选项卡,我们可以将一些不变的代码写在一个父类Activity,让后提供抽象方法来让子类去实现会变化的代码,由此如果我们实现一个头头部文字选项卡抽象类如下:

    1、首先定义布局
    activity_tab_top.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  android:orientation="vertical"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent">
        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="48dp"></android.support.design.widget.TabLayout>
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#d3d3d3"
            android:orientation="vertical">
        </View>
        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"></android.support.v4.view.ViewPager>
    </LinearLayout>
    

    2、抽象类实现

    public abstract class TabActivity extends AppCompatActivity{
    
        private ViewPager viewPager;
        private TabLayout tabLayout;
        private SimpleFragmentPagerAdapter pagerAdapter;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_tab_top);
            initView();
        }
    
        private void initView() {
            viewPager = (ViewPager) findViewById(R.id.viewPager);
            tabLayout = (TabLayout) findViewById(R.id.tabLayout);
    
            pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this);
            viewPager.setAdapter(pagerAdapter);
            tabLayout.setupWithViewPager(viewPager);
            tabLayout.setTabMode(TabLayout.MODE_FIXED);
        }
    
        protected abstract List<Fragment> getFragments();//返回tab对应的fragment
        protected abstract List<String> getTitles();//头部显示的title列表
    
    
        public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {
    
    
            public SimpleFragmentPagerAdapter(FragmentManager fm, Context context) {
                super(fm);
            }
    
            @Override
            public Fragment getItem(int position) {
                return getFragments().get(position);
            }
    
            @Override
            public int getCount() {
                return getFragments().size();
            }
    
            @Override
            public CharSequence getPageTitle(int position) {
                if (getTitles()!=null&&!getTitles().isEmpty()){
                    return getTitles().get(position);
                }
                return null;
            }
    
        }
    }
    

    以上代码便实现了一个通用的头部文字选项卡抽象类,以后要实现类似上面图2界面只需要这样:

    public class TestTopTabActivity extends TabActivity {
    
        @Override
        protected List<Fragment> getFragments() {
            List fragments = new ArrayList();
            fragments.add(BlankFragment.newInstance("1",null));
            fragments.add(BlankFragment.newInstance("2",null));
            fragments.add(BlankFragment.newInstance("3",null));
            fragments.add(BlankFragment.newInstance("4",null));
            return fragments;
        }
    
        @Override
        protected List<String> getTitles() {
            List list = new ArrayList();
            list.add("待支付");
            list.add("待发货");
            list.add("待收货");
            list.add("待评价");
            return list;
        }
    }
    

    实现一个底部自定义视图选项卡

    要实现一个底部自定义视图要相对麻烦一点,因为底部的视图是由我们提供的,所以需要一个我们的自定义视图,那么怎么实现呢,我们可能想到在底部设置写一个自定义能添加底部视图的view,然后做不同的点击处理。但是TabLayout下的每个tab其实是支持设置自定义视图的,只需要调用TabLayout.Tab对象提供的setCustomView方法即可。

    这样我们提供一个底部自定义视图选项卡的抽象类如下:

    1、首先定义布局
    activity_tab.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  xmlns:app="http://schemas.android.com/apk/res-auto"
                  android:orientation="vertical"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent">
    
        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"></android.support.v4.view.ViewPager>
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#d3d3d3"
            android:orientation="vertical">
        </View>
        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            app:tabIndicatorHeight="0dp"
            android:layout_height="48dp"></android.support.design.widget.TabLayout>
    </LinearLayout>
    

    2、抽象类实现

    public abstract class TabActivity extends AppCompatActivity{
    
        private ViewPager viewPager;
        private TabLayout tabLayout;
        private SimpleFragmentPagerAdapter pagerAdapter;
        private TabType mTabType = TabType.BottomCustomViewTab;
    
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_tab);
            initView();
        }
    
        private void initView() {
            viewPager = (ViewPager) findViewById(R.id.viewPager);
            tabLayout = (TabLayout) findViewById(R.id.tabLayout);
    
            pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this);
            viewPager.setAdapter(pagerAdapter);
            tabLayout.setupWithViewPager(viewPager);
            tabLayout.setTabMode(TabLayout.MODE_FIXED);
    
            if (getTabViews()!=null){
                for (int i = 0; i < tabLayout.getTabCount(); i++) {
                    TabLayout.Tab tab = tabLayout.getTabAt(i);
                    tab.setCustomView(pagerAdapter.getTabView(i));
                }
            }
        }
    
    
        protected abstract List<TabItemView> getTabViews();//返回底部自定义tab视图
        protected abstract List<Fragment> getFragments();//返回tab对应的fragment
    
        public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {
    
    
            public SimpleFragmentPagerAdapter(FragmentManager fm, Context context) {
                super(fm);
            }
    
            @Override
            public Fragment getItem(int position) {
                return getFragments().get(position);
            }
    
            @Override
            public int getCount() {
                return getFragments().size();
            }
    
            public View getTabView(int position) {
                return getTabViews().get(position);
            }
    
        }}
    

    上面代码和之前实现一个头部标题选项卡的抽象类大致一样,只是提供了 protected abstract List getTabViews()方法用于让子类提供底部自定义tab视图TabItemView,底部视图一般就是一个图片加一个文字,那么我们自定义一个底部视图TabItemView如下。

    TabItemView实现如下:

    public class TabItemView extends LinearLayout {
    
        /**
         * Item 的标题
         */
        public String title;
    
        public int textColor;
        public int iconDrawable;
        public int bgDrawable;
    
        public TextView tvTitle;
        public ImageView ivIcon;
    
        public TabItemView(Context context, String title, int textColor, int iconDrawable,
                           int bgDrawable) {
            super(context);
            this.title = title;
            this.iconDrawable = iconDrawable;
            this.textColor = textColor;
            this.bgDrawable = bgDrawable;
            init();
        }
    
        /**
         * 初始化
         */
        public void init(){
            View view = LayoutInflater.from(super.getContext()).inflate(R.layout.view_tab_item, this);
            tvTitle = (TextView) view.findViewById(R.id.tvTitle);
            ivIcon = (ImageView) view.findViewById(R.id.ivIcon);
    
            LinearLayout.LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
            layoutParams.weight = 1;
            view.setLayoutParams(layoutParams);
    
            if (iconDrawable!=0){
                ivIcon.setImageResource(iconDrawable);
            }
            if (bgDrawable!=0) {
                this.setBackgroundResource(bgDrawable);
            }
            if (textColor!=0){
                tvTitle.setTextColor(textColor);
            }
            tvTitle.setText(title);
    
        }
    }

    TabItemView对应布局:
    view_tab_item.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/viewTabView"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:background="?android:selectableItemBackground"
        android:gravity="center"
        android:layout_height="match_parent">
    
        <ImageView
            android:id="@+id/ivIcon"
            android:layout_weight="1"
            android:src="@mipmap/ic_launcher"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    
        <TextView
            android:id="@+id/tvTitle"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="首页"/>
    
    </LinearLayout>

    很简单就是提供一个构造方法在初始化的时候设置图片、文字、文字颜色等信息。

    那么到此,我们如果遇到如上图1要实现一个底部视图选项卡只需要这样:

    public class TestBottomTabActivity extends TabActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
        }
    
        @Override
        protected List<TabItemView> getTabViews() {
            List tabviews = new ArrayList();
            tabviews.add(new TabItemView(this,"1",R.color.colorPrimary,R.mipmap.ic_launcher,0));
            tabviews.add(new TabItemView(this,"2",R.color.colorPrimary,R.mipmap.ic_launcher,0));
            tabviews.add(new TabItemView(this,"3",R.color.colorPrimary,R.mipmap.ic_launcher,0));
            tabviews.add(new TabItemView(this,"4",R.color.colorPrimary,R.mipmap.ic_launcher,0));
            return tabviews;
        }
    
        @Override
        protected List<Fragment> getFragments() {
            List fragments = new ArrayList();
            fragments.add(BlankFragment.newInstance("1",null));
            fragments.add(BlankFragment.newInstance("2",null));
            fragments.add(BlankFragment.newInstance("3",null));
            fragments.add(BlankFragment.newInstance("4",null));
            return fragments;
        }
    }
    

    二者结合

    到此相信你们已经发现实现头部文字选项卡或者底部自定义视图选项卡这里都用了TabLayout+ViewPager的方式,那么我们来个结合。

    提供一个枚举指定tab类型,根据tab类型进行数据的获取即可。
    组合之后的抽象类如下:

    public abstract class TabActivity extends AppCompatActivity{
    
        private ViewPager viewPager;
        private TabLayout tabLayout;
        private SimpleFragmentPagerAdapter pagerAdapter;
        private TabType mTabType = TabType.BottomCustomViewTab;
    
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            mTabType = getTabType()==null?TabType.BottomCustomViewTab:getTabType();
            if (mTabType==TabType.BottomCustomViewTab){
                setContentView(R.layout.activity_tab);
            }else{
                setContentView(R.layout.activity_tab_top);
            }
            initView();
        }
    
        private void initView() {
            viewPager = (ViewPager) findViewById(R.id.viewPager);
            tabLayout = (TabLayout) findViewById(R.id.tabLayout);
    
            pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this);
            viewPager.setAdapter(pagerAdapter);
            tabLayout.setupWithViewPager(viewPager);
            tabLayout.setTabMode(TabLayout.MODE_FIXED);
    
            if (getTabViews()!=null){
                for (int i = 0; i < tabLayout.getTabCount(); i++) {
                    TabLayout.Tab tab = tabLayout.getTabAt(i);
                    tab.setCustomView(pagerAdapter.getTabView(i));
                }
            }
        }
    
    
        protected abstract List<TabItemView> getTabViews();//返回底部自定义tab视图
        protected abstract List<Fragment> getFragments();//返回tab对应的fragment
        protected abstract List<String> getTitles();//头部显示的title列表
        protected abstract TabType getTabType();//tab类型-分为底部tab和头部tab
    
        public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {
    
    
            public SimpleFragmentPagerAdapter(FragmentManager fm, Context context) {
                super(fm);
            }
    
            @Override
            public Fragment getItem(int position) {
                return getFragments().get(position);
            }
    
            @Override
            public int getCount() {
                return getFragments().size();
            }
    
            @Override
            public CharSequence getPageTitle(int position) {
                if (getTitles()!=null&&!getTitles().isEmpty()){
                    return getTitles().get(position);
                }
                return null;
            }
    
            public View getTabView(int position) {
                return getTabViews().get(position);
            }
    
        }
    
        public enum TabType{//Tab类型
            BottomCustomViewTab,//底部自定义tab
            TopTitleTab//头部标题tab
        }
    }

    这样就实现了统一,以后不管是底部还是头部,只需要继承TabActivity之后实现相应的抽象方法即可(参考文章开头)。

    结束

    源码下载请点击http://download.csdn.net/detail/yissan/9861159
    是不是节省了一点点时间啊。如果本文对你有一点点帮助请关注我或者为我点赞!不胜感激!

    展开全文
  • Qt5:TabWidget选项卡

    万次阅读 多人点赞 2018-11-12 10:31:02
    Qt的Tab Widget控件会创建一个标签栏,标签栏上可以创建很多选项卡,默认自动生成两个(tab和tab_2),其它的自己添加,而每个选项卡又控制着一个界面,切换不同的选项卡就会跳转到相应的界面,实现了资源共享的功能...

    Qt的Tab Widget控件会创建一个标签栏,标签栏上可以创建很多选项卡,默认自动生成两个(tab和tab_2),其它的自己添加,而每个选项卡又控制着一个界面,切换不同的选项卡就会跳转到相应的界面,实现了资源共享的功能。

     

    简单示例 


    这个简单示例是根据官方文档使用代码来创建选项卡,没有使用Qt设计师添加,Qt设计师只是添加了一个Tab Widget标签栏。打开Qt,新建一个Qt Widgets Application项目,转到设计师模式,从左侧工具栏添加一个Tab Widget控件到窗口上,调整Tab Widget控件的大小,修改Tab Widget控件的对象名为tabWidget,然后添加如下代码:

    mainwindow.h 

    #ifndef MAINWINDOW_H
    #define MAINWINDOW_H
    
    #include <QMainWindow>
    
    namespace Ui {
    class MainWindow;
    }
    
    class MainWindow : public QMainWindow
    {
        Q_OBJECT
    
    public:
        explicit MainWindow(QWidget *parent = 0);
        ~MainWindow();
    
    private:
        Ui::MainWindow *ui;
    };
    
    #endif // MAINWINDOW_H

    mainwindow.cpp 

    #include "mainwindow.h"
    #include "ui_mainwindow.h"
    #include "QDebug"
    
    MainWindow::MainWindow(QWidget *parent) :
        QMainWindow(parent),
        ui(new Ui::MainWindow)
    {
        ui->setupUi(this);
        setWindowTitle(tr("TabWidget"));//设置标题
        ui->tabWidget->clear();//清空选项卡
    
        QWidget *tabSports=new QWidget(this);
        QWidget *tabMusic=new QWidget(this);
        QWidget *tabSoftware=new QWidget(this);
        QWidget *tabDigital=new QWidget(this);
        QWidget *tabLanguage=new QWidget(this);
    
        ui->tabWidget->setTabPosition(QTabWidget::North);//设置选项卡的方位东南西北,默认在上方
    
        ui->tabWidget->addTab(tabSports,tr("运动"));//在后面添加选项卡
        ui->tabWidget->addTab(tabMusic,tr("音乐"));
        ui->tabWidget->addTab(tabSoftware,QIcon("F:\\磊神图片\\icons\\1.ico"),tr("软件"));//在后面添加带图标的选项卡
        ui->tabWidget->insertTab(3,tabDigital,tr("数码"));//插入选项卡
        ui->tabWidget->insertTab(4,tabLanguage,QIcon("F:\\磊神图片\\icons\\3.ico"),tr("语言"));//插入带图标的选项卡
        ui->tabWidget->setTabShape(QTabWidget::Triangular);//设置选项卡的形状
        //ui->tabWidget->removeTab(0);//移除选项卡
    
        ui->tabWidget->setTabIcon(0,QIcon("F:\\磊神图片\\icons\\2.ico"));//设置选项卡图标
        ui->tabWidget->setTabIcon(1,QIcon("F:\\磊神图片\\icons\\4.ico"));//设置选项卡图标
        ui->tabWidget->setTabIcon(3,QIcon("F:\\磊神图片\\icons\\5.ico"));//设置选项卡图标
        ui->tabWidget->setIconSize(QSize(50,25));//设置图标的大小(选项卡的大小也会改变)
        ui->tabWidget->setMovable(true);
        ui->tabWidget->setTabsClosable(true);//在选项卡上添加关闭按钮
        qDebug()<<"第一个选项卡名称:"<<ui->tabWidget->tabText(0);//获取选项卡名称
        qDebug()<<"iconSize:"<<ui->tabWidget->iconSize();//获取icon的尺寸
    
        ui->tabWidget->setTabEnabled(0,false);//禁用选项卡
        ui->tabWidget->setTabEnabled(1,false);
        ui->tabWidget->setTabToolTip(2,tr("Beautiful"));//鼠标悬停弹出提示
        ui->tabWidget->usesScrollButtons();//选项卡太多滚动
        //ui->tabWidget->removeTab(0);//移除选项卡
        //ui->tabWidget->setTabWhatsThis(3,tr("Beautiful Girl"));//不知道干嘛的
        //ui->tabWidget->setTabBarAutoHide(true);//包含少于2个选项卡时会自动隐藏
        //ui->tabWidget->setTabText(0,tr("软件"));//按索引修改选项卡的名称
        //ui->tabWidget->setTabText(1,tr("舞蹈"));
        //ui->tabWidget->setDocumentMode(true);//设置选项卡是否以适合文档页面的模式呈现
        //ui->tabWidget->setElideMode(Qt::ElideLeft);//标签栏中删除文字
    
        //ui->tabWidget->clear();//清空选项卡
    }
    
    MainWindow::~MainWindow()
    {
        delete ui;
    }

    显示效果


     

    综合示例 


    综合示例Tab Widget选项卡控制着表格、柱状图、按钮和编辑框、树部件、列表部件的显示,里面用到了QCustomPlot类绘制柱状图,需要添加一些东西,使用方法请看另一篇文章:https://blog.csdn.net/mars_xiaolei/article/details/83281209。打开Qt,新建一个Qt Widgets Application项目,转到设计师模式,从左侧工具栏添加一个Tab Widget控件到窗口上,调整Tab Widget控件的大小,修改Tab Widget控件的对象名为tabWidget,选项卡和其它控件都是要自己添加的,每个选项卡控制这一个界面,然后添加如下代码:

      pro文件

    #------------------------------------------------
    #
    # Project created by QtCreator 2018-11-09T13:39:09
    #
    #-------------------------------------------------
    QT       += core gui
    greaterThan(QT_MAJOR_VERSION, 4): QT += widgets printsupport
    TARGET = QTabWidget
    TEMPLATE = app
    # The following define makes your compiler emit warnings if you use
    # any feature of Qt which has been marked as deprecated (the exact warnings
    # depend on your compiler). Please consult the documentation of the
    # deprecated API in order to know how to port your code away from it.
    DEFINES += QT_DEPRECATED_WARNINGS
    # You can also make your code fail to compile if you use deprecated APIs.
    # In order to do so, uncomment the following line.
    # You can also select to disable deprecated APIs only up to a certain version of Qt.
    #DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0
    SOURCES += \       
     main.cpp \       
     mainwindow.cpp \    
    qcustomplot.cpp
    HEADERS += \        
    mainwindow.h \    
    qcustomplot.h
    FORMS += \       
     mainwindow.ui
    

    mainwindow.h

    #ifndef MAINWINDOW_H
    #define MAINWINDOW_H
    
    #include <QMainWindow>
    
    namespace Ui {
    class MainWindow;
    }
    
    class MainWindow : public QMainWindow
    {
        Q_OBJECT
    
    public:
        explicit MainWindow(QWidget *parent = 0);
        ~MainWindow();
    
    private:
        Ui::MainWindow *ui;
    };
    
    #endif // MAINWINDOW_H
    

    mainwindow.cpp

    #include "mainwindow.h"
    #include "ui_mainwindow.h"
    #include "QDebug"
    #include <QTableWidget>//表格
    #include <QTableWidgetItem>//表格
    #include "qcustomplot.h"
    #include <QTreeWidget>
    #include "QStringList"
    
    MainWindow::MainWindow(QWidget *parent) :
        QMainWindow(parent),
        ui(new Ui::MainWindow)
    {
        ui->setupUi(this);
        setWindowTitle(tr("TabWidget"));//设置标题
    
        ui->tabWidget->setTabPosition(QTabWidget::North);//设置选项卡的方位东南西北,默认在上方
        //ui->tabWidget->setTabShape(QTabWidget::Triangular);//设置选项卡的形状
        ui->tabWidget->setTabIcon(0,QIcon("E:\\Qt_Project\\QTabWidget\\1.ico"));//设置选项卡图标
        ui->tabWidget->setTabIcon(1,QIcon("E:\\Qt_Project\\QTabWidget\\2.ico"));//设置选项卡图标
        ui->tabWidget->setTabIcon(2,QIcon("E:\\Qt_Project\\QTabWidget\\3.ico"));//设置选项卡图标
        ui->tabWidget->setTabIcon(3,QIcon("E:\\Qt_Project\\QTabWidget\\4.ico"));//设置选项卡图标
        ui->tabWidget->setTabIcon(4,QIcon("E:\\Qt_Project\\QTabWidget\\5.ico"));//设置选项卡图标
        ui->tabWidget->setIconSize(QSize(50,25));//设置图标的大小(选项卡的大小也会改变)
        ui->tabWidget->setMovable(true);
        ui->tabWidget->setTabsClosable(true);//在选项卡上添加关闭按钮
        qDebug()<<"第一个选项卡名称:"<<ui->tabWidget->tabText(0);//获取选项卡名称
        qDebug()<<"iconSize:"<<ui->tabWidget->iconSize();//获取icon的尺寸
        //ui->tabWidget->clear();//清空选项卡
    
        /*
         * 运动选项卡
        */
        ui->tableWidgetSports->setColumnCount(6);//设置列数
        ui->tableWidgetSports->setRowCount(10);//设置行数
        ui->tableWidgetSports->setWindowTitle("QTableWidget");
        QStringList m_Header;
        m_Header<<QString("田径")<<QString("篮球")<<QString("足球")<<QString("乒乓球")<<QString("羽毛球")<<QString("游泳");
        ui->tableWidgetSports->setHorizontalHeaderLabels(m_Header);//添加横向表头
        ui->tableWidgetSports->verticalHeader()->setVisible(true);//纵向表头可视化
        ui->tableWidgetSports->horizontalHeader()->setVisible(true);//横向表头可视化
        //ui->tableWidget->setShowGrid(false);//隐藏栅格
        ui->tableWidgetSports->setEditTriggers(QAbstractItemView::NoEditTriggers);//设置编辑方式:禁止编辑表格
        ui->tableWidgetSports->setSelectionBehavior(QAbstractItemView::SelectRows);//设置表格选择方式:设置表格为整行选中
        //ui->qTableWidget->setSelectionBehavior(QAbstractItemView::SelectColumns);//设置表格选择方式:设置表格为整列选中
        ui->tableWidgetSports->setSelectionMode(QAbstractItemView::SingleSelection);//选择目标方式
        ui->tableWidgetSports->setStyleSheet("selection-background-color:pink");//设置选中颜色:粉色
    
        for(int rows=0;rows<10;rows++)
        {
            for(int columns=0;columns<6;columns++)
            {
                if(columns==0)
                {
                    ui->tableWidgetSports->setItem(rows,columns,new QTableWidgetItem("刘翔"));
                }
                else if(columns==1)
                {
                    ui->tableWidgetSports->setItem(rows,columns,new QTableWidgetItem("姚明"));
                }
                else if(columns==2)
                {
                    ui->tableWidgetSports->setItem(rows,columns,new QTableWidgetItem("C罗"));
                }
                else  if(columns==3)
                {
                    ui->tableWidgetSports->setItem(rows,columns,new QTableWidgetItem("马林"));
                }
                else if(columns==4)
                {
                    ui->tableWidgetSports->setItem(rows,columns,new QTableWidgetItem("林丹"));
                }
                else if(columns==5)
                {
                    ui->tableWidgetSports->setItem(rows,columns,new QTableWidgetItem("孙杨"));
                }
            }
        }
        for(int rows=0;rows<10;rows++)
        {
            for(int columns=0;columns<6;columns++)
            {
                ui->tableWidgetSports->setColumnWidth(columns,125);
                ui->tableWidgetSports->setRowHeight(rows,30);
                ui->tableWidgetSports->item(rows,columns)->setTextAlignment(Qt::AlignCenter);//居中显示
                ui->tableWidgetSports->item(rows,columns)->setBackgroundColor(QColor(85,170,255));//设置前景颜色
                ui->tableWidgetSports->item(rows,columns)->setTextColor(QColor(0,0,0));//设置文本颜色
                ui->tableWidgetSports->item(rows,columns)->setFont(QFont("Helvetica"));//设置字体为黑体
            }
        }
    
    
        //音乐选项卡
        ui->qCustomPlotMusic->plotLayout()->insertRow(0);
        ui->qCustomPlotMusic->plotLayout()->addElement(0, 0, new QCPTextElement(ui->qCustomPlotMusic, "网易云音乐播放和评论统计图", QFont("微软雅黑",12, QFont::Bold)));
    
    
        // set dark background gradient设置暗背景梯度:
        QLinearGradient gradient(0, 0, 0, 400);
        gradient.setColorAt(0, QColor(200, 150, 220));
        gradient.setColorAt(0.56, QColor(200, 150, 200));
        gradient.setColorAt(1, QColor(220, 150, 200));
        ui->qCustomPlotMusic->setBackground(QBrush(gradient));
    
        // create empty bar chart objects创建三个空的条形图对象:
        QCPBars *LoveTime = new QCPBars(ui->qCustomPlotMusic->xAxis, ui->qCustomPlotMusic->yAxis);//播放
        QCPBars *LoveTimes = new QCPBars(ui->qCustomPlotMusic->xAxis, ui->qCustomPlotMusic->yAxis2);//评论
        //将LatencyTime和ErrorTimes并排显示
        QCPBarsGroup *group = new QCPBarsGroup(ui->qCustomPlotMusic);
        LoveTime->setBarsGroup(group);
        LoveTimes->setBarsGroup(group);
        //设置抗锯齿
        LoveTime->setAntialiased(false); // gives more crisp, pixel aligned bar borders:提供更清晰,像素对齐的条形边框
        LoveTimes->setAntialiased(false);
        //设置叠加差距
        //LatencyTime->setStackingGap(1);
        //ErrorTimes->setStackingGap(1);
        //fossil->setStackingGap(1);
        // set names and colors设置名称和颜色:
        LoveTimes->setWidth(0.3);//设置宽度
        //ErrorTimes->setWidthType("wtPlotCoords");//wtAbsolute:wtAxisRectRatio:wtPlotCoords设置宽度
        LoveTimes->setName("评论");
        LoveTimes->setPen(QPen(QColor(250, 170, 20).lighter(150)));
        LoveTimes->setBrush(QColor(250, 170, 20));
        LoveTime->setWidth(0.3);//设置宽度
        //LatencyTime->setWidthType("wtPlotCoords");//wtAbsolute:wtAxisRectRatio:wtPlotCoords设置宽度
        LoveTime->setName("播放");
        LoveTime->setPen(QPen(QColor(0, 168, 140).lighter(130)));
        LoveTime->setBrush(QColor(0, 168, 140));
        // stack bars on top of each other把一个Bar叠加在另外一个Bar上面
        //ErrorTimes->moveAbove(fossil);
        //LatencyTime->moveAbove(ErrorTimes);
    
        //绘制xAxis
        QVector<double> ticks;
        QVector<QString> labels;
        ticks << 1 << 2 << 3 << 4 << 5 << 6 << 7<<8;
        labels << "盗将行" << "流浪" << "倒数" << "沙漠骆驼" << "爱的故事" << "成都" << "38度6"<<"卡路里";
        QSharedPointer<QCPAxisTickerText> textTicker(new QCPAxisTickerText);
        textTicker->addTicks(ticks, labels);
        ui->qCustomPlotMusic->xAxis->setTicker(textTicker);//设置刻度标记CH
        ui->qCustomPlotMusic->xAxis->setTickLabelRotation(60);//设置刻度标签旋转
        ui->qCustomPlotMusic->xAxis->setSubTicks(false);//设置是否显示子刻度线
        ui->qCustomPlotMusic->xAxis->setTickLength(0, 4);//设置标记的长度
        ui->qCustomPlotMusic->xAxis->setRange(0, 9);//设置范围
        ui->qCustomPlotMusic->xAxis->setBasePen(QPen(Qt::white));//设置轴基线颜色
        ui->qCustomPlotMusic->xAxis->setTickPen(QPen(Qt::white));//设置刻度颜色
        ui->qCustomPlotMusic->xAxis->grid()->setVisible(true);//网格可视
        ui->qCustomPlotMusic->xAxis->grid()->setPen(QPen(QColor(130, 130, 130), 0, Qt::DotLine));//网格虚线
        ui->qCustomPlotMusic->xAxis->setTickLabelColor(Qt::white);//设置刻度标签颜色
        ui->qCustomPlotMusic->xAxis->setLabelColor(Qt::white);//设置轴标签的颜色
    
        // 绘制yAxis:
        ui->qCustomPlotMusic->yAxis->setRange(0, 1000000);//设置轴范围的下限和上限
        ui->qCustomPlotMusic->yAxis->setPadding(5); // 设置轴的填充a bit more space to the left border:在左边边界多留一点空间
        ui->qCustomPlotMusic->yAxis->setLabel("播放次数(次)");
        ui->qCustomPlotMusic->yAxis->setBasePen(QPen(Qt::white));//设置轴基线颜色
        ui->qCustomPlotMusic->yAxis->setTickPen(QPen(Qt::white));//设置刻度线颜色
        ui->qCustomPlotMusic->yAxis->setSubTickPen(QPen(Qt::white));//设置子刻度线颜色
        ui->qCustomPlotMusic->yAxis->grid()->setSubGridVisible(true);//设置子网格可视
        ui->qCustomPlotMusic->yAxis->setTickLabelColor(Qt::white);//设置刻度标签颜色
        ui->qCustomPlotMusic->yAxis->setLabelColor(Qt::white);//设置轴标签的颜色
        ui->qCustomPlotMusic->yAxis->grid()->setPen(QPen(QColor(130, 130, 130), 0, Qt::SolidLine));//设置网格颜色和线型,网格实线
        ui->qCustomPlotMusic->yAxis->grid()->setSubGridPen(QPen(QColor(130, 130, 130), 0, Qt::DotLine));//设置子网格颜色和线型,网格虚线
    
        // 绘制yAxis2:
        ui->qCustomPlotMusic->yAxis2->setRange(0, 10000);//设置轴范围的下限和上限
        ui->qCustomPlotMusic->yAxis2->setPadding(5); // 设置轴的填充a bit more space to the left border:在左边边界多留一点空间
        ui->qCustomPlotMusic->yAxis2->setLabel("评论次数(次)");
        ui->qCustomPlotMusic->yAxis2->setBasePen(QPen(Qt::white));//设置轴基线颜色
        ui->qCustomPlotMusic->yAxis2->setTickPen(QPen(Qt::white));//设置刻度线颜色
        ui->qCustomPlotMusic->yAxis2->setSubTickPen(QPen(Qt::white));//设置子刻度线颜色
        ui->qCustomPlotMusic->yAxis2->grid()->setSubGridVisible(true);//设置子网格可视
        ui->qCustomPlotMusic->yAxis2->setTickLabelColor(Qt::white);//设置刻度标签颜色
        ui->qCustomPlotMusic->yAxis2->setLabelColor(Qt::white);//设置轴标签的颜色
        ui->qCustomPlotMusic->yAxis2->grid()->setPen(QPen(QColor(130, 130, 130), 0, Qt::SolidLine));//设置网格颜色和线型,网格实线
        ui->qCustomPlotMusic->yAxis2->grid()->setSubGridPen(QPen(QColor(130, 130, 130), 0, Qt::DotLine));//设置子网格颜色和线型,网格虚线
        ui->qCustomPlotMusic->yAxis2->setVisible(true);//默认为不可视,需要设置为可视
        // Add data添加数据:
        QVector<double> LoveTimesData, LoveTimeData;
        LoveTimesData << 1553 << 2454<< 7676 << 2434 << 5641 << 9655 << 3556<<6899;
        LoveTimeData   << 121334 << 65657 << 534343 << 65778 << 134356 << 978788 << 44345<<9545;
        LoveTimes->setData(ticks, LoveTimesData);//将容器内数据添加到对应刻度的点上,数量应相同
        LoveTime->setData(ticks, LoveTimeData);
    
        // setup legend设置说明图例:
        ui->qCustomPlotMusic->legend->setVisible(true);//说明图例可视
        ui->qCustomPlotMusic->axisRect()->insetLayout()->setInsetAlignment(0, Qt::AlignTop|Qt::AlignLeft);//AlignTop:顶端对齐,AlignHCenter:中心对齐
        ui->qCustomPlotMusic->legend->setBrush(QColor(255, 255, 255, 100));
        ui->qCustomPlotMusic->legend->setBorderPen(Qt::NoPen);//设置边框颜色
        QFont legendFont = font();//获取字体
        legendFont.setPointSize(10);//设置字体大小,必须大于0
        //legendFont.setStyleName(Qt::微软雅黑);
    
        ui->qCustomPlotMusic->legend->setFont(legendFont);//设置默认字体
        //ui->qCustomPlotMusic->setInteractions(QCP::iRangeDrag | QCP::iRangeZoom);//客户交互,界面可以移动
    
        //软件选项卡
        ui->radioButton_6->setChecked(true);//选中网易公开课
        ui->checkBox->setChecked(true);//选中网易公开课
    
    
        //ui->treeWidgetDigital->clear();
        ui->treeWidgetDigital->setColumnCount(1); //设置列数
        ui->treeWidgetDigital->setHeaderLabels(QStringList(tr("数码产品")));//设置头的标题
        ui->treeWidgetDigital->setHeaderHidden(false);
        QTreeWidgetItem *items1 = new QTreeWidgetItem(ui->treeWidgetDigital,
                               QStringList(QString("手机")));
        items1->setIcon(0,QIcon("E:\\Qt_Project\\QTabWidget\\1.ico"));
        QTreeWidgetItem *items11 = new QTreeWidgetItem(items1,
                               QStringList(QString("苹果")));
        items11->setIcon(0,QIcon("E:\\Qt_Project\\QTabWidget\\2.ico"));
        QTreeWidgetItem *items12 = new QTreeWidgetItem(items1,
                               QStringList(QString("华为")));
        items12->setIcon(0,QIcon("E:\\Qt_Project\\QTabWidget\\3.ico"));
        QTreeWidgetItem *items13 = new QTreeWidgetItem(items1,
                               QStringList(QString("小米")));
        items13->setIcon(0,QIcon("E:\\Qt_Project\\QTabWidget\\4.ico"));
    
        QTreeWidgetItem *items2 = new QTreeWidgetItem(ui->treeWidgetDigital,
                               QStringList(QString("笔记本电脑")));
        items2->setIcon(0,QIcon("E:\\Qt_Project\\QTabWidget\\5.ico"));
        QTreeWidgetItem *items21 = new QTreeWidgetItem(items2,
                               QStringList(QString("Dell")));
        items21->setIcon(0,QIcon("E:\\Qt_Project\\QTabWidget\\6.ico"));
        QTreeWidgetItem *items22 = new QTreeWidgetItem(items2,
                               QStringList(QString("华硕")));
        items22->setIcon(0,QIcon("E:\\Qt_Project\\QTabWidget\\7.ico"));
    
        QTreeWidgetItem *items3 = new QTreeWidgetItem(ui->treeWidgetDigital,
                               QStringList(QString("平板电脑")));
        items3->setIcon(0,QIcon("E:\\Qt_Project\\QTabWidget\\8.ico"));
    
        QList<QTreeWidgetItem *> rootList;
        QTreeWidgetItem *items4 = new QTreeWidgetItem;   //添加第一个父节点
        items4->setText(0,tr("数码相机"));
        items4->setIcon(0,QIcon("E:\\Qt_Project\\QTabWidget\\9.ico"));
        rootList.append(items4);
        QTreeWidgetItem *items41= new QTreeWidgetItem(items4,QStringList(QString("索尼"))); //添加子节点
        items41->setIcon(0,QIcon("E:\\Qt_Project\\QTabWidget\\10.ico"));
        items4->addChild(items41);
        ui->treeWidgetDigital->insertTopLevelItems(0,rootList);  //将结点插入部件中
        ui->treeWidgetDigital->expandAll(); //结点全部展开
        //ui->items1->setText(0, "手机");
        //ui->treeWidgetDigital->addTopLevelItem(new QTreeWidgetItem((QTreeWidget*)0));
        //ui->treeWidgetDigital->addTopLevelItem(tr("笔记本电脑"));
    
        //语言选项卡
        ui->listWidgetLanguage->addItem(tr("中文"));
        ui->listWidgetLanguage->addItem(tr("英语"));
        ui->listWidgetLanguage->addItem(tr("法语"));
        ui->listWidgetLanguage->addItem(tr("德语"));
        ui->listWidgetLanguage->addItem(tr("日语"));
        ui->listWidgetLanguage->addItem(tr("韩语"));
        ui->listWidgetLanguage->addItem(tr("俄语"));
    }
    
    MainWindow::~MainWindow()
    {
        delete ui;
    }

     显示效果


     

    完整代码


    简单示例百度网盘链接:https://pan.baidu.com/s/1oIeuz7A3q_eZQ7XY1CjzcA 
    提取码:ir81 

    综合示例百度网盘链接:https://pan.baidu.com/s/1rhM_9ij0cXGLdQ_kh3yPmw 
    提取码:ppbe 

     

    展开全文
  • html tab选项卡实现

    热门讨论 2011-01-14 17:25:00
    html 及 css 实现的tab选项卡。十分简洁。
  • layui选项卡切换刷新页面

    千次阅读 2022-03-12 11:11:37
    Layui 选项卡切换刷新
  • flutter tab选项卡appbar下的选项卡

    千次阅读 2019-07-07 10:04:50
    flutter tab选项卡 appbar 下的选项卡 TabBar 、Tab、TabBarView 结合实现 这里实现的是appbar 下的选项卡
  • Wpf中用TabControl做的分页选项卡界面

    热门讨论 2012-02-09 13:12:00
    Wpf中用TabControl做的分页选项卡界面,如果准备打开的子窗口在主界面中没有则打开,有则激活到当前页。
  • QT TabWidget设置选项卡

    千次阅读 2019-10-08 17:58:33
    QT TabWidget设置选项卡 实现效果 在选中右侧指定标签时,该标签背景显示浅色背景图片,字体图片为深色;其他标签背景为灰色背景图片,字体图片也显示深灰色。 标签的添加与删除 1、添加标签 2、删除标签 移动...
  • mui选项卡

    千次阅读 2018-09-28 18:56:27
    【HTML文件】,然后在弹出窗口下面的“选择模板组:”中选中“mui底部选项卡(Webview模式)”。点击完成,就会自动创建一个带有默认页面的模板。 打开tab-webview-main.html可以在右侧看到已经创建了一个有底部...
  • 基于element-ui实现标签选项卡

    千次阅读 2020-12-19 16:55:43
    特效描述:基于element-ui实现 标签选项卡。基于element-ui实现标签选项卡代码结构1. 引入CSS2. 引入JS3. HTML代码通用标签页,基于element-ui1.基础用法用户管理配置管理角色管理定时任务补偿2.选项卡样式用户管理...
  • Word部分选项卡消失问题

    千次阅读 2021-10-19 18:14:34
    后来发现是“设计选项卡"不见了,而且整个”自定义功能区“内没有任何内容。 但是使用”键盘快捷方式“仍能找到”设计“选项卡类别,并给FormatBackgroundWatemark命令加快捷键,而且能使用。同时用顶部”搜索“功能...
  • JS学习笔记18-面向对象方式的选项卡

    千次阅读 2020-05-19 21:50:14
    文章目录一、使用面向对象写一个选项卡1.1 先用面向过程写一个选项卡1.2 正式开始使用面向对象写一个选项卡1.2.1、解决函数嵌套1.2.2 pass掉window.onload1.2.3 把变量作为属性 函数变为方法 并且改错 、传参、闭包 ...
  • win10系统使用久了,好多网友反馈说win10系统文件属性没有安全选项卡的问题,非常不方便。有什么办法可以永久解决win10系统文件属性没有安全选项卡的问题,面对win10系统文件属性没有安全选项卡的图文步骤非常简单,...
  • flutter tab选项卡appbar中的选项卡

    千次阅读 2019-07-07 10:11:51
    flutter tab选项卡 appbar 下的选项卡,构造的tabbar赋值给appbar 中的title
  • UGUI ToggleGoup和Toggle制作选项卡

    千次阅读 2022-03-01 09:24:58
    今天介绍的一种方法超级简单制作选项卡,多个tab对应一个面板。 首先在panel下创建一个空物体(命名为Groups),然后添加上组件ToggleGroup,接着在Groups下创建一个Toggle(命名为toggle),其中Background为背景...
  • C#选项卡TtabControl标签隐藏 C#选项卡标签隐藏 C#TtabControl标签隐藏 C#选项卡TtabControl标签隐藏
  • 2.循环法(适用于通过后台数据进行操作的选项卡) <!--index.wxml--> {{item}} [curIndex].index1}}" wx:for-index='index' data-index='{{index}}' > {{item}} /**index.wxss**...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 549,209
精华内容 219,683
关键字:

选项卡

友情链接: StuSystem.rar