Joomla! Україна

На сторінці «Хостинг для Joomla» зробив доволі цікаву реалізацію фільтрації списку да тегами. Такий функціонал дає можливість відфільтрувати список хостерів за деякими параметрами, наприклад VPS, VDS та інше.

Яким  чином це можна реалізувати?

Для реалізації поставленої задачі нам необхідний певний список, наприклад:

 <ul>
    <li>
        Хостинг 1</li>
    <li>
        Хостинг 2</li>
    <li>
        Хостинг 3</li>
    <li>
        Хостинг 4</li>
</ul> 

Для списку хостинг-провайдерів тепер давайте створимо список тегів за якими ми будемо фільтрувати:

<ul class="filter-panel" id="filter">
    <li class="current">
        <a href="#">Всі</a></li>
    <li>
        <a href="#">VPS</a></li>
    <li>
        <a href="#">VDS</a></li>
</ul>

Зауважте, що для першого елементу списку необхідно задати клас current!

Тепер нам потрібно виставити теги відносно елементів списку для хостинг-провайдерів. Наприклад так:

<ul class="filter">
    <li class="vps">
        Хостинг 1</li>
    <li class="vps">
        Хостинг 2</li>
    <li class="vps vds">
        Хостинг 3</li>
    <li class="vds">
        Хостинг 4</li>
</ul>

Зверніть увагу, що класи для формування тегів вони повинні бути у нижньому регістрі, а пробіл замінюємо на дефіс «-»!

Повний код html буде виглядати наступним чином:

<ul class="filter-panel" id="filter">
    <li class="current">
        <a href="#">Всі</a></li>
    <li>
        <a href="#">VPS</a></li>
    <li>
        <a href="#">VDS</a></li>
</ul>
<ul class="filter">
    <li class="vps">
        Хостинг 1</li>
    <li class="vps">
        Хостинг 2</li>
    <li class="vps vds">
        Хостинг 3</li>
    <li class="vds">
        Хостинг 4</li>
</ul>

Тепер потрібно підключити бібліотеку JQuery, якщо вона не підключена:

<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">!window.jQuery AND document.write(unescape('%3Cscript src="<?php echo JURI::base(); ?>/media/jq/jquery-1.6.1.min.js"%3E%3C/script%3E'))</script>

І далі додаємо простий сніпет:

 <script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function()
{
    jQuery('ul#filter a').click(function() {
        jQuery('ul#filter .current').removeClass('current');
        jQuery(this).parent().addClass('current');

        var filterVal = jQuery(this).text().toLowerCase().replace(' ','-');

        if(filterVal == 'всі') {
            jQuery('ul.filter li.hidden').show().removeClass('hidden');
        } else {
            jQuery('ul.filter li').each(function() {
                if(!jQuery(this).hasClass(filterVal)) {
                    jQuery(this).hide().addClass('hidden');
                } else {
                    jQuery(this).show().removeClass('hidden');
                }
            });
        }

        return false;
    });
}
/*]]>*/
</script>

Панель фільтрації можна прикрасити за допомогою CSS, наприклад так:

/* filter */
.filter-panel {
    margin: 18px 0 9px 0;
    padding: 0;
}
    .filter-panel li {
        background: transparent;
        list-style: none;
        list-style-position: inherit;
        float: left;
        padding: 0;
    }
        .filter-panel li a {
            padding: 6px 10px;
            border-radius: 8px;
            text-decoration: none
        }        
        .filter-panel li.current a {
            background: #f0f2f4;
            font-weight: bold;
        }

І в результаті ми отримаємо простий список з фільтром, як на сторінці «Хостинг для Joomla».

Якщо у вас виникає запитання, а яким чином список формується у колонки і за алфавітом, то про це я розповім вже у наступній статті.