Posts Tagged ‘cms systems’

Making Tabs for jQuery Tools WYSIWYG Friendly

Wednesday, February 10th, 2010

In this post, I am going to show you how to integrate jQuery Tools – Tabs within a wide open WYSIWYG editor (like in most CMS systems).

Requirements:

  • jQuery 1.3+
  • jQuery Tools 1.1.2+
  • Basic/Intermediate Javascript (JS) knowledge and some jQuery knowledge
  • A WYSIWYG editor that allows you to add custom CSS classes and id attributes to elements.

The Process

  1. Open your WYSIWYG editor
  2. Create a bullet list with 3 bullets
  3. Directly below the bullet list added 3 paragraphs of content
  4. With each paragraph add an id attribute relative to the content (usually done through a right-click)
  5. With the UL element; add an attribute class of “tab” (usually done through a right-click).
  6. Then wrap each text LI with an anchor (A) tag;
  7. For each A tag; make the href (# + value of id given to a paragraph in step 4); repeat for each LI.
    • Utilizing the href attribute is ideal for it ensures backwards compatibility (when JS is disabled) and enhance accessibility.

Sample HTML to match the above steps

<ul class="tab">
	<li><a href="#tab1">Tab 1</a></li>
	<li><a href="#tab2">Tab 2</a></li>
	<li><a href="#tab3">Tab 3</a></li>
</ul>
<div id="tab1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<!-- end #tab1 -->
<div id="tab2">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<!-- end #tab2 -->
<div id="tab3">
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<!-- end #tab3 -->

Now that the HTML is in place we need to make the jQuery tools tabs solution more flexible than it is out of the box. The best way to do this it to append some JS logic to a document ready call via jQuery (which works off the DOM structure above).

Sample Document Ready JS logic

$(document).ready(function() {
//tabs
   if ($("ul.tab").length > 0) {
      var tab_contents = Array();
      $.each($("ul.tab"),function(n,ul){
         var tab_class = "tab_content_" + n;
         tab_contents.push(tab_class);
         //find our tab content by using the a tag's href value
         $.each($(ul).find("li a"), function (i,a) {
            var tmp_el = $(a).attr("href");
            if (i == 0) $(a).addClass("first");
            $(tmp_el).addClass(tab_class);
         });
         //initiate tabs
         $(ul).tabs("." + tab_contents[n]);
         $(ul).addClass("tabs_active" + " " + tab_contents[n]);
      });
   }
});

Breaking down the Document Ready Logic

First use jquery to see if any ul’s with the class of “tab” exist hence $("ul.tab").length > 0 (note: .length is required because unlike most other JS libraries jQuery returns results from the selector engine as an Array). The rest of the code assumes/executes if there is at least 1 instance of ul.tab in the DOM structure.

Next we create an JS Array variable called “tab_contents”. This variable will store a unique CSS identifier to allow multiple ul.tab instances per page. With that said, utilize the jQuery “each” function to work with all ul.tab instances.

Inside the first each create the CSS identifier text (mentioned above) "tab_content_" + n. To explain, n is the count variable of the ul instance starting at 0 (zero). Then, add that to the “tab_contents” array using the JS array push method. Finally, use a nested jQuery each to find the clickable tab content for each ul.tab instance baed on the href value of the “A” tag.

All that is left is to initiate the JQuery Tools – Tabs plugin on each ul.tab instance with $(ul).tabs("." + tab_contents[n]). Then for semantics append the tab_contents CSS identifier to the current ul instances as well as “tabs_active”. The “tabs_active” class allows for unique CSS styling when JS is enabled versus disabled.