=

Daschmi's Notizblog

RSS Feed

Verschachtelte Tabs mit Material Design Light

Erstellt in Sonstiges am 12. August 2017

Mit dem Material Design Light / Material Design Paket ist es nicht möglich verschachtelte Tabs/Karteireiter zu erstellen. Es wird darauf hingewiesen, dass es aus UI Sicht ungünstig ist, die Tabs zu verschachteln. Wenn es aber nicht anders geht, kann folgender Code verwendet werden:

HTML/Markup:

<div class="mdl-tabs mdl-js-tabs ds-tabs">       
    <div class="mdl-tabs__tab-bar mdl-tabs__tab-bar-top">
        <a href="#tab1-panel" class="mdl-tabs__tab is-active">Tab 1</a>
        <a href="#tab2-panel" class="mdl-tabs__tab">Tab 2</a>
    </div>                
    <div class="mdl-tabs__panel is-active" id="tab1-panel">
                  
        <div class="mdl-tabs ds-tabs">       
            <div class="mdl-tabs__tab-bar">
                <a href="#tab-1-1-panel" class="mdl-tabs__tab is-active">Tab 1.1</a>                      
                <a href="#tab-1-2-panel" class="mdl-tabs__tab">Tab 1.2</a>
            </div>                
            <div class="mdl-tabs__panel is-active" id="tab-1-1-panel">
                    
                1.1
                    
            </div>
            <div class="mdl-tabs__panel" id="tab-1-2-panel">
                    
                1.2
                    
            </div>
        </div>
        
    </div>
            
    <div class="mdl-tabs__panel" id="tab2-panel">
         
        <div class="mdl-tabs ds-tabs">       
            <div class="mdl-tabs__tab-bar">
                <a href="#tab-2-1-panel" class="mdl-tabs__tab is-active">Tab 2.1</a>                      
                <a href="#tab-2-2-panel" class="mdl-tabs__tab">Tab 2.2</a>
            </div>                
            <div class="mdl-tabs__panel is-active" id="tab-2-1-panel">
                    
                2.1
                    
            </div>
            <div class="mdl-tabs__panel" id="tab-2-2-panel">
                    
                2.2
                    
            </div>
        </div>
        
    </div>                
</div>

JavaScript:


<script type="text/javascript">/* <![CDATA[ */

    jQuery(document).ready(function() {
    
        jQuery('.ds-tabs .mdl-tabs__tab').unbind('click').off('click').on('click', function(event) {
      
            event.stopImmediatePropagation(); 
            
            if (jQuery(this).hasClass('is-active'))
            {
                
                return false;
                
            }
            else 
            {
                
                jQuery(this).parent().children('.is-active').removeClass('is-active');
                jQuery(this).addClass('is-active');
                
                jQuery(this).parent().parent().children('.mdl-tabs__panel.is-active').removeClass('is-active');
                jQuery(this).parent().parent().children('.mdl-tabs__panel' + jQuery(this).attr("href")).addClass('is-active');
                    
            }
            
            return false;
        
        } );
        
    } );

/* ]]> */</script>

Wichtig ist die Klasse „ds-tabs“ auf dem umschließenden Element.



Bitte genehmigen Sie die Verwendung von Cookies dieser Website! Mehr Informationen

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close