1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

  2. Anuncie Aqui ! Entre em contato fdantas@4each.com.br

Bootstrap Tabs in View page

Discussão em 'PSDN - Forum' iniciado por Meryk, Fevereiro 10, 2015.

  1. Meryk

    Meryk Guest

    Hello,

    We are trying to use bootstrap tabs in one of our view pages.

    This is how we did it before using jquery ui tabs, and it is working fine :

    <ul class="customTabs">
    <li><a href="#rbi_S_12250">Email Addresses</a></li>
    <li><a href="#rbi_S_59612">Engagement Classification</a></li>
    <li><a href="#rbi_S_58296">Referred Opportunities</a></li>
    <li><a href="#rbi_S_58307">Opportunity Contacts</a></li>
    </ul>


    <script>
    $(document).ready(function ($) {
    $( "#rbe_viewTab0" ).tabs();
    $(".customTabs").css({"background":"#EEEEEE"});
    $(".ui-widget-header").css({"border":"none"});

    });
    </script>

    And this is what we are doing with bootstrap :

    <ul id="mytabs" class="nav nav-tabs" data-tabs="tabs">

    <li class ="active"><a href="#rbi_S_12250" data-toggle="tab">Email Addresses</a></li>
    <li><a href="#rbi_S_59612" data-toggle="tab">Engagement Classification</a></li>
    <li><a href="#rbi_S_58296" data-toggle="tab">Referred Opportunities</a></li>
    <li><a href="#rbi_S_58307" data-toggle="tab">Opportunity Contacts</a></li>
    </ul>


    <script type="text/javascript">
    jQuery(document).ready(function ($) {
    $('#mytabs').tab();
    });
    </script>

    So the problem we are facing is that the tabs are appearing and are clickable, but the sections (Email Adresses : rbi_S_12250, Engagement Classification: rbi_S_59612, etc ..) are not shown when the correspondent tab is selected. Instead the four sections are all displayed one after the other as they have been set in the design page. Of course, the script component is written in a section we added before the five others.

    We also tried putting this script :

    <script type="text/javascript">
    jQuery(document).ready(function ($) {
    $('#mytabs').tab();
    });
    </script>

    in another script component at the bottom after all these sections. Still not working.

    Any ideas please?

    Regards,

    Meryem

    Continue reading...

Compartilhe esta Página