• Registered: 2010-01-28
  • Posts: 1

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

Thumbs up

  • Registered: 2010-05-29
  • Posts: 8

Re: Third Tab

What do you mean by 3rd tap?

Thumbs up

  • From: The Netherlands
  • Registered: 2009-09-18
  • Posts: 133

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.

Thumbs up

  • Registered: 2010-11-24
  • Posts: 15

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.

Thumbs up

  • Registered: 2011-01-09
  • Posts: 19

Re: Third Tab

None of that code will work without the stylesheet for those classes.

Thumbs up