Простые вкладки — Еще один пример работы с jQuery

15 Дек
2011

«Простые вкладки» — вкладки, которые просто переключают готовый контент, без асинхронной подгрузки, без нестандартной реакции — только переключение



Разметка


<p id="my_tabs" class="simple_tabs">
    <a href="#my_tab_id_1" class="tab current">Tab 1</a>
    <a href="#my_tab_id_2" class="tab">Tab 2</a>
    <a href="#my_tab_id_3" class="tab">Tab 3</a>
</p>
<p id="my_tab_id_1" class="simple_tabs_section current">Tab 1 content</p>
<p id="my_tab_id_2" class="simple_tabs_section" style="display:none">Tab 2 content</p>
<p id="my_tab_id_3" class="simple_tabs_section" style="display:none">Tab 3 content</p>

<script type="text/javascript">
    SimpleTabs.prepare( jQuery('#my_tabs') );
</script>


По атрибуту href тега <a> с классом .tab, SimpleTabs узнает, что нужно показать секцию с ID #my_tab_id_1

CSS


/* Simple Tabs */
.simple_tabs{ border-bottom:1px solid #e2ecf5 }
.simple_tabs .tab{ margin-right:1px; display:inline-block; padding:4px 12px 2px 12px;
    -webkit-border-top-left-radius:6px; -webkit-border-top-right-radius:6px;
    -moz-border-radius-topleft:6px; -moz-border-radius-topright:6px;
    border-top-left-radius:6px; border-top-right-radius:6px;
}
.simple_tabs .tab:hover { background:#f8fafc; }
.simple_tabs .tab.current{ padding:4px 12px 2px 12px; background:#e2ecf5; color:#1f3e5a; text-decoration:none; }


JavaScript


Что мне нравится в jQuery, так это читабельность

var SimpleTabs = {
    prepare: function(oTabs) {
        var oThis = this;
        this.oTabs = oTabs;
        this.oTabs.children('.tab').click(function() {
            var oTab = jQuery(this);
            oTab.siblings('.current').removeClass('current').end().addClass('current');
            jQuery(oTab.attr('href')).siblings('.current').hide().removeClass('current').end().show() .addClass('current');
            return false;
        });
    }
}

Ни каких CASE’ов, ни каких «лишних» атрибутов вроде is_visible=»0|1″, ни каких извращений с z-index, ни каких onclick=»return toggleTab(‘about’)»

Спасибо jQuery! Demo
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх