Главная » Файлы » Скрипты для uCoz » Другие скрипты |
Выбор типа поиска по сайту с запоминанием через локальное хранилище by Apocalypse для uCoz
24.06.14, 18:42:40 | |
Временное ДЕМО Я уже давно хотел написать подобный скрипт, но очень простым его делать не хотелось, так как я люблю включать в скрипты всякие приблуды, и в этот раз мне захотелось сделать необычное переключение между двумя формами поиска с запоминанием, но использовать куки уже надоело и я решил показать заодно, как пользоваться мощью HTML5, а именно, локальным хранилищем. Вообще скрипт рассчитан на упрощение поиска нужных материалов для ваших пользователей, так как не всегда удобно искать нужные материалы по всему сайту, ведь захватываются все модули и результатов бывает просто дофига, да и при поиске по одному модулю велика вероятность, что вы не найдёте материал по нужному запросу. Скрипт позволит мгновенно переключаться между двумя формами, и это здорово Установка: В самый низ вашего css вставляйте: Код .searchSbmFl,.apomainsearch,.apomodulesearch { display:none; } .queryField { border: none; margin-bottom: 5px; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-bottom: 1px solid #eee; border-right: 1px solid #eee; padding:3px } .apomainsearchok,.apomodulesearchok,.apomainsearchico,.apomodulesearchico { height: 15px; position: absolute; margin-top: 2px; margin-left: -17px; } .apomainsearchico,.apomodulesearchico { margin-left:3px; } В вашем шаблоне найдите $SEARCH_FORM$ или $MODULE_SEARCH_FORM$ и замените на: Код <div class="apomainsearch"> $SEARCH_FORM$ </div> <div class="apomodulesearch"> $MODULE_SEARCH_FORM$ </div> <script> // Возможность выбирать тип поиска by Apocalypse // Устанавливаем иконки рядом с полями поиска $('.apomainsearch .queryField').attr('placeholder', 'Поиск по сайту').after('<img class="apomainsearchok" src="/img/aposearchb.png"><img class="apomainsearchico" src="/img/apomains.png" title="Поиск по всему сайту. Клик для переключения в поиск по модулю">'); $('.apomodulesearch .queryField').attr('placeholder', 'Поиск по модулю').after('<img class="apomodulesearchok" src="/img/aposearchb.png"><img class="apomodulesearchico" src="/img/apomodules.png" title="Поиск по модулю. Клик для переключения в поиск по всему сайту">'); // Проверяем, есть ли запись, какой поиск активен, в локальном хранилище if(localStorage.getItem('apomodulesearch')) { $('.apomodulesearch').fadeIn(); } else { $('.apomainsearch').fadeIn(); }; // Обрабатываем клик по иконке "Поиск" у поиска по всему сайту $('.apomainsearchok').click(function() { // Активируем форму отправки $('.apomainsearch form').submit(); }); // Обрабатываем клик по иконке "Поиск" у поиска по модулю $('.apomodulesearchok').click(function() { // Активируем форму отправки $('.apomodulesearch form').submit(); }); // Обрабатываем клик по иконке выбора формы поиска у поиска по всему сайту $('.apomainsearchico').click(function() { // Записываем выбор поиска по модулю в локальное хранилище localStorage.setItem('apomodulesearch', 'apomodulesactive'); // Сворачиваем поиск по сайту и разворачиваем поиск по модулю $('.apomainsearch').slideUp(300, function() { $('.apomodulesearch').slideDown(500); }); }); // Обрабатываем клик по иконке выбора формы поиска у поиска по модулю $('.apomodulesearchico').click(function() { // Сираем запись из локального хранилища localStorage.removeItem('apomodulesearch'); // Сворачиваем поиск по модулю и разворачиваем поиск по сайту $('.apomodulesearch').slideUp(300, function() { $('.apomainsearch').slideDown(500); }); }); // apo-ucoz.com (c) 2013 </script> Три картинки из прикреплённого архива залейте в папку img Материал разработан и подготовлен Apocalypse | |
Просмотров: 564 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |