Выбор типа поиска по сайту с запоминанием через локальное хранилище для uCoz
827материалов
228тем на форуме
3004комментария
6160пользователей

Выбор типа поиска по сайту с запоминанием через локальное хранилище для 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 webmaster-ucoz

// Устанавливаем иконки рядом с полями поиска    
$('.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);    
});    
});    

// webmaster-ucoz.ru (c) 2013    
</script>

Как вы уже можете видеть, каждый элемент скрипта помечен комментарием, чтобы новичкам было удобно разбираться в том, какой участок за что отвечает — это поможет в написании своих кодов и модернизации данного скрипта

Три картинки из прикреплённого архива залейте в папку img

ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 17.12.2013 в 03:37
Материал просмотрен: 1055 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо
Источник

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта