Note the upgraded forum! If you are experiencing issues logging in, you may need to reset your password which should send an email. If the email doesn't arrive, be sure to check your spam folder just in case.

Custom module using JQuery UITabs

edited July 2011 in Modules
Has anyone utilized JQuery tabs ( to segment the amount of the data when maintaining a record? I have a need to manage a lot of information and scrolling up-n-down would be mitigated if I can manage them through tabs when editing a record. Any examples would be greatly appreciated!



  • edited 11:53AM
    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.
  • edited 11:53AM
    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:
    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.

    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.
  • edited 11:53AM
    the tutorial link is not valid. could you post a sample?
  • edited 11:53AM
    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, html ul.tabs 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.
  • edited 11:53AM
    Just as a heads up... we will be making this much easier in the next version... no timetable yet though.
  • edited 11:53AM
Sign In or Register to comment.