• Welcome to the Chevereto user community!

    Here users from all over the world gather around to learn the latest about Chevereto and contribute with ideas to improve the software.

    Please keep in mind:

    • 😌 This community is user driven. Be polite with other users.
    • 👉 Is required to purchase a Chevereto license to participate in this community (doesn't apply to Pre-sales).
    • 💸 Purchase a Pro Subscription to get access to active software support and faster ticket response times.

Third Tab

macho01

Chevereto Noob
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
 
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.
 
What i did was made my own custom jquery action for the tabs to make this process easier

Code:
<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
Code:
    <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
Code:
<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
Code:
    <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

Code:
<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

Code:
<li class="custom"><a href="#custom">customtab</a></li>

inside the <ul class="upload_options">

then
Code:
<div id="custom" class="tab_content">content here </div>

inside the <div class="upload_options_container">

Hope this helps out.
 
Back
Top