如何将JQuery-ui选项卡设计更改为Microsoft AJAX Toolkit TabContainer

Question

我们有一个庞大的项目，我们已经使用过Microsoft AJAX Toolkit TabContainer。现在我们想用jquery-uitabs进行新的开发。我们希望jquery-uitabs控制应该看起来像Microsoft AJAX Toolkit TabContainer。

Microsoft ajax工具包TabContainer

对于Microsoft AJAX Toolkit TabContainer的真实演示，您可以看到here

而且我们希望jquery-uitabs控件应该看起来像上面那样，因为我在jquery-uitabs的几个类中做了一些改变，如下所示。

/* Changed following things in jquier-ui.css */

.ui-tabs {
  position: relative;
  /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
  padding: .2em;
  width: 98% !important;
  margin-left: 1% !important;
}

.ui-widget-header {
  /*border: 1px solid #aaaaaa*/
  /*{borderColorHeader}*/
  ;
  color: #222222/*{fcHeader}*/
  ;
  font-weight: bold;
}

.ui-widget-header .ui-state-default {
  border: 1px solid #d3d3d3/*{borderColorDefault}*/
  ;
  background: url(http://s29.postimg.org/aq1c0la1f/Web_Resource1_O.gif) repeat-x;
  font-weight: normal/*{fwDefault}*/
  ;
  color: #555555/*{fcDefault}*/
  ;
}


/*--------------Newly Added -----------------------*/

.ui-tabs-right-outer {
  padding-right: 4px;
  background: url(http://192.168.1.139/RightCorner.gif) no-repeat right;
  height: 21px;
}

.ui-tabs-left-inner {
  padding-left: 3px;
  background: url(http://192.168.1.139/LeftCorner.gif) no-repeat right;
  height: 21px;
}

#tabs li {
  margin-top: -5px;
}


/*--------------Newly Added -----------------------*/


/*------------- Removed -----------------------------*/

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
  border: 1px solid #999999/*{borderColorHover}*/
  ;
  background: #dadada/*{bgColorHover}*/
  url(images/ui-bg_glass_75_dadada_1x400.png)/*{bgImgUrlHover}*/
  50%/*{bgHoverXPos}*/
  50%/*{bgHoverYPos}*/
  repeat-x/*{bgHoverRepeat}*/
  ;
  font-weight: normal/*{fwDefault}*/
  ;
  color: #212121/*{fcHover}*/
  ;
}

.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited {
  color: #212121/*{fcHover}*/
  ;
  text-decoration: none;
}


/*------------- Removed -----------------------------*/

现在jquery ui tab控件如下所示。

有关jquery-uitab控件的真实演示，请单击here

如果你想看到我的更改，我已经在这个jsfiddle上列出了它们，但不知怎的，我无法正常运行它。

但它没有接近Microsoft AJAX Toolkit TabContainer所以请有人帮助我，所以我可以让jquery-uitabs设计看起来像Microsoft AJAX Toolkit TabContainer？

Answer 1

我创建了一个新的CSS来覆盖jQuery UI中的当前CSS样式。它在W3C中有效。

在这个解决方案中，我正在使用：

• jQuery的1.10.1.js
• Ĵ苦厄RY了长子。闵。 JS
• jQuery的ui.css

您需要在网页中添加此文件。

newtabs.css

#tabs {
  border-style: none !important;
  font-family: Verdana, Arial, Tahoma, Helvetica, sans-serif !important;
  font-size: 11px !important;
}

.ui-tabs-panel {
  border: solid 1px #999999 !important;
  border-radius: 0;
}

.ui-tabs {
  padding: 0 !important;
}

.ui-tabs .ui-tabs-nav {
  padding: 0 !important;
  position: relative;
  z-index: 1000000;
}

.ui-tabs-panel.ui-widget-content.ui-corner-bottom {
  background-color: #FFFFFF;
  color: inherit;
  position: relative;
  z-index: 10000;
}

.ui-widget-header {
  background: #FFFFFF none;
  border-style: none;
  color: #000;
}

.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active {
  background: #FFFFFF url(http://www.ajaxcontroltoolkit.com/WebResource.axd?d=AGMZY7ihZMorR97dadZHJNLMLUmlGs1IAAjSSQojR1z9vDSKfu9AV_I6UDVbY3n0Ht_3wAr1PwDZxrII3qTy7PxBuhOrrMPPm9aSf0ez-2krTuMH79yQM5UqpVv2rfAWdUFEfP05ctyHi2tucBpF0FiqhM41&t=633679741330000000) repeat-x !important;
  border-top-style: none !important;
  color: inherit;
  line-height: 0.9 !important;
  padding-bottom: 1px !important;
  top: 0 !important;
}

.ui-state-default.ui-corner-top {
  background: #FFFFFF url(http://www.ajaxcontroltoolkit.com/WebResource.axd?d=W4v9Hy4fkzkekDThrsobfTYj6-95kfZ10KKihGm99tZbuY_l3ofA36Jei1gEbKSaOeuE25gPka1oqQEK41fBP_tQ6j-raNjx3bfPxbTWwS4G10LIvb5t08TYwcXm-kc2MlBhvw2&t=633679741330000000) repeat-x 0 -2px !important;
  border-left: solid 1px #999999 !important;
  border-right: solid 1px #999999 !important;
  border-top-style: none !important;
  color: inherit;
  line-height: 0.8 !important;
  top: 0.3em !important;
}

.ui-state-default.ui-corner-top:hover {
  background: #FFFFFF url(http://www.ajaxcontroltoolkit.com/WebResource.axd?d=LpBJhML_0RvVpH9_nzWpbHM55rqRzfQLP86L3zQcgsIDrNYrPJwDC8P6cl4iArkt1mQTADliJLb_tTeqLupEXRcRd0ap0pbeeoZeFS8-y23_1ZD_wYgfRv9KSLuWIAqaucbBhvH2h3cWoeoAGmGsp5xO7pU1&t=633679741330000000) repeat-x 0 -2px !important;
  border-left: solid 1px #999999 !important;
  border-right: solid 1px #999999 !important;
  border-top-style: none !important;
  color: inherit;
  line-height: 0.8 !important;
  top: 0.3em !important;
}

.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active a {
  padding: 8px 5px 4px 5px !important;
}

.ui-state-default.ui-corner-top a {
  padding: 7px 5px 4px 5px !important;
}