Topic: Third Tab
Hello everyone, it's some days that I'm trying to add a third tab on the index of chevereto, but without result, can anyone explain me how to do that or help me in any way??
Thanks
Re: Third Tab
This is quite an old thread. I don't believe macho01 still checks this forum.
His question was however: how to add an extra tab next to remote upload.
Re: Third Tab
What i did was made my own custom jquery action for the tabs to make this process easier
<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.upload_options li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.upload_options li").click(function() {
$("ul.upload_options 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;
});
//Hide (Collapse) the toggle containers on load
$(".toggle_container").hide();
//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
/*$("a.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("fast");
return false; //Prevent the browser jump to the link anchor
});*/
$("a.trigger").click(function(){
var $next = $(this).next();
//close and deactivate everything else
$('a.trigger').not(this).removeClass('active'); //deactivate all .trigger buttons except current
$('.toggle_container.active_toggle').not($next.get(0))
.slideUp()
.removeClass('active_toggle'); //close all active containers except the current and deactivate
//now deal with the current item (toggle)
$(this).toggleClass("active");
$next.slideToggle("medium").toggleClass('active_toggle');
return false; //Prevent the browser jump to the link anchor
});
// ]]>
</script>Then changed
This
<div id="tab_container"<? if (isset($lang)) { echo ' class="'.$lang.'"'; } ?>>
<div class="btn_local"><a class="local" id="linklocal" style="display: none;"></a></div>
<div class="btn_remoto"><a class="remota" id="linkremota"></a></div>
</div>To this
<ul class="upload_options">
<li class="local"><a href="#local">Local</a></li>
<li class="remote"><a href="#remote">Remote</a></li>
</ul>Now for the body of the feilds
Change
<div id="contenedorupload">
<div id="subir_local">
<h2 id="chooselocal"><?php echo TXT_LOCAL;?></h2>
<div class="inputs"><input name="fileup" type="file" size="60" id="localUP" onclick="javascript:document.getElementById('remotaUP').value = '';"/></div>
</div>
<div id="subir_remota" style="display: none;">
<h2 id="chooseremota"><?php echo TXT_REMOTE;?></h2>
<div class="inputs"><input name="remota" size="60" id="remotaUP" onclick="javascript:document.getElementById('localUP').value = '';"/></div>
</div>
</div>To this
<div class="toggle_container pref">
<div id="local" class="tab_content">
<h2 id="chooselocal"><?php echo TXT_LOCAL;?></h2>
<div class="inputs"><input name="fileup" type="file" size="60" id="localUP" onclick="javascript:document.getElementById('remotaUP').value = '';"/></div>
</div>
<div id="remote" class="tab_content">
<h2 id="chooseremota"><?php echo TXT_REMOTE;?></h2>
<div class="inputs"><input name="remota" size="60" id="remotaUP" onclick="javascript:document.getElementById('localUP').value = '';"/></div>
</div>
</div>Note: keep in mind this is was done on a hevily customized script so this may not be perfect if you have any problems let me know.
From that it should be very simple to add a new tab by adding
<li class="custom"><a href="#custom">customtab</a></li>inside the <ul class="upload_options">
then
<div id="custom" class="tab_content">content here </div>inside the <div class="upload_options_container">
Hope this helps out.
Re: Third Tab
None of that code will work without the stylesheet for those classes.
