jQuery UI Tabs with Next/Previous

[biotech]

Hello there,
New to jQuery here so pardon the question.
I looked over the article jQuery UI Tabs with Next/Previous and was quite impressed. Thanks for publishing this ;)

I was wondering if anyone can explain how is that the css in a given example is only about 30 lines while the jQuery UI spits out about 300 lines of compressed css code?
In other words, what is the logic of determining the min. necessary classes and naming convention to be use with tabs (or any other ‘w’idget’)?
eg.

Code:

.ui-tabs-nav li.ui-tabs-selected

vs. something that is more ‘intuitive’ (to me) when writing from scratch

Code:

.mainNavigation li.mainNavigation-active

I know this is more of a ‘go ask jQuery crowd’ kind of a question but being how there is a lot of talent hanging around here maybe someone can drop in a note.

Thanks again!

[Mr KiTT3N]

The convention that these type of "frameworks" or rather widgets adopt is to be very spefic soo there is a very low chance that it conflicts with your personal css….

In jQuery UI case:
example ".ui-tabs-selected"

• "ui-" (name of framework)[/*:m]
• "tabs-" name of plugin,
  note that tabs functionality doesn’t necessarily just apply to navigation. Normal tabs are used for many things… rarely being navigation.[/*:m]
• "selected" (current state)[/*:m][/list:u]

  Why? well one day a guy sat down on his comfy chair and wrote this out, and he used the term "tabs" over something else…
  The jQuery core lib can be little confusing some times in its naming convention it is just something you end up figuring out…

[biotech]

Thanks Mr KiTT3N,
Sorry it took a while to respond by I never got a notification.
Anyhow, thanks for the insight.
I was trying to hack up my own version of this and having some issues getting the vertical list to behave. Items seem to be off in width as well as the background image are not equally centered for each li.
Any change you can take a look > http://tinyurl.com/nsdqdm ?
Thanks again!

[biotech]

Ok I made a few changes using width of 100%…still strange issue.
check out the 1st link the "<" part of the image is smaller – as in height compared to the last/bottom li where image seems to ‘stick out’ a bit more…I know we are talking 1-2px but still…
What gives?
Thanks again!

[Author]

Posts