Использование двух одинаковых плагинов jQuery (Kwicks) на одной странице

Я использую плагин jQuery "Kwicks" на сайте и имею некоторые конфликты. Плагин работает нормально для навигации, но я хочу сделать то же самое для отдельной, меньшей навигации (все еще использующей Kwicks) для социальных сетей в верхняя часть страницы. Я перепробовал все, что мог сделать новичок, но я все еще не могу заставить работать второй навигационный модуль Kwicks.

Вот этот сайт: http://www.webexplosive.com/accu1

Источник

2 ответа

Решение

Прежде всего, включите ваши файлы javascript в раздел заголовка страницы, и это нужно только один раз.

<head>
 <script src='js/jquery-1.8.1.min.js' type='text/javascript'></script>
 <script src='js/jquery.easing.1.3.js' type='text/javascript'></script>
 <script src='js/jquery.kwicks.js' type='text/javascript'></script>
</head>

Во-вторых, вы ссылаетесь на то, что меню одинаковы, поэтому плагин будет сбит с толку и получит только один (зависит от того, как плагин обрабатывает селектор)

Таким образом, чтобы решить проблему, предоставьте тегам ul атрибут id, например, menu1 и menu2 (уникальный)

<ul class='kwicks1 kwicks-vertical' id='menu1'>
    ...
</ul>
<ul class='kwicks kwicks-horizontal' id='menu2'>
   ...
</ul>

<script>
$(document).ready(function () {
    $('#menu1').kwicks({
        size: 125,
        maxSize: 250,
        spacing: 2,
        behavior: 'menu',
            easing: 'easeOutBounce',
            isVertical: true
    });
    $('#menu2').kwicks({
                size: 125,
                maxSize : 250,
                spacing : 2,
                behavior: 'menu' ,
                easing: 'easeOutBounce'
            });
});
</script>
Источник

jsFiddle: http://jsfiddle.net/jphellemons/CXu4n/

$('.kwicks-horizontal').kwicks({
    size: 125,
    maxSize : 250,
    spacing : 2,
    behavior: 'menu' ,
    easing: 'easeOutBounce' ,
    isVertical: false
});
$('.kwicks-vertical').kwicks({
    size: 200,
    maxSize : 300,
    spacing : 1,
    behavior: 'menu' ,
    easing: 'easeOutBounce' ,
    isVertical: true
});
Источник
Другие вопросы по тегам