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

如何设计具有Google Chrome浏览器标签的用户界面，我的意思是每个标签必须能够：

1. 最大化
2. 关
3. 拖着，独自站立。

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

谢谢，

Answer 1

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

Answer 2

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

Answer 3

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

你可能会注意到_widget_tab.scss它在活动后最多支持24个标签 …

1. 随意定制它。
2. 同时用.active或&:hover或&:focus取代&-active .active以满足您的需求。
3. _reset.css是可选的，但结果看起来就像这个JsFiddlle

如何，这些是我的文件：

1. _reset.scss

    /* Created on : Jun 12, 2015, 8:29:10 AM Author : Upgrade  */ $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%; } 

Answer 4

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

jQuery draggable标签

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