Главная » Файлы » Скрипты для 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

Категория: Другие скрипты | Добавил: Apocalypse | Теги: Типа, выбор, Хранилище, Через, ПО, поиска, by, запоминанием, Локальное, сайту
Просмотров: 452 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: