Вы находитесь здесь:Плагины jQuery»liKnopik - jQuery Side Button или боковая кнопка на jQuery

liKnopik - jQuery Side Button или боковая кнопка на jQuery

Понедельник, 19 Ноябрь 2012 14:12 Автор 
effect liKnopik - jQuery Side Button или боковая кнопка на jQuery

Плагин liKnopik даёт возможность разместить на сайте скользящий выезжающий блок для размещения в нем любого контента. Блок с контентом можно будет скрывать и показывать нажатием на прикрепленную к нему кнопку.
Плагин liKnopik работает совместно с плагином jquery cookie (Klaus Hartl), и дает возможность запомнить состояние плавающего блока (закрытое или открытое).
Блоков на одной странице можно размещать неограниченное количество, главное чтобы они друг другу не мешали

Пример работы на JSFIDDLE

Подключаемые файлы

Подключаем CSS "liKnopik"

        <link rel="stylesheet" href="#">

Подключаем библиотеку "jQuery" и плагины "jquery.cookie", "jQueryRotate", и конечно же "liKnopik":

   
        <script src="/js/jquery-1.8.min.js"></script>
        <script src="/js/jquery.cookie.js"></script>
        <script src="/js/jQueryRotate.3.1.js"></script>
        <script src="/js/jquery.liKnopik.js"></script>

Структура HTML

На страничку вставляем следующий код:

        <div class="anyClass">
            <div class="knopikBut">
                <!-- Текст в кнопке -->
            </div>
            <div class="knopikCont">
                <!-- Выезжающий контент -->
            </div>
        </div>

Инициализация плагина

    $('.anyClass').liKnopik({
        topPos:'50px',      //Положение кнопки по вертикали: 'center' или целое число в пикселях
        sidePos:'right',    //Положение кнопки по горизонтали: 'left' или 'right'    
        startVisible:true   //true или false,
                            //Если "true" - содержание кнопки по умолчанию открыто
    });

BUG FIX

28.05.2013 - При использовании jQuery 2.0 отсутствует поддержка IE 7 и 8
28.05.2013 - Поддержка IE 10
28.05.2013 - Переписана функция определения IE для поддержки jQuery 1.9+
26.01.2013 - Плагин доработан под версии IE 7-9

Прочитано 29010 раз Последнее изменение Воскресенье, 30 Март 2014 15:19
Оцените материал
(6 голосов)
Теги
Другие материалы в этой категории: « liSlidik - jQuery Responsive Slider или адаптивный слайдер на jQuery liFontResponsive - jQuery Font Responsive или адаптивный текст на jQuery »

Комментарии   

 
Amiga
# Amiga 25.01.2013 22:41
ссылка на этой странице выше - http://jsfiddle.net
Вот как выглядит это в моем браузере IE9 - http://andy81.valuehost.ru/screen.jpg
http://andy81.valuehost.ru/screen1.jpg
А так выглядит страница примера из архива - http://andy81.valuehost.ru/screen2.jpg
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 26.01.2013 00:27
Цитирую Amiga:
ссылка на этой странице выше - http://jsfiddle.net
Вот как выглядит это в моем браузере IE9 - http://andy81.valuehost.ru/screen.jpg
http://andy81.valuehost.ru/screen1.jpg
А так выглядит страница примера из архива - http://andy81.valuehost.ru/screen2.jpg

Спасибо за ваше внимание к плагину. Баг устранен и протестирован в IE7-9
Скачайте заново архив
Ответить | Ответить с цитатой | Цитировать
 
 
Amiga
# Amiga 26.01.2013 10:43
Спасибо! Теперь действительно все работает! :)
Ответить | Ответить с цитатой | Цитировать
 
 
Amiga
# Amiga 02.05.2013 15:37
В IE10 вертикальная надпись на боковой кнопке вылазит за пределы самой кнопки. В IE9 и ниже все отображается нормально. Сам не разодрался где подправить... Может Вы сможете?
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 28.05.2013 03:13
Цитирую Amiga:
В IE10 вертикальная надпись на боковой кнопке вылазит за пределы самой кнопки. В IE9 и ниже все отображается нормально. Сам не разодрался где подправить... Может Вы сможете?

28.05.2013 - Добавлена поддержка IE 10
Скачайте заново архив
Ответить | Ответить с цитатой | Цитировать
 
 
Андрей
# Андрей 13.05.2013 12:14
Vot skript moi kotorui perekruvaet vash i on vash ne rabotaet. chto delat____????




$(document).ready(function() {
$.noConflict();

jQuery('#banner-example-1').paradigm(
{
width:900,
height:300,
thumbWidth:90,
thumbHeight:50,
thumbAmount:6,
thumbSpaces:4,
thumbPadding:4,
shadow:'true',
parallaxX:500,
parallaxY:10,
captionParallaxX:-40,
captionParallaxY:2,
touchenabled:'on',
timer:5
});
});





