» »

Сворачивающиеся блоки на Cookies для uCoz


Сворачивающиеся блоки на Cookies для uCoz

Много где можно заметить скрипт такого тика, как Сворачивающиеся блоки на Cookies для uCoz что позволить написать к примеру правила или совершенно другую информацию. И потом поставить название и с правой стороны вы увидите функцию, где можно развернуть и при повторном клике свернуть в исходное положение. Может пригодиться на вашем сайте, чтоб не занимало много места, вот мы можем использовать блочный информатор для этого.

Установка:

Первое что нужно сделать, это подключить JQuery и Cookies, который должны стоять между head сайта.

Код
<script type="text/javascript" src="http://zornet.ru/Ajaxoskrip/Fyrkes/cookies.js"></script>  
<script type="text/javascript" src="http://zornet.ru/Ajaxoskrip/Fyrkes/jquery.js"></script>


Код CSS:

Код
<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>


Код JavaScript вставляете перед /body

Код
<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>


Вся установка, источник материала yraaa.ru портал.
24.09.2015 Просмотров: 432 Комментарий: (7)

Поделиться в социальных сетях

Материал разместил

Комментарий: 7
Canon
Canon 24.09.2015 02:021
0
Скрипт не сложный и иногда нужный, но не люблю много кодов раставлять, хотя все в одном месте, но кроме, того где будет стоять.
Kosten
Kosten 24.09.2015 02:362
0
Так то отличный скрипт, чтоб к примеру вывести информацию, думаю можно поставить видео, но не исключаю. Устанавливается в рамках сайта, а главное, вы открываете и закрываете, смотрел на демонстраций.
FeStemBer
FeStemBer 24.09.2015 06:143
0
Но это смотря для кого легко, по мозговал и сделал, круто смотрится. Хотя мне не нужно, но интересно было поставить и поставил, и что то умею, сам удивился.
Сопрано
Сопрано 24.09.2015 06:194
0
Отличный код, хотя у меня немного другой стоит, но думаю на этот перекину, нужно DEMO для этого делать. Смотрю на многих материалах стоит, а вот где для меня нужно нет его.
Kosten
Kosten 24.09.2015 06:215
0
Ну и отлично что понравилось и пригодилось. А что про демонстрацию, то делал на несложные скрипты, это где идет код и стиль на его, основном меню для сайта.
First
First 24.09.2015 23:116
0
Полезная штука. Видел ещё очень не плохие сворачивающиеся блоки в контейнере, мне они очень понравились По возможности завтра рипну и выложу, или дам дам Kosten"у пусть выложит, а то не сильно писать умею)
Kosten
Kosten 24.09.2015 23:567
0
First, ты то грамотно рипаешь, все до крошки сказать можно. Просто опиши главное, я допишу потом.
avatar