Many tab buttons, one tab div

[errorParticipant]

I’m writing a simple script editor utility using jqWidgets. A user can open several virtual script files at once, and there should be a (closable) tab representing each open file. I’ve embedded Ace editor in the lower area beneath the tab bar. When a user switches to a new tab, I just want to load different content into the existing editor window, not hide it and show a different div. This is mostly to conserve resources, as Ace editor is resource intensive.

In summary, I’d like to respond to tab change/open/close events with my own implementation, and disable the existing behavior of showing/hiding/creating/destroying individual content divs. Other than that, they should function exactly how they do now.

When I’ve tried to create a tab bar with more lis than divs, I get an “Invalid structure!” error. Is this possible, or can an option be added for this?

[Peter StoevKeymaster]

Hi error,

There is API for dynamically adding new tabs, removing tabs, etc. Ex: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtabs/settings.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[errorParticipant]

The example you posted is still using separate content divs and switching between them. I am asking how to disable this behavior.

[Peter StoevKeymaster]

Hi error,

You cannot disable it. You always should have at least one tab with correct HTML Structure.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[errorParticipant]

To be clear, I’m talking about a structure like this:

<div class=”tabs”>
  <ul class=”tabs-bar”> <!– many tabs –>
    <li class=”tab-button”>File 1< /li>
    <li class=”tab-button”>File 2< /li>
    <li class=”tab-button”>File 3< /li>
    <li class=”tab-button”>File 4< /li>
  < /ul>
  <div class=”tab-content”> <!– single content div shared by all tabs –>
    <textarea cols=”80″></textarea>
  </div>
</div>

(Wow, this editor really doesn’t like HTML.)

[Peter StoevKeymaster]

Hi error,

The editor has “code” button for posting code. Such structure is invalid and won’t work.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[errorParticipant]

Is there any sort of workaround that I could use then for this missing functionality?

I’m considering hiding the content divs with CSS and putting my real content below or absolutely positioned on top of the content area of the tabs. This seems like a very kludgy workaround.

[errorParticipant]

I think ideally what I’d like to see is the tab bar separated into a distinct component, and the existing tabs control can use that. Just a suggestion.

[Peter StoevKeymaster]

Hi error,

The widget checks its HTML Structure before proceeding with its creation. If it finds out that the HTML Structure is invalid i.e similar to the one shown in the samples, it raises an exception. There’s no workaround, because that behavior is actually by design.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts