jQuery UI tabs without href and/or content, only with events?
-
08-03-2021 - |
Question
I wanted to do something like Wordpress editor.
I took jQuery UI tabs (I don't want to use another tabs plugin, becauase I already use jUI for tabs on the site) and created two tabs named like "WYSIWYG" and "HTML". There's a TEXTAREA under the tabs header.
Then I wanted to use NicEdit - as you can see in the demo, it can "wrap" and "unwrap" textarea with HTML editor. Everything seemed fine, but the problem is:
- when I use "" or "#" in tabs' HREF, the first tab is active, the second is not - so is not clickable, so I cannot attach SELECT event to it
- when I use non-existing id (
<a href="#notexist">...
), it of course throws exception - when I use non-existing, "dummy" selector (really -
<a href="dummy">...
) then under the tabs header (between tabs and textarea) appears quite big space, like tabs created new div and "closed" it as their content.
All I want is to use jQuery UI tabs just to create two tabs without content, which can be (de)selected and fire events when selecting, so I could use NicEdit. What am I missing?
Solution
I'm not sure I understand completely what is your problem. I've guessed you are trying to use only one textarea. Correct me if I'm wrong.
Anyway, I think you're better off using two textareas and synchronize them when switching tabs.
NicEdit provides a basic javascript API to get/set the content of editor instances.
I have made jsfiddle for you to see.
OTHER TIPS
I was looking for the natural way to achieve the same (that's how I got here in this topic).
Since there is no answer here, I'll post the simple solution I ended with:
<div id="tabs" class="ui-tabs">
<ul>
<li><a id="firstTab" href="#listContent" onclick="yourOwnHandler();">Text</a></li>
<li><a href="#listContent" onclick="yourOwnHandler();">Text</a></li>
<!-- Etc, etc... -->
</ul>
<div id="listContent"></div>
</div>
All the idea is in the empty div, which does not show regardless of the classes jQuery applies to it - simply because there's nothing to show.
This is close to your 3d approach, but the problem there was with incorrect href (without #), unless this was what you intended.
As you can see, you don't even need several divs - each tab href can be the same. I chose "listContect" as div ID because the URL "yourSite/Page#listContent" looks better than someting with "#dummy" or "#tabs".
Off course, onclick event would be prettier if attached using jQuery, but there are reasons (specific for my page) why I use inline approach here.