Question

如何设计一个用户界面，其中包含Google Chrome所具有的标签，我的意思是每个标签必须能够：

最大化
关闭
拖着并独自站立。

我正在使用.net 2.0（C＃）

谢谢，

Answer 1

您可能会发现查看一个开源项目很有用SharpDevelop我确信它有标签窗口。

Answer 2

您可以查看铬源代码。铬项目似乎也为开发人员和许多沟通渠道（http://www.chromium.org/developers）

提供了大量资源

Answer 3

我昨天做了，但是使用sass和我自己的重置文件作为此截屏显示。

您可能会在_widget_tab.scss注意到它支持 24个标签后的活动 ...

随意定制。
同时将&-active替换为.active或&:hover或&:focus以符合您的需求。
_reset.css 可选但结果将如下所示JsFiddlle

enter image description here

如何，这些是我的文件：

_reset.scss

/*
    Created on : Jun 12, 2015, 8:29:10 AM
    Author     : Upgrade <Salathiel Genese, Yimga Yimga at salathielgenese@gmail.com>
*/

$tag-inline:span,a,rt,rp,dfn,abbr,q,cite,em,var,time,samp,i,b,sub,sup,small,strong,mark,ruby,ins,del,bdi,bdo,s,kbd,wbr,code;
$tag-form  :form,fieldset,meter,select,legend,optgroup,label,option,datalist,input,output,keygen,textarea,button,progress;
$tag-xture :body,aside,section,header,footer,nav,article,hgroup,address,h1,h2,h3,h4,h5,h6;
$tag-media :img,area,map,embeb,object,param,source,iframe,canvas,track,audio,video,device;
$tag-divide:div,pre,br,p,blocquote,hr,ol,dl,figcaption,ul,dt,figure,li,dd;
$tag-table :table,caption,colgroup,col,tbody,thead,tfoot,tr,th,td;
$tag-meta  :head,title,meta,base,link,style,noscript,script;
$tag-menu  :menu,command,summary,details;

html,#{$tag-inline},#{$tag-form},#{$tag-xture},#{$tag-media},#{$tag-divide},#{$tag-table},#{$tag-meta},#{$tag-menu}
{
    margin: 0;
    padding: 0;
    display: none;
    border-radius: 0;
    outline-offset: 0;
    border-spacing: 0;
    border-collapse: collapse;
    border: 0 transparent none;
    outline: 0 transparent none;

    text-indent: 0;
    text-align: justify;
    text-transform: none;
    text-rendering: auto;
    text-decoration: none;
    text-shadow: 0 0 0 transparent none;

    speak: none;
    cursor: default;
    vertical-align: top;
    color: rgba(60,60,60,1);
    background-image: none;
    background-color: transparent;
    font: normal normal normal 0/0 sans-serif;

    -webkit-box-shadow: 0 0 0 transparent;
    -moz-box-shadow: 0 0 0 transparent;
    box-shadow: 0 0 0 transparent;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-margin-before: 0;
    -webkit-padding-start: 0;
    -webkit-margin-start: 0;
    -webkit-margin-after: 0;
    -webkit-margin-end: 0;

    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}
figure,legend,input,select,button,canvas,object,menu,img,area,map,embeb,audio,video
{
    display: inline-block;
}
#{$tag-inline}
{
    display: inline;
}
li
{
    display: list-item;
}
html,form,fieldset,#{$tag-xture},iframe,div,pre,br,p,blocquote,hr,ol,dl,figcaption,ul,dt,figure,dd,command,summary,details,option
{
    display: block;
}
table
{
    display: table;
    >colgroup
    {
        display: table-column-group;
        >col
        {
            display: table-column;
        }
    }
    >caption
    {
        display: table-caption;
    }
    >thead
    {
        display: table-header-group;
    }
    >tbody
    {
        display: table-row-group;
    }
    >tfoot
    {
        display: table-footer-group;
    }
    >thead,>tbody,>tfoot
    {
        >tr
        {
            display: table-row;
            >th,td
            {
                display: table-cell;
            }
        }
    }
}
#{$tag-inline},input,legend,label,button,li,dt,dd,command,summary
{
    font: normal normal normal 12px/1 sans-serif;
}
header,h6,h5,h4,h3,h2,h1
{
    font: normal normal normal 33px/1 serif;
}
@for $index from 1 through 6
{
    h#{$index}
    {
        $index: 12 + 3 * $index;
        font: normal normal normal #{$index}px/1 serif;
    }
}
html>body
{
    min-width: 100%;
    min-height: 100%;
}

_widget_tab.scss

/*
    Created on : Jun 12, 2015, 11:46:31 AM
    Author     : Upgrade <Salathiel Genese, Yimga Yimga at salathielgenese@gmail.com>
*/
@mixin widget-tab()
{
    .tab-container
    {
        display: block;
        >.tab-bar
        {
            display: block;
            text-align: right;
        }
        @content;
    }
}
@include widget-tab
{
    .tab-bar-chrome-like
    {
        @extend .tab-bar;
        position: relative;
        padding: 5px 5px 0 5px;
        border-bottom: 7.5px rgba(180,180,180,1) solid;
        >.tab
        {
            margin: 0 5px;
            min-width: 75px;
            position: relative;
            font-family: serif;
            display: inline-block;
            border-radius: 5px 5px 0px 0px;
            padding: 7.5px 25px 7.5px 7.5px;
            background-color: rgba(220,220,220,1);
            &:before {
                width: 0;
                bottom: 0;
                height: 0;
                left: -24px;
                content: "";
                position: absolute;
                border: 12px rgba(220,220,220,1) solid;
                border-top-color: transparent;
                border-left-color: transparent;
            }
            &:after {
                width: 0;
                bottom: 0;
                height: 0;
                content: "";
                right: -23px;
                position: absolute;
                border: 12px rgba(220,220,220,1) solid;
                border-top-color: transparent;
                border-right-color: transparent;
            }
            &:nth-of-type(2n+1) {
                background-color: rgba(210,210,210,1);
                &:before {
                    border-right-color: rgba(210,210,210,1);
                    border-bottom-color: rgba(210,210,210,1);
                }
                &:after {
                    border-left-color: rgba(210,210,210,1);
                    border-bottom-color: rgba(210,210,210,1);
                }
            }
            >[data-sr]
            {
                right: 5px;
                opacity: 0;
                z-index: 2;
                padding: 2px 4px;
                border-radius: 50%;
                position: absolute;
                top: calc(50% - 8px);
                transition-duration: .7s;
                background-color: rgba(0,0,0,.05);
                &:before {
                    content: '×';
                }
                &:hover {
                    background-color: rgba(0,0,0,.1);
                }
            }
            &:hover>[data-sr] {
                opacity: 1;
            }
            &[data-sr]
            {
                min-width: 25px;
                padding: 7.5px 0;
                color: transparent;
            }
            &-active
            {
                @extend .tab;
                &, &:nth-of-type(n)
                    {
                    background-color: rgba(180,180,180,1);
                    &:before {
                        border-right-color: rgba(180,180,180,1);
                        border-bottom-color: rgba(180,180,180,1);
                    }
                    &:after {
                        border-left-color: rgba(180,180,180,1);
                        border-bottom-color: rgba(180,180,180,1);
                    }
                }
                @for $index from 1 through 25
                {
                    &:nth-last-of-type(#{$index}) {
                        z-index: $index - 1;
                        @for $sub-index from $index through 1
                        {
                            &~.tab:nth-last-of-type(#{$sub-index})
                            {
                                z-index: $sub-index - 1;
                            }
                        }
                    }
                }
            }
        }
    }
}

index.scss

@import "../libs/reset/scss/_reset.scss";
@import "_widget_tab.scss";

html>body
{
    >section
    {
        margin: 0 15px;
        overflow: hidden;
    }
}

主要index.html

<!DOCTYPE html>
<html>
    <head>
        <title>
            Choir...
        </title>
        <meta charset="UTF-8">
        <link rel="icon" href="#">
        <link rel="stylesheet" href="web/css/sillon.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <aside>
            Text...
        </aside>
        <section class="tab-container">
            <nav class="tab-bar-chrome-like">
                <a class="tab">
                    HTML5
                    <i data-sr></i>
                </a>
                <a class="tab">
                    SASS
                    <i data-sr></i>
                </a>
                <a class="tab-active">
                    Angular
                    <i data-sr></i>
                </a>
                <a class="tab">
                    Symfony
                    <i data-sr></i>
                </a>
                <a class="tab">
                    Spring
                    <i data-sr></i>
                </a>
                <a href="#" class="tab" data-sr>
                    .
                </a>
            </nav>
        </section>
    </body>
</html>

但由于尚无法自引用代码段，this the result

Answer 4

尝试将每个标签实现为HTMLGenericControl（“div”），然后在客户端应用以下jquery脚本。

jQuery draggable tabs

就最小化选项卡而言，您只需在选项卡内容的右侧添加一个小图像，该图像将根据jquery点击事件处理程序切换选项卡的宽度。

如何设计Google Chrome标签等标签？

4 个答案: