11:49

24 окт

написал:

Владимир писал: Прошу выложить пример кода для categories.htm, т.к у вас нет примера и в одном шаблоне, как сделать многоуровневое выпадающее меню как на сайте mypad.com.ua

1 Первым делом в файле index.tpl шаблона (этот файл отвечает за внешний вид страницы без контента ее центральной части) ищем сверху заголовочную секцию <head> и добавляем туда подключение скрипта аккордеон меню. Вот пример того, что должно получиться:

<!DOCTYPE html>
<html>
    <head>
        ...
        ...

        {* подключаем скрипт аккордеон меню *}
        <script type="text/javascript" src="{$theme}js/accordion.js"></script>

        {* настраиваем аккордеон *}
        <script type="text/javascript">
            jQuery(document).ready(function () {
                jQuery('ul.topnav').accordion({ accordion:  false,
                                                speed:      500,
                                                closedSign: '&#9654;',
                                                openedSign: '&#9660;' });
            });
        </script>

        ...
        ...
    </head>

    ...
    ...

    <body>
        ...
        ...
    </body>
</html>

Пояснение Здесь первой строкой мы подключаем файл скрипта accordion.js, который (как видно из значения опции src) разместим в папке js текущего шаблона (переменная $theme всегда содержит оканчивающийся слешем URL папки текущего шаблона клиентской стороны сайта).

Вторая строка служит для запуска скрипта аккордеон меню с неким набором параметров, причем действие скрипта распространяется на все DOM-объекты типа ul, имеющие стилевой класс topnav. Список параметров:

accordion - true если остальные ветви меню должны автоматически сворачиваться при клике на другую
speed - скорость анимации в миллисекундах
closedSign - знак в конце ссылки, когда ветвь свернута (▶ это символ ▶)
openedSign - знак в конце ссылки, когда ветвь развернута (▼ это символ ▼)

