Примеры использования

s0rr0w · February 16, 2009

Все примеры одним файлом

Пример первый.

Самый простой, нам нужно при нажатии на ссылку менять видимость какого-то контейнера.

<p id="hidden_paragraph" SC="sc_hide_node:hide" class="specialBox">Пример параграфа, который будет скрыт.</p>

<div>
 <a href="#" onclick="GSC_setValAndLaunch('hide', true, 'hidden_paragraph'); return false;">[ cкрыть параграф ]</a> 
 <a href="#" onclick="GSC_setValAndLaunch('hide', false, 'hidden_paragraph'); return false;">[ показать параграф ]</a>
</div>

Что происходит при нажатии на ссылку [ cкрыть параграф ]?

Устанавливаем значение переменной hide в true и потом запускаем обход дерева нод, начиная с элемента hidden_paragraph

Так как обработчик реагирует на событие hide, то будет запущена функция sc_hide_node, которой будет в качестве параметра передана нода P.

Элементу будет присвоен класс hiddenBlock, который имеет display: block;

Пример второй.

Усложняем задачу. Нам нужно не просто скрывать элемент, а еще и менять сам переключатель.

	<div id="container">

		<div>
			<a href="#" onclick="GSC_setValAndLaunch('hide', true, 'container'); return false;" SC="sc_hide_node:hide">[x] cкрыть параграф</a>
			<a href="#" onclick="GSC_setValAndLaunch('hide', false, 'container'); return false;" SC="sc_show_node:hide" class="hiddenBlock">[+] показать параграф</a>
		</div>

		<p SC="sc_hide_node:hide" class="specialBox">Пример параграфа, который будет скрыт.</p>

	</div>

Мы добавили контейнер, в который поместили два наших элемента - управляющий элемент-переключатель и скрываемый текст.

Добавляем нашим переключателям SC-обработчики, которые реагируют на то же событие - hide.

При нажатии на ссылку "[x] cкрыть параграф" будет запущен обходчик нод, который запустит соответствующие обработчики. Как итог, одна ссылка будет спрятана, одна - показана, параграф - скрыт.

При нажатии на другую ссылку будет произведена обратная операция.

Для того, чтобы добавить еще один элемент для скрытия, достаточно дописать ему соответствующий обработчик, чтобы нода реагировала на событие hide определенным образом.

Иван Шумов · February 16, 2009

забавно, но я к этому методу пришел сам, хотя и проводил реализацию другим методом. На самом деле не такая заумная вещь чтобы не дойти до неё своими мозгами

s0rr0w · February 16, 2009

Пример третий.

Нам нужно создать некую менюшку, которая будет иметь по умолчанию отмеченный пункт меню, которой легко изменять дизайн.

Я использовал для инициализации SC при загрузке страницы свою примитивную функцию $addEventListener.

<head>
 <script type="text/javascript">
	$addEventListener( window, "load", function(){ GSC_launch( document.getElementsByTagName("BODY").item( 0 ) ) } );
 </script>
</head>

<div class="menuBlock">

	<a href="#" onclick="GSC_setValAndLaunch( 'menu', 1, $getParentByClassName( this, 'menuBlock' ) ); return false;" SC="sc_apply_class_by_id:menu:1:active--allowNonDirect" class="menuItem" >Пункт меню 1</a>

	<a href="#" onclick="GSC_setValAndLaunch( 'menu', 2, $getParentByClassName( this, 'menuBlock' ) ); return false;" SC="sc_apply_class_by_id:menu:2:active--allowNonDirect" class="menuItem" >Пункт меню 2</a>

	<a href="#" onclick="GSC_setValAndLaunch( 'menu', 3, $getParentByClassName( this, 'menuBlock' ) ); return false;" SC="sc_apply_class_by_id:menu:3:active2--allowNonDirect" class="menuItem" >Пункт меню 3 особый</a>

	<a href="#" onclick="GSC_setValAndLaunch( 'menu', 4, $getParentByClassName( this, 'menuBlock' ) ); return false;" SC="sc_apply_class_by_id:menu:4:active--allowNonDirect" class="menuItem" >Пункт меню 4</a>

</div>

<script type="text/javascript">

	GSC_setVal( 'menu', 1 ); // Базовая инициализация

</script>

При базовой инициализации мы установили некую переменную menu равную 1.

После загрузки страницы будет запущен нетипизированный обходчик дерева. Выполнены будут только те обработчики, которые имеют опцию --allowNonDirect

Так как у нас контроллер имеет значение menu=1, то первому элементу, у которого первый параметр обработчику совпадает с значением контроллера, будет присвоен класс, который указан как второй параметр SC-обработчика.

Вуаля, менюшка готова.

Пример четвертый

Усложняем задачу, теперь нам надо сделать переключатель контента на этой менюшке.

Так как контент будет генериться автоматически, то располагаем переключатель рядом с контейнером. Так проще для сервера, так как не надо два раза проходить по одному и тому-же циклу.

Для простоты добавляем функцию, которая будет переключать табы.

	var activateMenu = function ( node, container, stateVal ) {
		try {
			GSC_setValAndLaunch( 'menu', stateVal, $getParentByClassName( node, 'menuBlock' ) );
			GSC_launch( container, 'menu', { levels: 1, propagation: "childNodes" } ); 
			// состояние menu уже установлено, достаточно запустить обход дерева. 
			// levels указывает на то, что нужно исполнять только обработчики первого уровня
			// propagation указывает на то, что нужно обходить только дочерние элементы, дабы не углубляться в дерево

		} catch ( e ) { return false; }
	};

<div class="menu">

	<div id="menuBlock1" class="menuBlock"></div> <!-- Сюда переносятся активаторы-->

	<div id="menuContent1" class="menuContent">

		<a href="#" onclick="activateMenu( this, 'menuContent1', 1 ); return false;" SC="sc_apply_class_by_id:menu:1:active--allowNonDirect|sc_move_node:move" class="menuItem" >Пункт меню 1</a>
		<div class="menuContentBox hiddenBlock" SC="100*sc_show_node:menu|sc_show_content_by_id:menu:1--allowNonDirect">
			Контент 1
		</div>

		<a href="#" onclick="activateMenu( this, 'menuContent1', 2 ); return false;" SC="sc_apply_class_by_id:menu:2:active--allowNonDirect|sc_move_node:move" class="menuItem" >Пункт меню 2</a>
		<div class="menuContentBox hiddenBlock" SC="100*sc_show_node:menu|sc_show_content_by_id:menu:2--allowNonDirect">
			Контент 2
		</div>

		<a href="#" onclick="activateMenu( this, 'menuContent1', 3 ); return false;" SC="sc_apply_class_by_id:menu:3:active--allowNonDirect|sc_move_node:move" class="menuItem" >Пункт меню 3</a>
		<div class="menuContentBox hiddenBlock" SC="100*sc_show_node:menu|sc_show_content_by_id:menu:3--allowNonDirect">
			Контент 3
		</div>

		<a href="#" onclick="activateMenu( this, 'menuContent1', 4 ); return false;" SC="sc_apply_class_by_id:menu:4:active--allowNonDirect|sc_move_node:move" class="menuItem" >Пункт меню 4</a>
		<div class="menuContentBox hiddenBlock" SC="100*sc_show_node:menu|sc_show_content_by_id:menu:4--allowNonDirect">
			Контент 4
		</div>

		<a href="#" onclick="GSC_setValAndLaunch( 'menu', '-1', 'menuBlock1' ); GSC_launch( 'menuContent1', 'menu', { levels: 100 } ); return false;" SC="sc_apply_class_by_id:menu:-1:active2--allowNonDirect|sc_move_node:move" class="menuItem" >Показать все</a>

	</div>

</div>


<script type="text/javascript">

	GSC_setVal( 'menu', 1 ); // Базовая инициализация
	GSC_launch( 'menuContent1', 'move', { moveTo: "menuBlock1" } ); // Перемещаем переключатели табов в нужное место.

</script>

Мы немного меняем структуру HTML, для того, чтобы эффективно использовать SC.

