В новом (относительно) Bootstrap 3 отсутствует возможность по умолчанию для выпадающего меню в навигациии задавать уровень вложенности более чем 2. Т.е. невозможно построить навигацию с бесконечным выпадающим меню используя возможности Bootstrap 3 по умолчанию. Для добавления такой нужной возможности существует следующее решение.
Рубрика: JavaScript
JavaScript
Переключение чекбоксов с помощью jQuery – инвертировать checkbox
Цитируя сайт, откуда я хотел взять решение:
На днях мне нужно было написать небольшую JavaScript функцию (на jQuery), которая переключала бы группу чекбоксов. Т.е. все отмеченные чекбоксы должны были стать неотмеченными и наоборот.
Действительно это наверное распространенная задача переключать checkbox и она как нельзя лучше решается с помощью jQuery.
Предложенный на том сайте метод у меня почему-то не работал.
|
1 2 3 4 5 6 7 8 |
function toggleAll() { var allCheckboxes = $("#checkboxes input:checkbox:enabled"); var notChecked = allCheckboxes.not(':checked'); allCheckboxes.removeAttr('checked'); notChecked.attr('checked', 'checked'); } |
Может быть дело в том, что прошло уже 4 года и что-то изменилось в jQuery или в браузерах. Баг был в том, что когда был клик на чекбоксе, то это событие шло впереди события jQuery click и checkbox уже считался отмеченным. Соответсвенно по логике ф-ии сначала выбираются все чекбосы и все не отмеченные. Потом все делаются не отмеченными, а бывшие не отмеченные – отмеченными. Но по клику чекбокс уже считался отмеченным и не попадал в не отмеченные и не отмечался после.
Вот мое работающее решение:
|
1 2 3 4 5 6 7 8 |
$(".checkboxes input:checkbox:enabled").click(function() { var top = $(this).parent(); var allCheckboxes = top.find("input:checkbox:enabled"); allCheckboxes.removeAttr('checked'); $(this).attr('checked', 'checked'); }); |
В данном случае сначала выбираются все чекбоксы на странице. На них вешается ф-я выполняющаяся по click. По клику на чекбокс (не на div, это важно и это и приводило к багу в примере выше) мы поднимаемся на верхний уровень в div (var top = $(this).parent()). Далее ищем все чекбоксы в текущем div и делаем их не отмеченными, а тот checkbox на который мы нажали – отмеченным.
Мой пример отличается тем, что я делаю отмеченным только нажатый чекбокс. В моем случае их просто всегда было два и надо было переключаться между ними. Чтобы инвертировать все чекбоксы можно дописать ф-ю на основе предыдущего примера:
|
1 2 3 4 5 6 7 8 9 |
$(".checkboxes input:checkbox:enabled").click(function() { var top = $(this).parent(); var allCheckboxes = top.find("input:checkbox:enabled"); var notChecked = allCheckboxes.not(':checked'); allCheckboxes.removeAttr('checked'); notChecked.attr('checked', 'checked'); }); |
Должно работать. :)
jQuery confirm плагины – сравнение.
Сразу напишу, что в jQuery я дилетант. Я понимаю его принципы работы, могу что-то исправить в коде, построить код на основе имеющихся плагинов, понять код – но я не разработчик в этом направлении и вообще не люблю JS. Но вот мне понадобился confirm на jQuery и меня понесло в дебри “готовых” плагинов.
Все оказалось не так просто. Для меня jQuery это удобство. Выбрал элементы, к которым прицепить плагин, залил файлы и оно работает. Но не всегда получается так. Вроде все залил, указал элементы по ид и классам, настроил плагин, залил стили, а нифига не работает.
Для конфирма я рассмотрел 3 плагина и на 3-м мне повезло.
1. Раскрученная и первая страница с англоязычного сайта туториалов, как я понял. Есть ее переводы на русском. У этого чуда нет названия, просто туториал – как создать confirm диалог на jQuery. Вот ссылки:
http://tutorialzine.com/2010/12/better-confirm-box-jquery-css3/
и на русском
У меня это чудо не заработало. Вроде просто и понятно написано, вроде прикрутил все правильно, но в итоге окно с confirm появлялось до нажатия ссылки, сразу по загрузке. В нем были кривые стили и его никак нельзя было убрать. Все сделал по инструкции, что не так? Забил.
2. http://habrahabr.ru/post/48318/ автор представляет тут jquery alert dialogs. При чем ни где, ни в посте, ни в блоге своем не дал ссылку на источник и загрузку. Я ее нашел, вот она:
http://www.abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/
вызывается как-то так, не работает без callback ф-ии.
|
1 2 3 4 5 |
jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) { jAlert('Confirmed: ' + r, 'Confirmation Results'); }); |
В плагине используется вроде бы как устаревший druggable плагин, хотя я нашел его в последней UI сборке. Прикрутил все как надо. В итоге по нажатию на ссылку confirm появлялся, и тут же сам себя подтверждал. :)
Кстати у обоих плагинов выше одна проблема – они реагировали только на одну ссылку с ид. Если на странице много ссылок с одним ид или классом, на них плагин уже не вызывался.
3. Вот он confirm плагин моей мечты –
jQuery Easy Confirm Dialog
Сразу ссылки:
Примеры: http://projectshadowlight.org/jquery-easy-confirm-dialog/
Плагин на github: https://github.com/wiggin/jQuery-Easy-Confirm-Dialog-plugin
Это действительно работает и это то, что надо. Используются стили UI. Я пометил класс alert_link как класс плагина и все ссылки на всех страницах с этим классом теперь имеют confirm диалог. Это то, что мне было нужно.
Плагин удобен, имеет настройки.
Вот так можно выполнить какой-то экшн в js после confirm если указать кроме класса ид элемента.
|
1 2 3 4 5 6 |
$(".confirm").easyconfirm(); $("#alert").click(function() { alert("You approved the action"); }); |
Вот так настраивается сообщение:
|
1 2 3 4 5 6 7 8 |
$("#french").easyconfirm({locale: { title: 'Etes-vous sûr?', text: 'Etes-vous sûr que vous souhaitez effectuer cette action?', button: ['Annuler',' Confirmer'], closeText: 'fermer' }}); |
В общем мой выбор.
Доработка шаблона category для OpenCart (ocStore).
Получил задание доработать вывод шаблона с добавлением некоторого функционала.
Как решить знаю, не мог сначала разобраться в некоторых особенностях cms. Работаю с ней первый раз.
Что нужно сделать?
В каталоге добавить возле каждого товара инпут с кол-вом товара. Сначала там нули, и есть + – для увеличения, уменьшения количества. Внизу каталога будет кнопка “Купить выбранные”. По нажатию в корзину добавятся все, где кол-во выбрано 1 и более.
Далее мои рассуждения и решение.
Вакансия… Вот к чему я стремлюсь.
PHP-программист
$2000
30.12.11 17:51:38 Одесса
ЗАДАЧИ:
Участие в разработке интересных уникальных сервисов и дальнейшее их развитие.