HOWTO: jQuery UI Tabs Styling

From website:

jQuery UI Tabs Styling

Have you wanted to do something a little different with your jQuery UI Tabs?

  • Remove the header background
  • Remove the entire header
  • Remove most of the formatting
  • Make the non-active tabs smaller
  • Add icons
  • Centre the tabs
  • Move the tabs to the bottom
  • To the left
  • To the right
  • Nested horizontally and then vertically
  • Have a single line of tabs that scrolls

All of these examples only involve CSS changes (except for the single line of tabs) that can be added inline to your page to override the defaults. Note, however, that for the left and right side examples you need to explicitly set the tab content height and the tabs list width, and that for the single line of tabs you must specify the overall list width.

~ by WPA Staff on October 19, 2012.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: