Приветствуем Вас на сайте!
Авторизировавшись на сайте Вы получаете возможность заказывать эксклюзивные вещи для Вашего сайта, скачивать новинки, общаться с друзьями.
Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Вход на сайт
Логин:
Пароль:
Вход
Войти по Логину и Паролю
О нас
Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».
Заказывая работу для вашего сайта у нас, вы экономите время...
Заказывая работу для вашего сайта у нас, вы экономите время...
Стремитесь к лучшему - в Best Studio!
Войти | Зарегистрироваться
Настройки
Перезагрузите страницу
- Главная
- Все для uCoz
- Скрипты для uCoz
- Сворачивание блоков с запоминанием
Доброго времени суток! Представляю Вашему вниманию сворачивающийся и разворачивающийся блок, с запоминанием на Cookies. Ну, а чтобы блок выглядел анимировано, используется JQuery. Благодаря Cookies браузер запомнит специальное значение, а при обновлении страницы, повторном заходе, скрипт обработает данные Cookies и скроет блок, если это было сделано пользователем ранее. Блок очень легок в установке и не займет много времени. Установка:
Подключение JQuery и Cookies между и :
Код
<script type="text/javascript" src="http://webmaster-ucoz.ru/ucoz/1/1/bloks/cookies.js"></script>
<script type="text/javascript" src="http://webmaster-ucoz.ru/ucoz/1/1/bloks/jquery.js"></script>[code]
Код CSS вставляете там же после <head> и </head>:
[code]<style type="text/css">
.sl1 {border:1px solid #D4D4D4}
.sl2 {padding:12px 20px 12px 20px;background:#EAEAEA;border-top:1px solid #FFFFFF;
border-bottom:1px solid #D4D4D4;color:#414141;font-weight:bold;cursor:pointer}
.sl3 {float:right;color:#18A0F7}
.sl4 {padding:20px;background:#FFFFFF;color:#656565}
</style>[code]
Код JavaScript вставляете перед </body>:
[code]<script type="text/javascript">
$('#block1').click(function() {
if($(this).children('.sl3').html()=='Свернуть') {
setCookie('block1', '1', 10, '/');$(this).children('.sl3').html('Развернуть');
$(this).parent().children('.sl4').slideToggle(200)} else {
setCookie('block1', '0', 10, '/');$(this).children('.sl3').html('Свернуть');
$(this).parent().children('.sl4').slideToggle(200)}
})
block1 = getCookie('block1')
if(block1 == '1') {$('#block1').parent().children('.sl4').hide();
$('#block1').children('.sl3').html('Развернуть')}
</script>
<script type="text/javascript" src="http://webmaster-ucoz.ru/ucoz/1/1/bloks/jquery.js"></script>[code]
Код CSS вставляете там же после <head> и </head>:
[code]<style type="text/css">
.sl1 {border:1px solid #D4D4D4}
.sl2 {padding:12px 20px 12px 20px;background:#EAEAEA;border-top:1px solid #FFFFFF;
border-bottom:1px solid #D4D4D4;color:#414141;font-weight:bold;cursor:pointer}
.sl3 {float:right;color:#18A0F7}
.sl4 {padding:20px;background:#FFFFFF;color:#656565}
</style>[code]
Код JavaScript вставляете перед </body>:
[code]<script type="text/javascript">
$('#block1').click(function() {
if($(this).children('.sl3').html()=='Свернуть') {
setCookie('block1', '1', 10, '/');$(this).children('.sl3').html('Развернуть');
$(this).parent().children('.sl4').slideToggle(200)} else {
setCookie('block1', '0', 10, '/');$(this).children('.sl3').html('Свернуть');
$(this).parent().children('.sl4').slideToggle(200)}
})
block1 = getCookie('block1')
if(block1 == '1') {$('#block1').parent().children('.sl4').hide();
$('#block1').children('.sl3').html('Развернуть')}
</script>
HTML код вставляете где хотите видеть блок:
Код
<div class="sl1">
<div class="sl2" id="block1"><div class="sl3">Свернуть</div>Название блока</div>
<div class="sl4" style="text-align:justify;">
Ваш текст...
</div>
</div>
<div class="sl2" id="block1"><div class="sl3">Свернуть</div>Название блока</div>
<div class="sl4" style="text-align:justify;">
Ваш текст...
</div>
</div>
Добавил: Best_Studio
Дата добавления: 02.05.2016 в 09:08 по МСК
Категория: Скрипты для uCoz
Просмотров: 743
Комментариев: 0
Рейтинг:
Дата добавления: 02.05.2016 в 09:08 по МСК
Категория: Скрипты для uCoz
Просмотров: 743
Комментариев: 0
Рейтинг: