penoky | Дата: Суббота, 07.03.2015, 09:28 | Сообщение # 1 |
Генерал-майор
Группа: Администраторы
Сообщений: 279
Репутация: 0
Статус: Offline
|
Выбор типа поиска по сайту с запоминанием через локальное хранилище для uCoz
Cкрипт использует необычное переключение между двумя формами поиска с запоминанием, но без использовать кук с мощью 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
Выбор, типа, поиска, по, сайту, с, запоминанием, через, локальное, хр
|
|
|
| |