Немного про уровни, которые тут используются. Нода может реагировать на одно и то же событие, которое было запущено с разными уровнями запуска, поэтому будут запущены только те обработчики, у которых совпадает уровень события. Это позволяет не плодить названия имен контроллеров.

забавно, но я к этому методу пришел сам, хотя и проводил реализацию другим методом. На самом деле не такая заумная вещь чтобы не дойти до неё своими мозгами

Это лежит под носом, но все пошли по пути фреймворков.

Самое простое решение - самое эффективное.

s0rr0w · February 16, 2009

Пример пятый.

Нужно сделать валидацию форм

<script type="text/javascript">

var validateForm = function ( container ) {
	try {
		var errData = { _errCnt: 0 };
		GSC_launch( container, 'validate_form', { errData: errData } ); 
		// передаем обходчику как параметр объект, в который будут собраны все ошибки валидации

 		GSC_setValAndLaunch ( 'valid', !( errData._errCnt ), container, { errData: errData } );
 		// запускаем событие показывания ошибок валидации, или сабмита формы

	} catch ( e ) { return false }; 
};

</script>
<form action="index.html" method="GET" id="form1" SC="sc_submit_form:valid">

	<div class="errorBox hiddenBlock" SC="sc_hide_node:valid">
		<h3>Ошибка!</h3>
		<div>Вы заполнили не полностью или с ошибками все необходимые поля</div>
	</div>

	<div class="formContent">

		<div class="formLine">
			<b>Логин: <em>*</em></b> <input type="text" name="login" SC="sc_form_not_empty:validate_form">  
			<span class="errorMsg hiddenBlock" SC="sc_show_error:valid:login">« поле обязательное к заполнению</span>
		</div>

		<div class="formLine">
			<b>Пароль: <em>*</em></b> <input type="password" name="pass" SC="sc_form_not_empty:validate_form|sc_form_not_different:validate_form:passwords"> 
			<span class="errorMsg hiddenBlock" SC="sc_show_error:valid:pass">« поле обязательное к заполнению</span>
			<span class="errorMsg hiddenBlock" SC="sc_show_error:valid:passwords">« пароли должны совпадать</span>
		</div>

		<div class="formLine">
			<b>Пароль еще раз: <em>*</em></b> <input type="password" name="pass2" SC="sc_form_not_empty:validate_form|sc_form_not_different:validate_form:passwords"> 
			<span class="errorMsg hiddenBlock" SC="sc_show_error:valid:pass2">« поле обязательное к заполнению</span>
		</div>

		<div class="formLine">
			<b>Дата рождения:</b> <input type="text" name="dob">
		</div>

	</div>
</form>
<div class="actionBlock">
	<a href="#" onclick="validateForm( 'form1' ); return false;">отправить данные</a>
</div>

s0rr0w · February 16, 2009

Пример седьмой

Задача, сделать скрипт, который бы выделял элементы, которые удовлетворяют определенным условиям.

Например, для модуля управления правами можно показывать тех пользователей, которым принадлежит определенный набор прав.

Sample7.zip

Emm · February 16, 2009

Примеры лузгаем как семечки, а считать до десяти так и не научились :rolleyes:

s0rr0w · February 16, 2009

Примеры лузгаем как семечки, а считать до десяти так и не научились

Шестой пример лежит в соседней ветке

http://forum.htmlbook.ru/index.php?showtopic=12633

Gamer · April 6, 2009

Гм. Пытаюсь заставить работать первый пример у себя на сайте.

Файлы js загрузил, подключил в соответствии с примером, код скопировал на страничку, но почему-то не пашет. Может, я что-то не так делаю?

Edited April 6, 2009 by Gamer

s0rr0w · April 6, 2009

Гм. Пытаюсь заставить работать первый пример у себя на сайте.
Файлы js загрузил, подключил в соответствии с примером, код скопировал на страничку, но почему-то не пашет. Может, я что-то не так делаю?

Файл какой именно? В примерах используются три файла.

1. lib.js - мини-библиотека

2. stateController.js - код

3. scHandlers.js - обработчики контроллера состояний

В ветке http://forum.htmlbook.ru/index.php?showtopic=12602 содержится только чистый код SC.

Лучше переноси код из примеров.

А еще лучше, покажи свой кусочек кода.

Gamer · April 6, 2009

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>...</title>
<script type="text/javascript" src="http://site/stateController.js"></script>
</head>

<body>

<p id="hidden_paragraph" SC="sc_hide_node:hide" class="specialBox">Пример параграфа, который будет скрыт.</p>

<div>
<a href="#" onclick="GSC_setValAndLaunch('hide', true, 'hidden_paragraph'); return false;">[ cкрыть параграф ]</a>
<a href="#" onclick="GSC_setValAndLaunch('hide', false, 'hidden_paragraph'); return false;">[ показать параграф ]</a>
</div>

</body>
</html>

Edited April 6, 2009 by Gamer

s0rr0w · April 6, 2009

<script type="text/javascript" src="http://site/js/stateController.js"></script>

Одной этой строчки недостаточно. Добавьте еще два файла, что я указал выше.

Обработчиков то нет, вот и не работает пример.

Gamer · April 6, 2009

Гм. Не пашет.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>...</title>
<script type="text/javascript" src="http://site/stateController.js"></script>
<script type="text/javascript" src="http://site/scHandlers.js"></script>
<script type="text/javascript" src="http://site/lib.js"></script>
<link type="text/css" rel="StyleSheet" href="http://site/Text.css">
</head>

<body>

<p id="hidden_paragraph" SC="sc_hide_node:hide" class="specialBox">Пример параграфа, который будет скрыт.</p>

<div>
<a href="#" onclick="GSC_setValAndLaunch('hide', true, 'hidden_paragraph'); return false;">[ cкрыть параграф ]</a>
<a href="#" onclick="GSC_setValAndLaunch('hide', false, 'hidden_paragraph'); return false;">[ показать параграф ]</a>
</div>

</body>
</html>

s0rr0w · April 6, 2009

Есть в css класс

.hiddenBlock { display: none }

?

Gamer · April 6, 2009

Да)

s0rr0w · April 6, 2009

Не поверите, у меня все работает.

Что я делаю не так?

Вижу ссылку http://site/stateController.js

Она открывается у вас нормально?

Gamer · April 7, 2009

Гм. Странно.

*Это неполная ссылка * Вот: http://avangardsveta.com/index/0-49

s0rr0w · April 7, 2009

jQuery переопределил функцию $(), которая используется в моем коде тоже.

Замените в моем коде везде $ на $g, и все заработает.

Gamer · April 7, 2009

Да, все пашет!

Спасибо, буду изучать!

xtz · April 27, 2009

Все супер, но когда тыцаешь мышкой в любое место экрана цвет активного пункта меню становиться обычным. В чем дело?

s0rr0w · April 27, 2009

Код?

Все супер, но когда тыцаешь мышкой в любое место экрана цвет активного пункта меню становиться обычным. В чем дело?

Если я не ошибаюсь, то вам нужно добавить

.activeItem { color: #fc0; }

xtz · April 27, 2009

.menuItem:hover, .menuBlock .active сюда надо было добавить колору. Спасибо за отличные примеры

s0rr0w · April 27, 2009

Спасибо за отличные примеры

Да не за что, приходите еще.

s0rr0w · May 22, 2009

Пример для темы http://forum.htmlbook.ru/index.php?showtopic=13745

sample9.zip

xtz · May 28, 2009

Привет, вопрос созрел, надо чтобы при нажатии на некую кнопку все элементы меню становились неактивными.

s0rr0w · May 28, 2009

Привет, вопрос созрел, надо чтобы при нажатии на некую кнопку все элементы меню становились неактивными.

</div>

GSC_launch( "menuContainer", "disable" );

Обработчик sc_remove_class есть в scHandlers.js в последих примерах.

xtz · May 28, 2009

cспасибо за ответ, но я его увы не понял.

у меня меню по примеру номер 3. и хочется, чтобы при нажатии на определенную ссылку внеменю все пункты меню(тафтология пардон)) становились неактивными. Что для этого надо вызвать в этой ссылке?

И функция GSC_launch в исходнике имеет 3 параметра.

Sign In

Примеры использования

Question

Link to comment

Share on other sites

31 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information