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

Question

We have a huge project in which we already have used Microsoft AJAX Toolkit TabContainer . Now we want to use jquery-ui tabs for new development. we want that jquery-ui tabs control should be look like Microsoft AJAX Toolkit TabContainer .

Microsoft ajax toolkit TabContainer

For real demo of Microsoft AJAX Toolkit TabContainer you can see here

And we want that jquery-ui tabs control should be looking like above and for that i have made some changes in few of the classes of jquery-ui tabs whihc are as below.

/* 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 -----------------------------*/

And now jquery ui tab control looks like as below.

For real demo of jquery-ui tab control click here

If you want to see my changes , i have listed them on this jsfiddle , but somehow i am not able to run it properly.

But it is no where near to Microsoft AJAX Toolkit TabContainer so please can someone help me so i can make jquery-ui tabs design to look like Microsoft AJAX Toolkit TabContainer ?

Answer 1

I've made a new CSS to overwrite the current CSS styles in jQuery UI. It's valid in W3C.

In this solution I'm using:

• jquery-1.10.1.js
• jquery-ui.min.js
• jquery-ui.css

You'll need to add in your webpage this file.

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;
}