pomogite
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 13.05.2013 16:17
Цитирую Андрей:
Vot skript moi kotorui perekruvaet vash i on vash ne rabotaet. chto delat____????
$(document).ready(function() {
$.noConflict(); jQuery('#banner-example-1').paradigm(
...
pomogite


Подключайте мой плагин тоже через "jQuery", а не "$":
jQuery('.anyClass').liKnopik(...

И почитайте про использование функции
jQuery.noConflict()
http://api.jquery.com/jQuery.noConflict/
Ответить | Ответить с цитатой | Цитировать
 
 
Amiga
# Amiga 25.05.2013 19:09
Возможно я тупой или чего-то не понимаю, но этот плагин практически не рабочий.
В Opera и Firefox эта боковая кнопка корректно отображается только в jQuery 1.7.2 и 1.8.3 (судя по jsFiddle), с остальными версиями все разваливается...
В IE все еще хуже. Кроме ограничений в версиях jQuery, не корректно отображается вертикальная надпись на боковой кнопке. У меня стоит IE10, проверял также в режиме совместимости c IE7, IE8. Только в IE9 панель отображается корректно. А жаль, красивая плавающая боковая панелька...
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 28.05.2013 03:25
Цитирую Amiga:
...В Opera и Firefox эта боковая кнопка корректно отображается только в jQuery 1.7.2 и 1.8.3...

Плагин писался под актуальную в своё время версию jQuery 1.8, так что здесь нет ничего удивительного

Цитирую Amiga:
...У меня стоит IE10, проверял также в режиме совместимости c IE7, IE8. Только в IE9 панель отображается корректно...


IE 10 показывает некорректно рендер браузеров IE 7 и 8, так что не расстраивайтесь, там все нормально (я в свое время тоже на это купился), а поддержка IE 10 уже добавлена

Цитирую Amiga:
...А жаль, красивая плавающая боковая панелька...


Скачайте заново архив и ознакомьтесь с внесенными изменениями в описании плагина
Ответить | Ответить с цитатой | Цитировать
 
 
Amiga
# Amiga 28.05.2013 12:24
Спасибо. А при jQuery 2.0 сделаете поддержку IE7,8? Все-равно со временем придется на него переходить...
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 28.05.2013 13:37
Цитирую Amiga:
Спасибо. А при jQuery 2.0 сделаете поддержку IE7,8? Все-равно со временем придется на него переходить...

Начиная с версии 2.0 jquery больше не поддерживает IE 6, 7 и 8.
Для тех кому требуется поддержка этих устаревших браузеров продолжается разработка версий 1.х
Источник: http://blog.jquery.com/2013/04/18/jquery-2-0-released/
Ответить | Ответить с цитатой | Цитировать
 
 
Дмитрий
# Дмитрий 30.08.2013 11:39
Здравствуйте!
На движке Wordpress такая проблема - скрипт "Рубрики" работает, но только в открытом положении и только слева, а при нажатии скрывается полностью и резко (не уезжает, а именно исчезает).
Версия jquery - 1.10.2.
Ответить | Ответить с цитатой | Цитировать
 
 
Дмитрий
# Дмитрий 03.09.2013 15:44
Цитирую Дмитрий:
Здравствуйте!
На движке Wordpress такая проблема - скрипт "Рубрики" работает, но только в открытом положении и только слева, а при нажатии скрывается полностью и резко (не уезжает, а именно исчезает).
Версия jquery - 1.10.2.


Проблему удалось решить самостоятельно, может быть кому-то поможет: во многих движках, в стилях прописывается класс hidden со значением none. Плагин liknopik создает класс с аналогичным именем, в результате конфликта ничего не работает. Надо просто убрать класс hidden из стандартных стилей движка.
Ответить | Ответить с цитатой | Цитировать
 
 
Посетитель
# Посетитель 17.09.2013 22:19
проверен на платформе mac - все гуд
Ответить | Ответить с цитатой | Цитировать
 
 
Naymer
# Naymer 26.06.2016 14:59
Здравствуйте, очень хороший скрипт, в одном скрипте можно несколько поставить, не то что до этого у меня был.

Но вот второй час бьюсь над тем, что бы кнопки немного отделить от панелей, то есть надо, что бы когда панель спрятана, то кнопка находилась бы от края окна браузера на 5рх и соответственно если панель открыта, то кнопка должна находится от края панели на 5рх.

Так получится, что кнопки как бы висят отдельно.
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 04.07.2016 18:56
Цитирую Naymer:
Здравствуйте, очень хороший скрипт, в одном скрипте можно несколько поставить, не то что до этого у меня был.

Но вот второй час бьюсь над тем, что бы кнопки немного отделить от панелей, то есть надо, что бы когда панель спрятана, то кнопка находилась бы от края окна браузера на 5рх и соответственно если панель открыта, то кнопка должна находится от края панели на 5рх.

Так получится, что кнопки как бы висят отдельно.

http://jsfiddle.net/yurik417/h7SUg/144/
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 04.07.2016 18:57
Цитирую LiMasscode:
Цитирую Naymer:
Здравствуйте, очень хороший скрипт, в одном скрипте можно несколько поставить, не то что до этого у меня был.

Но вот второй час бьюсь над тем, что бы кнопки немного отделить от панелей, то есть надо, что бы когда панель спрятана, то кнопка находилась бы от края окна браузера на 5рх и соответственно если панель открыта, то кнопка должна находится от края панели на 5рх.

Так получится, что кнопки как бы висят отдельно.

http://jsfiddle.net/yurik417/h7SUg/144/



.sidePosRight .knopikBut {
left:-32px !important;
right:auto !important;
}
.knopikBut {
left:auto !important;
right:-32px !important;
}
Ответить | Ответить с цитатой | Цитировать
 
Наверх
Онлайн-конструктор українського орнаменту

Чем вы можете помочь?

1. Разместить ссылку на своем сайте
Если вы ведете блог или у вас есть сайт - поставьте ссылку на www.masscode.ru. Скопируйте этот код:

<a href="/" title="Плагины, сниппеты и пользовательские скрипты на jquery" target="_blank">Плагины, сниппеты и пользовательские скрипты на jquery</a>

2. Поддержать проект финансово
Вы можете сделать добровольное пожертвование

AUH: U878157792792
USD: Z821422743261
RUB: R360648948582
EUR: E298388086680

Свежие материалы

Последние коментарии

Чудо облако

Вы находитесь здесь:   ГлавнаяjQueryliKnopik - jQuery Side Button или боковая кнопка на jQuery