How to make the label text on JQuery UI tabs highlightable?

Question

In the JQuery UI implementation of tabs, when a user mouses over the label text in any given tab, the cursor displays as an "I-bar" but the text itself is unselectable. That is to say, it cannot be highlighted (for purposes of copying).

For example, here's a JSFiddle containing JQuery tabs: http://jsfiddle.net/KhwZS/567

Notice that you cannot select the label text in the tabs themselves. I need to find a way to make the tab labels selectable.

Can this be done with JQuery UI tabs?

Answer 1

It seems difficult to select the text as you have to click outside the clickable tab area, or your click will be preventDefault()ed by jquery.ui, although I don't know the exact reason for that (if there is any).

Maybe a good way to fix that would be to have a look at the .tabs() code, and maybe create your own version.

I usually don't like jquery.ui widgets (although I use effects and -ables) and tend to rewrite my own custom widgets depending on the specific needs of the application I'm working on; it shouldn't be hard to create a tabs behavior from scratch, so maybe it's your best opttion.