01:46 Сворачивание/разворачивание области с сохранением в cookie |
Наверное многие видели сворачивание блоков, например как вконтакте.ру с
сохранением в cookie. Теперь подобное вы можете реализовать прямо у себя
на сайте. Перед </body> ставим код, где будет сворачивание блоков: Code <script type='text/javascript'> function Switchable(classname) { function getElementsByClassName(imgclass) { if ( document.getElementsByClassName ) { return document.getElementsByClassName(imgclass); } else { var nodes = document.getElementsByTagName('*'), tmp = []; for ( var i = 0; i < nodes.length; i++ ) { if ( new RegExp('\\b' + imgclass + '\\b').test(nodes[i].className) ) { tmp.push(nodes[i]); } } return tmp; } } function Next(element) { var next = element; while (next = next.nextSibling) if ("innerHTML" in next) return next; return element; } function getCookie(a){var b=document.cookie.match(new RegExp("(?:^|; )"+a.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g,"\\$1")+"=([^;]*)"));return b?decodeURIComponent(b[1]):undefined}function setCookie(b,f,c){c=c||{};var i=c.expires;if(typeof i=="number"&&i){var h=new Date();h.setTime(h.getTime()+i*1000);i=c.expires=h}if(i&&i.toUTCString){c.expires=i.toUTCString()}f=encodeURIComponent(f);var a=b+"="+f;for(var e in c){a+="; "+e;var g=c[e];if(g!==true){a+="="+g}}document.cookie=a} var nodes = getElementsByClassName(classname); for (var i = 0; i < nodes.length; i++) { var toggler = document.createElement("A"); toggler.href = "javascript://"; toggler.id = "toggler" + i; toggler.innerHTML = getCookie("toggler" + i) == "hide" ? "+" : "-"; toggler.onclick = function () { Next(this.parentNode).style.display = getCookie(this.id) == "hide" ? "" : "none"; setCookie(this.id, getCookie(this.id) == "hide" ? "show" : "hide", { expires: new Date("01 Jan 2020") }); this.innerHTML = getCookie(this.id) == "hide" ? "+" : "-"; }; Next(nodes[i]).style.display = getCookie("toggler" + i) == "hide" ? "none" : ""; nodes[i].appendChild(toggler); } } Switchable("header"); </script> Внизу расположен вызов Switchable("header"); — так вот, header — это класс элемента, содержащий заголовок блока. Проще говоря, все блоки, к которым нужно применить этот скрипт, должны иметь такую структуру: Code <div class='header'> Заголовок </div> <div> Содержимое </div> |
|
სულ კომენტარები: 0 | |
სექციის კატეგორიები | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
ძებნა |
---|
შესვლის ფორმა |
---|
კალენდარი |
---|
ჩანაწერების არქივი |
---|
მინი-ჩეთი |
---|
საიტის მეგობრები |
---|
სტატისტიკა |
---|