Как создавать вкладки, такие как вкладки Google Chrome?

Ответ 1

Вам может показаться полезным посмотреть проект с открытым исходным кодом, например SharpDevelop Я уверен, что у вас есть окна с вкладками.

Ответ 2

Вы можете посмотреть исходный код хрома. У проекта chromium также есть много ресурсов для разработчиков и многих каналов связи (http://www.chromium.org/developers)

Ответ 3

Я сделал это вчера, но используя sass и свой собственный reset файл, как показано на этом скриншоте.

В _widget_tab.scss вы можете заметить, что он поддерживает до 24 вкладки после активного...

• Не стесняйтесь настраивать его.
• Также заменить &-active на .active или &:hover или &:focus в соответствии с вашими потребностями.
• _reset.css необязательный, но результат будет выглядеть следующим образом JsFiddlle

Любые способы, это мои файлы:

• _reset.scss

  /*
      Created on : Jun 12, 2015, 8:29:10 AM
      Author     : Upgrade <Salathiel Genese, Yimga Yimga at [email protected]>
  */
  
  $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%;
  }

Ответ 4

Попробуйте выполнить каждую вкладку как HTMLGenericControl ( "div" ), а затем примените следующие сценарии jquery на стороне клиента.

вкладки jQuery draggable

Что касается минимизации вкладок, вы можете просто добавить небольшое изображение справа от содержимого вкладки, которое переключает ширину вкладки на основе обработчика события jquery click.