Custom module using JQuery UITabs

Comments

• admin

  July 2011 edited 2:16PM

  Unfortunately, the basic form layout doesn't have the normal tag groupings required to break them out into tabs. However, you could possibly manipulate the DOM of the rendered form to create what you need. What if you create sections in your model's form_fields() method to act as the tab labels, like so:
  ... $fields['Section 1'] = array('type' => 'section'); ... $fields['Section 2'] = array('type' => 'section'); ...
  Then, in your simple module configuration, include the "js" parameter which has name of the javascript file that has the logic for your tabs. You would need to include in that file the DOM manipulation required for the tabs to work, however, if it's just a matter of hiding and showing sections, you may find it easier to create the logic you need instead of trying to get it to work with the tabs plugin.
• jordan314

  December 2011 edited 2:16PM

  Hiya,
  I just wanted to say I got this (jquery tabs) working using my advanced module and a custom view. First I tried sections, custom fields, and divs in the "before_html" and "after_html" properties using set_field_order, but the form ending divs and tds (depending on the form render method) after each field messed everything up.
  Instead, I followed your advice on calling render() on the form multiple times for fieldsets:
  http://getfuelcms.com/forums/discussion/459/how-to-best-create-a-fieldset-and-legend-using-the-formbuilder-class/p1
  Then I set up the view like this:
  <div class="tab_container"> <form method="post" action="<?=fuel_url($this->module_uri.'/'.$action.'/'.$id)?>" enctype="multipart/form-data" id="form"> <div id="tab1" class="tab_content"> <?=$form?> </div> <div id="tab2" class="tab_content"> <?=$form2?> </div> <div id="tab3" class="tab_content"> <?=$form3?> </div> </form> </div>
  
  I used this jQuery tab tutorial, and their default CSS works nicely with fuel's theme.
  http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/
  
  Now I have a submit button on each tab, but you can modify content on all three tabs and all three submit buttons will save everything.
• jmobile

  December 2011 edited 2:16PM

  the tutorial link is not valid. could you post a sample?
• jordan314

  December 2011 edited 2:16PM

  Weird, that site must have just gone down.
  Here is the script I used:
  <script> $(document).ready(function() { //When page loads... $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active ID content return false; }); }); </script>
Then you add a UL for your tab titles: <ul class="tabs"> <li><a href="#tab1">Tab 1 name</a></li> <li><a href="#tab2">Tab 2 name</a></li> <li><a href="#tab3">Tab 3 name</a></li> </ul>
  And use the code I posted before for your content.
  Here is the tabs CSS:
  /* Tabs CSS */ ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; /*--Set height of tabs--*/ border-bottom: 1px solid #999; border-left: 1px solid #999; width: 100%; } ul.tabs li { float: left; margin: 0; padding: 0; height: 31px; /*--Subtract 1px from the height of the unordered list--*/ line-height: 31px; /*--Vertically aligns the text within the tab--*/ border: 1px solid #999; border-left: none; margin-bottom: -1px; /*--Pull the list item down 1px--*/ overflow: hidden; position: relative; background: #e0e0e0; } ul.tabs li a { text-decoration: none; color: #000; display: block; font-size: 1.2em; padding: 0 20px; border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/ outline: none; } ul.tabs li a:hover { background: #ccc; } html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/ background: #fff; border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/ } .tab_container { border: 1px solid #999; border-top: none; overflow: hidden; clear: both; float: left; width: 100%; background: #fff; } .tab_content { padding: 20px; font-size: 1.2em; padding-bottom: 20px; }
  You will have to use and advanced module and view to split your form up into tabs.
• admin

  December 2011 edited 2:16PM

  Just as a heads up... we will be making this much easier in the next version... no timetable yet though.
• jordan314

  December 2011 edited 2:16PM

  Awesome