精华内容
参与话题
问答
  • TabControl

    2019-06-24 23:07:00
    jquery主体: var TabControl = function (ops) { this._ops = { items: ops.items || [], hashItems: {}, selectedIndex: ops.selectedIndex || 0 };...

    jquery主体:

     var TabControl = function (ops) {
            this._ops = {
                items: ops.items || [],
                hashItems: {},
                selectedIndex: ops.selectedIndex || 0
            };
            this._element = $(ops.element);
            this._tabContainerId = "ui-tabcontrol-container-";
            this._convertHashItems();
            this._init()
                ._initId()
                ._create()
                ._initMember()
                ._setTabContainer()
                ._setTabContent()
                ._bindEvent();
        }
    
        TabControl.prototype = {
            _convertHashItems: function () {
                var i = 0;
                for (; i < this._ops.items.length; i++) {
                    this._ops.hashItems[this._ops.items[i].title] = {
                        selectedIndex: i,
                        selectedItem: this._ops.items[i]
                    };
                }
            },
            _init: function () {
                this._element.addClass('ui-tabcontrol');
                return this;
            },
    
            _initId: function () {
                this._tabContainerId += uuid;
                return this;
            },
    
            _create: function () {
                this._createTab();
                return this;
            },
    
            _createTab: function () {
                var fragement = [],
                    h = -1;
                fragement[++h] = "<div id= " + this._tabContainerId + " class=\"ui-tab-container\">";
                fragement[++h] = "</div>";
                this._element.prepend(fragement.join(''));
            },
    
            _initMember: function () {
                this.$container = $('#' + this._tabContainerId);
                this.$contents = $('.ui-tabcontrol-content').children();
                return this;
            },
    
            _setTabContainer: function () {
                var i = 0,
                    items = this._ops.items,
                    len = items.length;
                for (; i < len; i++) {
                    var el = document.createElement('div');
                    el.textContent = items[i].title;
                    $(el).addClass('ui-tabcontrol-container-item');
                    if (this._ops.selectedIndex == i) $(el).addClass('active');
                    el.onclick = this._tabClickHandler.bind(this);
                    this.$container.append(el);
                }
                return this;
            },
    
            _resetTabContainer: function () {
                var $targets = this.$container.children();
                $targets.removeClass('active');
                $($targets[this._ops.selectedIndex]).addClass('active');
            },
    
            _bindEvent: function () {
                return this;
            },
    
            _tabClickHandler: function (e) {
                var self = this,
                    newValue = this._ops.hashItems[e.target.textContent];
                $$.trigger("tabHandleChanged", self._element, $$.Event({
                    element: self._element,
                    oldValue: this._oldValue,
                    newValue: newValue
                }));
                this._ops.selectedIndex = newValue.selectedIndex;
                this._oldValue = newValue;
                this._resetTabContainer();
                this._setTabContent();
            },
    
            _setTabContent: function () {
                this.$contents.addClass('ui-tabcontrol-content-item');
                var i = 0,
                    items = this._ops.items,
                    len = items.length;
                for (; i < len; i++) {
                    if (i !== this._ops.selectedIndex)
                        $(this.$contents[i]).css('display', 'none');
                    else
                        $(this.$contents[i]).css('display', '');
                }
                return this;
            },
    
            setOptions: function (ops) {
                this._ops.items = ops.items;
                this._ops.selectedIndex = ops.selectedIndex || this._oldValue.selectedIndex;
                this._convertHashItems();
                this._removeTabTabContainer()
                    ._setTabContainer()
                    ._setTabContent();
            },
            _removeTabTabContainer: function () {
                this.$container.empty();
                return this;
            }
        }
    View Code

    react包装:

    import ReactWidget from '../react-widget';
    
    class TabControl extends ReactWidget {
        constructor(props) {
            super(props);
        }
    
    
        componentWillReceiveProps(newProps) {
            this.element.setOptions({
                items: newProps.items,
                selectedIndex: newProps.selectedIndex
            });
        }
    
        componentDidMount() {
            this.element = new aui.TabControl({
                element: ReactDOM.findDOMNode(this),
                items: this.props.items,
                selectedIndex: this.props.selectedIndex
            });
            $(ReactDOM.findDOMNode(this)).on('tabHandleChanged', this.props.selectChanged.bind(this));
        }
    
        render() {
            return <div>
                <div className='ui-tabcontrol-content'>
                    {this.props.children}
                </div>
            </div>
        }
    }
    
    window.$$.TabControl = TabControl;
    View Code

    less样式:

    .ui-tabcontrol {
        .ui-tab-container {
            .ui-tabcontrol-container-item {
                display      : inline-block;
                padding      : 10px 20px;
                text-align   : center;
                border       : 1px solid #ff9900;
                border-radius: 1px;
                border-right : 0px;
                cursor       : pointer;
    
                &:hover {
                    color: #bbb;
                }
    
                &:last-child {
                    border-right: 1px solid #ff9900;
                }
            }
    
            .active {
                border-top      : 3px solid #000000;
                background-color: #bbbbbb;
                border-bottom   : 1px solid #bbbbbb;
    
                &:hover {
                    color: #ffffff;
                }
            }
        }
    
        .ui-tabcontrol-content {
            background-color: #bbbbbb;
        }
    }
    View Code

    效果:

     

    转载于:https://www.cnblogs.com/moran1992/p/11080135.html

    展开全文
  • tabControl

    2016-10-12 15:46:00
    TabPagetp=tabControl1.TabPages[0];//在这里先保存,以便以后还要显示 tabControl1.TabPages.Remove(tp);//隐藏(删除) tabControl1.TabPages.Insert(0,tp);//显示(插入) 转载于:https://www....

    一、隐藏选项卡:TabPage1.Parent = null;

    TabPage tp = tabControl1.TabPages[0];//在这里先保存,以便以后还要显示
     
    tabControl1.TabPages.Remove(tp);//隐藏(删除)
     
     
    tabControl1.TabPages.Insert(0, tp);//显示(插入)

    转载于:https://www.cnblogs.com/qi123/p/5953175.html

    展开全文
  • tabcontrol

    2016-02-25 10:37:51
    [img=https://img-bbs.csdn.net/upload/201602/25/1456367793_358146.png][/img] 有办法把BUTTON,移动TABCONTROL标签区块部分吗????
  • Add TabControl

    2020-12-28 14:33:54
    <div><p>This is just some parts of the TabControl which I believe should go in the framework. Will be used in osu for the filtering songs.</p><p>该提问来源于开源项目:ppy/osu-framework</p></div>
  • Wpf TabControl Style

    2017-05-16 19:06:21
    Wpf TabControl 样式
  • TabControl控件

    2019-08-07 20:35:50
    TabControl控件可以支持在一个控件里面放置多个选项卡,每个选项卡又可以放置多个控件。TabControl控件,默认的控件样式很普通。而且样式或功能不一定符合我们的要求。我们需要TabControl的标题能够居中、或平均分布...

    TabControl控件可以支持在一个控件里面放置多个选项卡,每个选项卡又可以放置多个控件。TabControl控件,默认的控件样式很普通。而且样式或功能不一定符合我们的要求。我们需要TabControl的标题能够居中、或平均分布;或者我们希望TabControl的标题能够进

    行关闭。要实现这些功能我们需要对TabControl的样式进行定义。

    我们遍历一下全局变量,TC静态选项卡。

    UCTabItemWithClose创建子选项,给item.Name一个名称,item.Header标头名称。在实例化首页页面,item.Content子选择里面的内容。TC.Items.Add(item)添加子选项

    添加选项卡,bool bolWhetherBe = false判断是否存在当前选项,再用if判断当前选项卡的个数是否大于0。注释标明。

    再通过定义好的样式,样式可以通过自己喜好来定义,

    展开全文
  • TabControl Styling

    2020-12-30 21:16:02
    I was wanting to change the style of the TabControl to style them more like the UWP style. <ol><li>My first attempt was to use Visual Studio to "Convert to a New Resource" and edit those ...
  • C#自定义 tabcontrol

    2017-12-27 16:24:56
    自定义 TabControl 改变样式 ,有关闭小叉叉 ,可以点击关闭
  • C# TabControl

    2020-09-30 16:15:20
    C# TabControl 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了...

    C# TabControl

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。

    新的改变

    我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:

    1. 全新的界面设计 ,将会带来全新的写作体验;
    2. 在创作中心设置你喜爱的代码高亮样式,Markdown 将代码片显示选择的高亮样式 进行展示;
    3. 增加了 图片拖拽 功能,你可以将本地的图片直接拖拽到编辑区域直接展示;
    4. 全新的 KaTeX数学公式 语法;
    5. 增加了支持甘特图的mermaid语法1 功能;
    6. 增加了 多屏幕编辑 Markdown文章功能;
    7. 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能,功能按钮位于编辑区域与预览区域中间;
    8. 增加了 检查列表 功能。

    功能快捷键

    撤销:Ctrl/Command + Z
    重做:Ctrl/Command + Y
    加粗:Ctrl/Command + B
    斜体:Ctrl/Command + I
    标题:Ctrl/Command + Shift + H
    无序列表:Ctrl/Command + Shift + U
    有序列表:Ctrl/Command + Shift + O
    检查列表:Ctrl/Command + Shift + C
    插入代码:Ctrl/Command + Shift + K
    插入链接:Ctrl/Command + Shift + L
    插入图片:Ctrl/Command + Shift + G
    查找:Ctrl/Command + F
    替换:Ctrl/Command + G

    合理的创建标题,有助于目录的生成

    直接输入1次#,并按下space后,将生成1级标题。
    输入2次#,并按下space后,将生成2级标题。
    以此类推,我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

    如何改变文本的样式

    强调文本 强调文本

    加粗文本 加粗文本

    标记文本

    删除文本

    引用文本

    H2O is是液体。

    210 运算结果是 1024.

    插入链接与图片

    链接: link.

    图片: Alt

    带尺寸的图片: Alt

    居中的图片: Alt

    居中并且带尺寸的图片: Alt

    当然,我们为了让用户更加便捷,我们增加了图片拖拽功能。

    如何插入一段漂亮的代码片

    博客设置页面,选择一款你喜欢的代码片高亮样式,下面展示同样高亮的 代码片.

    // An highlighted block
    var foo = 'bar';
    

    生成一个适合你的列表

    • 项目
      • 项目
        • 项目
    1. 项目1
    2. 项目2
    3. 项目3
    • 计划任务
    • 完成任务

    创建一个表格

    一个简单的表格是这么创建的:

    项目 Value
    电脑 $1600
    手机 $12
    导管 $1

    设定内容居中、居左、居右

    使用:---------:居中
    使用:----------居左
    使用----------:居右

    第一列 第二列 第三列
    第一列文本居中 第二列文本居右 第三列文本居左

    SmartyPants

    SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如:

    TYPE ASCII HTML
    Single backticks 'Isn't this fun?' ‘Isn’t this fun?’
    Quotes "Isn't this fun?" “Isn’t this fun?”
    Dashes -- is en-dash, --- is em-dash – is en-dash, — is em-dash

    创建一个自定义列表

    Markdown
    Text-to-HTML conversion tool
    Authors
    John
    Luke

    如何创建一个注脚

    一个具有注脚的文本。2

    注释也是必不可少的

    Markdown将文本转换为 HTML

    KaTeX数学公式

    您可以使用渲染LaTeX数学表达式 KaTeX:

    Gamma公式展示 Γ(n)=(n1)!nN\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N 是通过欧拉积分

    Γ(z)=0tz1etdt. \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.

    你可以找到更多关于的信息 LaTeX 数学表达式here.

    新的甘特图功能,丰富你的文章

    Mon 06Mon 13Mon 20已完成 进行中 计划一 计划二 现有任务Adding GANTT diagram functionality to mermaid
    • 关于 甘特图 语法,参考 这儿,

    UML 图表

    可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图:

    张三李四王五你好!李四, 最近怎么样?你最近怎么样,王五?我很好,谢谢!我很好,谢谢!李四想了很长时间, 文字太长了不适合放在一行.打量着王五...很好... 王五, 你怎么样?张三李四王五

    这将产生一个流程图。:

    链接
    长方形
    圆角长方形
    菱形
    • 关于 Mermaid 语法,参考 这儿,

    FLowchart流程图

    我们依旧会支持flowchart的流程图:

    Created with Raphaël 2.2.0开始我的操作确认?结束yesno
    • 关于 Flowchart流程图 语法,参考 这儿.

    导出与导入

    导出

    如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ,生成一个.md文件或者.html文件进行本地保存。

    导入

    如果你想加载一篇你写过的.md文件,在上方工具栏可以选择导入功能进行对应扩展名的文件导入,
    继续你的创作。


    1. mermaid语法说明 ↩︎

    2. 注脚的解释 ↩︎

    展开全文
  • 带关闭按钮TabControl

    2020-12-10 19:53:05
    c# winform 带关闭按钮TabControl控件,使用VS2010编写。这个是自定义控件,大家下载后可以自行改写换图标等。
  • Multi selection TabControl

    2021-01-01 20:01:19
    <div><p>Added a field to TabControl which lets the user select multiple tabs if it is set to true. It was suggested that a separate control should be made and that changes should be made to that ...
  • WPF模拟迅雷TabControl界面

    千次下载 热门讨论 2012-05-14 22:59:56
    WPF模拟迅雷TabControl带箭头界面
  • TabControl标签样式

    2020-12-29 06:43:08
    <div><p>TabControl的标签卡能否设置为可居中显示?</p><p>该提问来源于开源项目:Panuon/PanuonUI.Silver</p></div>
  • TabControl控件的美化

    2017-10-27 00:50:01
    一个美化过的TabControl控件
  • Add TabControl tests

    2021-01-07 13:41:03
    <ul><li>Add more TabControl tests</li><li>Add more Control tests</li></ul> <h6>Microsoft Reviewers: ;https://github.com/dotnet/winforms/pull/2097">Open in CodeFlow</a></h6><p>该提问来源于开源项目ÿ...
  • C# TabControl控件美化

    热门讨论 2012-02-29 20:20:04
    C#TabControl TabControl控件美化 C#控件美化
  • WPF漂亮的TabControl

    千次下载 热门讨论 2014-05-09 19:40:34
    WPF十分漂亮的TabControl,更改下样式就可以使用。不需要积分,下载后你不会后悔的。可以在正式项目中使用,强力推荐。

空空如也

1 2 3 4 5 ... 20
收藏数 2,285
精华内容 914
关键字:

tabcontrol