如何更改 JQuery-ui 选项卡设计使其看起来像 Microsoft AJAX Toolkit TabContainer

Question

我们有一个巨大的项目，我们已经在其中使用了 Microsoft AJAX Toolkit TabContainer。现在我们要使用 jquery-uitabs for new development. we want that jquery-uitabs 控件应该看起来像 Microsoft AJAX Toolkit TabContainer.

Microsoft Ajax 工具包 TabContainer

Microsoft AJAX Toolkit TabContainer 的真实演示你可以看here

我们希望 jquery-uitabs control should be looking like above and for that i have made some changes in few of the classes of jquery-ui 选项卡如下所示。

/* Changed following things in jquery-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 选项卡控件看起来 如下所示。

用于 jquery-uitab control click here 的真实演示

如果您想查看我的更改，我已将它们列在此 jsfiddle 中，但不知何故我无法正确运行它。

但它离 Microsoft AJAX Toolkit TabContainer 不远所以请有人帮助我 我可以使 jquery-ui 标签设计看起来像 Microsoft AJAX Toolkit TabContainer ?

Answer 1

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

在此解决方案中，我使用的是：

jquery-1.10.1.js
jquery-ui.min.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;
}

如何更改 JQuery-ui 选项卡设计使其看起来像 Microsoft AJAX Toolkit TabContainer

How to change JQuery-ui tabs design to look like Microsoft AJAX Toolkit TabContainer

css

jquery

jquery-ui

ajaxcontroltoolkit