Jump to content

s0rr0w

User
  • Posts

    5,139
  • Joined

  • Last visited

  • Days Won

    32

Everything posted by s0rr0w

  1. Все примеры одним файлом sc_samples.zip Пример первый. Самый простой, нам нужно при нажатии на ссылку менять видимость какого-то контейнера. <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 определенным образом.
  2. Сейчас все будет
  3. Введение StateController (далее SC) логически разбит на два независимых процесса: процесс установки значения состояния и процесс обхода дерева нод. Состояние может изменяться в процессе работы несколько раз, может вообще не устанавливаться. Состояния Состоянием является имя переменной в процессе установки значения состояния, или идентификатор события в процессе обхода дерева нод. Синтаксис состояния должен удовлетворять правилам создания JS-переменной. При установке значения состояния создается свойство объекта states экземпляра SC. При обходе дерева нод, имя состояния используется в качестве имени события. Типы обхода дерева нод Существует два типа обхода дерева нод: * типизированный * нетипизированный При запуске обхода нод можно указывать несколько состояний-событий, на которые должны реагировать обработчики. Если не указывать состояние при запуске обхода дерева нод, то такой запуск считается нетипизированным. Необходимость нетипизированного обхода в начальной инициализации множества состояний при загрузке страницы. Описание объекта Поля states Описание Объект states является именованым массивом инициализированных состояний объекта, которые возникли в процессе работы SC. Публичные методы setStateValue Описание Устанавливает значение переменной состояния. Параметры вызова * name имя переменной состояния * value значение переменной состояния getStateValue Описание Возвращает значение переменной состояния. Параметры вызова * name имя переменной состояния launchTreeWalk Описание Запускает обход дерева. Параметры вызова * target контейнер, внутри которого происходит обход по дереву нод * states список состояний через запятую, на которые должен реагировать обходчик по дереву * [execOptions] объект с дополнительными параметрами запуска Существуют следующие предустановленные параметры запуска: propagation Фильтр нод, на которые распространяется функция реагирования обходчика по дереву нод. По умолчанию значение равно "*", т.е. обходчик обходит все ноды внутри контейнера. Значение parent означает распространение действия обходчика только на ноду контейнера. Значение childNodes означает распространение действия обходчика на ноду контейнера и на все дочерние ноды контейнера. Можно указывать названия нод через запятую, в верхнем регистре, если необходимо отфильтровать только ноды с определенным именем. Например A,SPAN,DIV. При этом распространение действия обходчика будет на ноду контейнера и на все ноды с указанными именами. Разрешено использовать только один из четырех вариантов, без смешивания. levels Уровни состояний, написанные через запятую. По умолчанию значение levels равно "all". Приватные методы createStateObj parseAttribute Методы не нужны для работы с SC, поэтому функциональность не описывается. Глобальный объект Описание Для упрощения работы с SC, при подключении модуля автоматически создается глобальный экземпляр объекта globalStateController. Глобальные функции GSC_setVal Описание Устанавливает значение переменной состояния для объекта globalStateController. Параметры вызова * name имя переменной состояния * value значение переменной состояния Пример использования GSC_setVal( "show_menu", true ); // window.globalStateController.states.show_menu = true; GSC_getVal Описание Возвращает значение переменной состояния объекта globalStateController Параметры вызова * name имя переменной состояния Пример использования GSC_getVal( "show_menu", true ); // true GSC_launch Описание Запускает обход дерева. Используется объект globalStateController Параметры вызова * target контейнер, внутри которого происходит обход по дереву нод * states список состояний через запятую, на которые должен реагировать обходчик по дереву * [execOptions] объект с дополнительными параметрами запуска Пример использования GSC_launch ( "container", "show_menu", { levels: "10", propagation: "childNodes"} ); GSC_setValAndLaunch Описание Устанавливает значение переменной состояния и запускает обход дерева нод. Используется объект globalStateController Параметры вызова * name имя переменной состояния * value значение переменной состояния * target контейнер, внутри которого происходит обход по дереву нод * [execOptions] объект с дополнительными параметрами запуска Пример использования GSC_setValAndLaunch ( "show_menu", true, "container", { levels: "10", propagation: "childNodes"} ); Обработчики SC Синтаксис Для присвоения обработчика или нескольких обработчиков любой ноде используется атрибут SC. Значение атрибута будет обрабатываться контроллером состояний. <node SC="scHandlers" /> Синтаксис scHandlers: directive 1[|directive 2|...|directive n] где directive [level*]js_function_name:state[:option 1:option 2:...:option n][--allowNonDirect] Каждая директива отделяется друг от друга символом "|". Директива состоит из уровня, имени JS-функции, имени состояния-события, дополнительных параметров, управляющей опции allowNonDirect. Уровень должен быть числовым значением. Функция-обработчик - имя JS-функции, которая будет исполнена при определенных условиях. Дополнительные параметры не должны содержать символов ":", "*", "|", "--". Желательно использовать синтаксис js-переменных или использовать числа в качестве дополнительных параметров. Опция allowNonDirect говорит о том, что данную директиву можно выполнять при нетипизированном запросе. Пример использования <div SC="sc_show_node:show_menu"> <div SC="sc_show_node:show_menu|sc_show_node:show_sub_menu"> <div SC="2*sc_switch_class_name:activate:hiddenBlock--allowNonDirect"> Обработчики JS Обработчикам передаются следующие параметры: * controller ссылка на экземпляр объекта контроллера состояний * node ссылка на ноду, которая содержит обработчик * scData объект с инициализирующими параметрами * execParams объект с дополнительными параметрами запуска Теоретически, можно создавать несколько экземпляров контроллера состояний, на практике, в большинстве случаев, используется всего один - globalStateController. scData имеет следующую структуру: * allowNonDirect флаг запуска обработчика в случае нетипизированных событий * args массив аргументов, которые передаются обработчику * func имя функции-обработчика * indx позиция директивы в списке директив атрибута SC * level уровень запуска * state имя состояния, на которое реагирует обработчик Принцип работы Состояние логически является переменной и событием одновременно. Имя состояния выступает типом события. Установка значения переменной состояния никак не влияет на обход дерева нод. Запуск обхода нод производится для какого-либо участка дерева нод документа. Первым проверяется нода контейнера, потом остальные ноды внутри указанного контейнера. Ограничить зону "видимости" обходчика можно с помощью параметра запуска propagation. У каждой ноды ищется атрибут SC, и, если атрибут найден, разбирается значение данного атрибута. Потом выполняются те обработчики, имя состояния которых соответствует имени события, при этом учитываются параметры level и --allowNonDirect.
  4. Что такое StateController Это, принципиально отличающийся от современных фреймворков, подход к созданию удобных и функциональных интерфейсов. Принципиальное отличие состоит в том, что управление элементами возложено на HTML. Это противоречит концепции "ненавязчивого" JS, но в процессе работы технология зарекомендовала себя как более эффективная. Это не фреймворк, это подход. Базис технологии - событийная модель. В этом подходе не придумано ничего того, что не было уже известно программистам. Плюсы данной технологии: * Высокая переносимость кода. Миграция кода может происходить без внесения изменений. * Дешевизна при расширении функциональности * Не требует высокого уровня кодера для начала работы. * Широкий спектр выполняемых задач Данная технология спокойно может работать в связке с другими фреймворками. Хотя может заменить большинство из них без проблем. Лиензия 1. Запрещается использование технологии StateController в любых продуктах, которые будут использоваться в банковской сфере. 2. Модификация кода разрешена только при обязательном уведомлении автора о сути и характере изменений. 3. Разрешено разрабатывать обработчики SC. Исходный код stateController.zip Обновлена версия до 4.1 * Добавлено кеширование разбора атрибута SC, что увеличило скорость работы с последующими запросами примерно в 2 раза.
  5. Я тоже пришел к аналогичному мнению года два назад. Зачем проверять на стороне клиента, если сервер потом все равно будет повторно перепроверять введенное?
  6. Боюсь, что никак, кроме как встроить в код, но не показывать для обычных media types
  7. Делается скрипт, который принимает на вход кусок HTML, а на выходе выдает pdf файл, расположение текста в котором уже правильно ориентировано.
  8. У меня есть пример такого валидатора, но, Влад пока не сделал то, что я его просил.
  9. Не очень хороший пример. В данном случае требуется наличие какого-либо значения. Отлично прокатит вариант loadingImage = loadingImage || 'default.gif' Это очень стремная практика... Лучше иметь четкое значение ключевой переменной, особенно которая фигурирует в нескольких скриптах, чтобы не было ситуаций, которые потенциально приводять к трудноотловимым багам.
  10. В вашем непонимании причин происходящего. Белый кусок - скорее всего из-за хитросплетений с флоатами. Отступ - margin-collapsing еще никто не отменял... Да и доктайп стоит поставить нормальный.
  11. А конкретный пример, более жизненный можно?
  12. Поищите на этом форуме слова css и hack Или в интернете
  13. Расширение у файла txt? Должно быть html
  14. Я лично вообще не понимаю зачем нужно проверять переменную на то, определена она или нет. Если алгоритм требует такой проверки, то это неправильный какой-то алгоритм...
  15. Используйте try catch и будет вам счастье.
  16. s0rr0w

    html Merge

    Ну да. Я надеюсь, вы в Windows работаете?
  17. s0rr0w

    html Merge

    copy a + b + c > d
  18. Извини, ошибся, все верно. Less Than и Greater Than
  19. Скачиваем FireFox с сайта mozilla.com Потом устанавливаем плагин FireBug https://addons.mozilla.org/en-US/firefox/addon/1843 и изучаем код приведенных сайтов самостоятельно, попутно изучая матчасть на сайте htmlbook.ru
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy