Вопрос по js

Блог им. nickostyle
В шаблоне Лс есть скриптик, который позволяет сворачивать/разворачивать блоки. Выглядит так:
{literal}
<script language="JavaScript" type="text/javascript">
function toggleBlogInfo(id,link) {
	link=$(link);
	var obj=$(id);	
	var slideObj = new Fx.Slide(obj);
	if (obj.getStyle('display')=='none') {
		slideObj.hide();
		obj.setStyle('display','block');		
	}	
	link.toggleClass('inactive');
	slideObj.toggle();
}
</script>
{/literal}


Он хорош тем, что прост и можно прикрутить где угодно и будет работать. Но при перезагрузке страницы свернутый блок вновь становится развернутым. Как доработать код, чтобы можно было свернуть блок, и он не разворачивался после рефреша, может это парой строчек делается?)) Буду рад, если поможете!

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

avatar
сохранять настройку в куках ;)
avatar
честно говоря, я ожидал помощи в виде кода, слова мне не очень то помогут)
avatar
Функция
function toggleBlock(idBlock, idToggler, classInactive) {
	classInactive = classInactive || 'inactive';
	var cookie = new Cookie(idBlock, {path: '/'}), obj = $(idBlock), link = $(idToggler);
	if (!cookie.read()) {
		obj.setStyle('display', 'none');
		link.addClass(classInactive);
	}
	link.addEvent('click', function() {
		this.toggleClass(classInactive);
		if (obj.getStyle('display') == 'none') obj.slide('hide').setStyle('display', 'block');
		obj.slide();
		if (this.hasClass(classInactive)) cookie.dispose(); else cookie.write(1);
		return!1;
	});
}

Допустим структура html
<div class="block">
	<h3 id="my-block-toggler">Тожлер блока</h3>
	<div id="my-block">
		Содержимое блока
	</div>
</div>

Тогда
window.addEvent('domready', function() {
	toggleBlock('my-block', 'my-block-toggler');
});
третьим параметром можно передать наименование класса для тожлера в неактивном (блок свернут) состоянии, по умолчанию — inactive.
  • k2fl
  • 0
  • ↓
avatar
Спасибо) Сейчас попробую разобраться!
avatar
Я так понял, что эту функцию мы добавляем к тому коду, что я привел, и получаем:
{literal}
<script language="JavaScript" type="text/javascript">
function toggleBlogInfo(id,link) {
	link=$(link);
	var obj=$(id);	
	var slideObj = new Fx.Slide(obj);
	if (obj.getStyle('display')=='none') {
		slideObj.hide();
		obj.setStyle('display','block');		
	}	
	link.toggleClass('inactive');
	slideObj.toggle();
}

function toggleBlock(idBlock, idToggler, classInactive) {
        classInactive = classInactive || 'inactive';
        var cookie = new Cookie(idBlock, {path: '/'}), obj = $(idBlock), link = $(idToggler);
        if (!cookie.read()) {
                obj.setStyle('display', 'none');
                link.addClass(classInactive);
        }
        link.addEvent('click', function() {
                this.toggleClass(classInactive);
                if (obj.getStyle('display') == 'none') obj.slide('hide').setStyle('display', 'block');
                obj.slide();
                if (this.hasClass(classInactive)) cookie.dispose(); else cookie.write(1);
                return!1;
        });
}
</script>
{/literal}


А куда прописывать вот это?:
window.addEvent('domready', function() {
        toggleBlock('my-block', 'my-block-toggler');
});


фууф… туплю
avatar
Функция toggleBlogInfo(id,link) вообще тут ни причем.

Событие domready срабатывает сразу после загрузки страницы, вызывает функцию toggleBlock, которая определяет по кукам спрятан ли был блок, и, если был спрятан, то прячет его; далее привязывает обработчик клика по тожлеру.

javascript.ru и linux.ria.ua/docs/mootools в помощь.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.