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

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

Понедельник, 19 Ноябрь 2012 14:12 Автор 

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

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

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

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

        <link rel="stylesheet" href="/css/liKnopik.css">
    

Подключаем библиотеку "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

Прочитано 20475 раз Последнее изменение Воскресенье, 30 Март 2014 15:19
Оцените материал
(4 голосов)

Комментарии   

 
# 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 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 26.01.2013 10:43
Спасибо! Теперь действительно все работает! :)
Ответить | Ответить с цитатой | Цитировать
 
 
# Amiga 02.05.2013 15:37
В IE10 вертикальная надпись на боковой кнопке вылазит за пределы самой кнопки. В IE9 и ниже все отображается нормально. Сам не разодрался где подправить... Может Вы сможете?
Ответить | Ответить с цитатой | Цитировать
 
 
# 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 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 25.05.2013 19:09
Возможно я тупой или чего-то не понимаю, но этот плагин практически не рабочий.
В Opera и Firefox эта боковая кнопка корректно отображается только в jQuery 1.7.2 и 1.8.3 (судя по jsFiddle), с остальными версиями все разваливается...
В IE все еще хуже. Кроме ограничений в версиях jQuery, не корректно отображается вертикальная надпись на боковой кнопке. У меня стоит IE10, проверял также в режиме совместимости c IE7, IE8. Только в IE9 панель отображается корректно. А жаль, красивая плавающая боковая панелька...
Ответить | Ответить с цитатой | Цитировать
 
 
# 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 28.05.2013 12:24
Спасибо. А при jQuery 2.0 сделаете поддержку IE7,8? Все-равно со временем придется на него переходить...
Ответить | Ответить с цитатой | Цитировать
 
 
# 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 26.06.2016 14:59
Здравствуйте, очень хороший скрипт, в одном скрипте можно несколько поставить, не то что до этого у меня был.

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

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

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

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

http://jsfiddle.net/yurik417/h7SUg/144/
Ответить | Ответить с цитатой | Цитировать
 
 
# 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;
}
Ответить | Ответить с цитатой | Цитировать
 
 
# Barbra 26.09.2017 12:31
The results you use by practicing these Natural Male Enhancement Exercises
are permanent and therefore the ratio of men who choose
increasing their manhood naturally is increasing day by day.

Choosing to parent again is amongst the most important decisions most men occasion to
make. Adding an all-natural penis vitamin formula for the daily penis care routine can spice up the love lives and make the penis healthy.


my website - https://www.viagrapascherfr.com: https://www.viagrapascherfr.com
Ответить | Ответить с цитатой | Цитировать
 

Добавить комментарий

Защитный код
Обновить

Онлайн-конструктор українського орнаменту

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

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

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

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

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

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

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

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