Dhaval Dhaval - 7 months ago 40
Javascript Question

how to change Jquery ui tabs design to look like Microsoft ajax toolkit tabcontainer

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 ajax toolkit Tabcontainer.

Microsoft ajax toolkit Tabcontainer

currently used 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.

modified jquery tabs

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

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

enter image description here

JSFiddle