Следует заметить, что верстальщики могут собирать шаблоны по-разному. Не факт, что в любом шаблоне секция <head> будет размещена в упомянутом tpl-файле в чистом исходном виде, то есть без использования какого-нибудь локального (размещенного внутри шаблона) или универсального (размещенного в папке http://сайт/design/common_parts) модуля генерации заголочной части страницы.

Например, в силу того, что в Impera CMS существует большой набор классных перенастраиваемых (к сожалению пока вручную) универсальных модулей, верстальщик мог бы запросто генерировать заголовки следующим модулем head.htm, где в параметрах вызова модуля просто перечислить, какой favicon-значок, какие мета заголовки, какие css- и js-файлы он хочет подключить в заголовках страницы:

<!DOCTYPE html>
<html>

    {* создаем заголовки страницы *}
    {include file = '../../common_parts/AIMatrix/Constructor/head.htm'

             favicon = 'images/favicon.ico'

             more_metas = ['<meta http-equiv="Expires" content="0" />',
                           '<meta name="Robots" content="all" />']

             main_links = ['css/pollmanager.css',
                           'css/skeleton.css',
                           'css/boxes.css',
                           'css/buttons.css',
                           'css/ezpages.css',
                           'css/lightbox-0.5.css',
                           'css/main.css',
                           'css/social_icons.css',
                           'css/modules.css',
                           'css/print.css']

             link_jquery = true
             link_jqueryUI = true
             link_jqueryForm = true
             link_baloon = true

             link_article_css = false
             link_callme_css = false
             link_notify_css = false
             link_fulminant_css = true
             link_credit_css = true
             link_cart_css = true

             link_slider = false
             link_navigator = true

             more_links = ['js/xeasytooltip.js',
                           'js/easing.1.3.js',
                           'js/jqtransform.js',
                           'js/lightbox-0.5.js',
                           'js/zhover-image.js',
                           'css/correction.css']

             enable_bgsound = true

             autocomplete = false}

    ...
    ...

    <body>
        ...
        ...
    </body>
</html>

В результате заголовочная секция страницы генерируется динамически и у вас нет прямого доступа к контенту этой секции, чтобы внести туда свои дополнения иным способом, кроме как через параметры модуля. Если вы затрудняетесь с параметрами модуля или прямым доступом к этой секции, допустимо разместить продемонстрированное выше подключение скриптов прямо перед тегом <body> или сразу после него, что нормально распознается браузерами, хотя и считается некорректным с точки зрения стандартов.

Если же принципиально хотите следовать стандартам, а верстальщик сверстал шаблон с применением модуля генерации заголовочной секции, тогда вам просто нужно добавить в параметры модуля свои подключения скриптов, как показано на том же примере кода (ваши дополнения выделены одним и другим цветом, чтобы было понятно, что подключаем два разных скрипта - один из файла, другой как фрагмент кода):

<!DOCTYPE html>
<html>

    {* создаем заголовки страницы *}
    {include file = '../../common_parts/AIMatrix/Constructor/head.htm'

             favicon = 'images/favicon.ico'

             more_metas = ['<meta http-equiv="Expires" content="0" />',
                           '<meta name="Robots" content="all" />']

             main_links = ['css/pollmanager.css',
                           'css/skeleton.css',
                           'css/boxes.css',
                           'css/buttons.css',
                           'css/ezpages.css',
                           'css/lightbox-0.5.css',
                           'css/main.css',
                           'css/social_icons.css',
                           'css/modules.css',
                           'css/print.css']

             link_jquery = true
             link_jqueryUI = true
             link_jqueryForm = true
             link_baloon = true

             link_article_css = false
             link_callme_css = false
             link_notify_css = false
             link_fulminant_css = true
             link_credit_css = true
             link_cart_css = true

             link_slider = false
             link_navigator = true

             more_links = ['js/xeasytooltip.js',
                           'js/easing.1.3.js',
                           'js/jqtransform.js',
                           'js/lightbox-0.5.js',
                           'js/zhover-image.js',
                           'css/correction.css',
                           'js/accordion.js',
                           '<script type="text/javascript">
                                jQuery(document).ready(function () {
                                    jQuery('ul.topnav').accordion({ accordion:  false,
                                                                    speed:      500,
                                                                    closedSign: '&#9654;',
                                                                    openedSign: '&#9660;' });
                                });
                            </script>']

             enable_bgsound = true

             autocomplete = false}

    ...
    ...

    <body>
        ...
        ...
    </body>
</html>

То есть в список параметра more_links мы просто добавили два своих значения, что хотели бы добавить в заголовочную информацию.

2 Теперь приведу исходный код файла accordion.js, который, как уже говорилось выше, нужно разместить в папке шаблона, а именно в его внутренней папке js.

/*                                          
* jQuery UI плагин Multilevel Accordion v.1 
*                                           
* Copyright (c) 2011 Pieter Pareit          
*                                           
* http://www.scriptbreaker.com              
*                                           
*/                                          

// плагин
(function ($) {
    $.fn.extend({

        // основная функция плагина
        accordion: function (options) {

            // стандартные настройки
            var defaults = {
                accordion:  'true',
                speed:      300,
                closedSign: '[+]',
                openedSign: '[-]'
            };

            // дополняем стандартные настройки теми, что указал пользователь
            var opts = $.extend(defaults, options);

            // передаем текущий элемент в переменную
            var $this = $(this);

            // добавляем знак РАЗВЕРНУТЬ в уровни аккордеон меню
            $this.find('li').each(function () {
                if ($(this).find('ul').size() != 0) {

                    // добавляем знак в конец текста ссылки и ссылку направляем на #
                    $(this).find('a:first').attr('href', '#').append('<span>'
                                                                       + opts.closedSign
                                                                   + '</span>');

                    // блокируем переход по ссылкам, которые ссылаются на #
                    if ($(this).find('a:first').attr('href') == '#') {
                        $(this).find('a:first').click(function () { return false; });
                    }
                }
            });

            // разворачиваем активную ветвь
            $this.find('li a.selected').each(function () {
                $(this).parents('ul').slideDown(opts.speed);
                $(this).parents('ul').parent('li').find('span:first').html(opts.openedSign);
            });

            // анимация по кликам ссылок
            $this.find('li a').click(function () {
                if ($(this).parent().find('ul').size() != 0) {

                    // когда остальные ветви должны автоматически сворачиваться
                    if (opts.accordion) {
                        if (!$(this).parent().find('ul').is(':visible')) {

                            // анимируем только развернутые ветки
                            parents = $(this).parent().parents('ul');
                            visible = $this.find('ul:visible');
                            visible.each(function (visibleIndex) {
                                var close = true;
                                parents.each(function (parentIndex) {
                                    if (parents[parentIndex] == visible[visibleIndex]) {
                                        close = false;
                                        return false;
                                    }
                                });
                                if (close) {
                                    if ($(this).parent().find('ul') != visible[visibleIndex]) {
                                        $(visible[visibleIndex]).slideUp(opts.speed, function () {
                                            $(this).parent('li').find('span:first').html(opts.closedSign);
                                        });
                                    }
                                }
                            });
                        }
                    }

                    // если текущую ветвь надо свернуть
                    if ($(this).parent().find('ul:first').is(':visible')) {
                        $(this).parent().find('ul:first').slideUp(opts.speed, function () {
                            $(this).parent('li').find('span:first').delay(opts.speed).html(opts.closedSign);
                        });

                    // иначе надо развернуть
                    } else {
                        $(this).parent().find('ul:first').slideDown(opts.speed, function () {
                            $(this).parent('li').find('span:first').delay(opts.speed).html(opts.openedSign);
                        });
                    }
                }
            });
        }
    });
}) (jQuery);

Обратите внимание Данный плагин добавляет в конец текста ссылок меню свой объект <span> с изображением "стрелки". Мы учтем это в стилях, чтобы спозиционировать такой объект вправо от ссылки. И кроме того, плагин благодаря строке a.selected подразумевает, что активный узел меню всегда помечен наличием стилевого класса selected у ссылки узла. Мы учтем это при формировании html-контента меню.

Если посмотреть по коду плагина, с какими элементами он работает (ul, li, a, a.selected, span и вспомнить об ul.topnav, а также что в шаблоне simpla2 дерево категорий вложено в контейнер <div id="catalog_menu">), то согласно этому примерное строение html-кода меню категорий будет выглядеть следующим образом (здесь цветами сразу выделены те части "почерка дизайнера", которые понадобятся нам в дальнейшем, когда с помощью модуля будем отрисовывать дерево категорий; также серым цветом помечены части (# и <span>...</span>), добавляемые плагином во время работы, они нам не интересны):

<div id="catalog_menu">
    <ul class="topnav">
        <li>
            <a href="http://site/url1">Категория 1</a>
        </li>
        ...
        ...
        <li>
            <a href="#">Категория 2<span>▼</span></a>
            <ul class="topnav">
                <li>
                    <a href="#" class="selected">Категория 3<span>▼</span></a>
                    <ul class="topnav">
                        <li>
                            <a href="http://site/url4">Категория 4</a>
                        </li>
                        ...
                        ...
                        <li>
                            <a href="#">Категория 5<span>▶</span></a>
                            <ul class="topnav">
                                ...
                                ...
                            </ul>
                        </li>
                        ...
                        ...
                    </ul>
                </li>
                ...
                ...
            </ul>
        </li>
        ...
        ...
    </ul>
</div>

То есть получается обычный UL-LI-список, в ветви которого вложены такие же UL-LI-списки, если категории данной ветви имеют подкатегории.

3 Теперь необходимо найти на странице tpl-файла то место, где выводится дерево категорий и заменить его следующим фрагментом. Здесь мы используем модуль генерации дерева категорий, сообщая в параметрах модуля детали "почерка дизайнера" (расцветка сохранена как в примере выше):

    {include file = '../../common_parts/AIMatrix/categories.htm'

             items = $categories|default:false

             namepath = ''
             filter = []
             maxlevel = 16
             maxcount = 256

             opentag = '<div id="catalog_menu">'
                 box_opentag = ''

                     listing_opentag = '<ul class="topnav">'
                         link_opentag = '<li>'

                             a_id = ''
                             a_class = ''
                             a_active_class = 'selected'
                             a_highlighted_class = 'highlighted'
                             a_target = ''
                             a_text_maxsize = 256
                             a_text_top_maxsize = 256

                             sublisting_opentag = '<ul class="topnav">'
                                 sublink_opentag = '<li>'
                                 sublink_closetag = '</li>'
                             sublisting_closetag = '</ul>'

                             sublisting_separator = ''
                             sublisting_separator_capacity = 1000000

                         link_closetag = '</li>'
                     listing_closetag = '</ul>'

                     listing_separator = ''
                     listing_separator_capacity = 1000000

                 box_closetag = ''
             closetag = '</div>'}

Заметка Модули Impera CMS часто имеют множество входных параметров, в том числе и опциональных. Я намеренно привожу здесь все параметры, чтобы было понятно, что модуль может использоваться для разнообразного вывода категорий. А неактуальные в данном случае параметры я пометил серым цветом.

4 Осталось добавить в стили сайта следующий фрагмент стилей:

/* контейнер */
#catalog_menu {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* вид уровней */
#catalog_menu ul {
    padding-left: 0;
    padding-bottom: 5px;
    list-style: none;
}
#catalog_menu ul ul {
    padding-left: 20px;
    padding-top: 0;
    padding-bottom: 0;
}
#catalog_menu ul li {
    clear: both;
    font-size: 14px;
    font-weight: bold;
    line-height: 18px;
    margin: 0 15px 5px 0;
    padding: 5px 0 0 0;
    border-top: #E8E8E8 1px solid;
    overflow: auto;
}

/* вид ссылок */
#catalog_menu ul li a {
    padding: 0 5px;
    text-decoration: none;
}
#catalog_menu ul li a:hover {
    color: #fff;
    background-color: #0095eb;
}

    /* текущая категория */
    #catalog_menu ul li a.selected {
        color: #fff;
        background-color: #0095eb;
    }

    /* категория с признаком "выделена" */
    #catalog_menu ul li a.highlighted {
        color: #fff;
        background-color: #eb9500;
    }

/* шрифты уровней */
#catalog_menu ul ul li {
    border: 0 solid;
    font-size: 14px;
    font-weight: normal;
    margin: 0;
    padding: 0;
}
#catalog_menu ul ul ul li {
    font-size: 10pt;
}
#catalog_menu ul ul ul ul li {
    font-size: 8pt;
    line-height: 15px;
}

/* вложенные изначально свернуты */
#catalog_menu ul.topnav ul {
    display: none;
}

/* значок "стрелки" */
#catalog_menu ul.topnav span {
    font-size: 10px;
    float: right;
    color: #ccc;
}

Ответить...

Написание ответа

Перед публикацией рекомендуется использовать Предпросмотр, чтобы увидеть конечный вид сообщения.


имя:				код с картинки:

Обратите внимание! Для противодействия спаму новые посты форума проявляются с задержкой от нескольких минут, пока не пройдут модерацию.