Custom module using JQuery UITabs

chulajesse · July 2011

Has anyone utilized JQuery tabs (http://jqueryui.com/demos/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!

-Jesse

admin · July 2011

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

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

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

jordan314 · December 2011

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

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

jordan314 · December 2011

Awesome

Howdy, Stranger!

Categories

Custom module using JQuery UITabs

Comments