[ главная ]   [ рейтинг статей ]   [ справочник радиолюбителя ]   [ новости мира ИТ ]



Ответов: 0
25-02-12 07:01







   Web - программирование
PHP


ASP






XML



CSS

SSI





   Программирование под ОС











   Web - технологии








   Базы Данных









   Графика






Данные




Web - программирование / Разное /

Динамические стили

Динамические стили - одно из оснований DHTML. Путем нехитрых функций вы можете менять внешний вид любого элемента в любой момент времени, например, цвет ссылки изменится, когда пользователь наведет на нее курсор.

Каждый объект HTML имеет набор свойств, определяющих его внешний вид. Все они объединены в подмножестве Style. Доступ к этим свойствам можно получить двумя путями: через язык HTML - общепринятый набор описаний для HTML документа, или через несколько других Web-языков - JavaScript, JScript или VBScript. Если учесть, что перые два - практически одно и тоже, то остается, что выбор не так уж и велик. Поскольку язык JScrript является (на мой вкус) самымы легким, а также самым распространенным, далее в этом документе будет употреблен именно он. При этом, так как мы не собираемся вдаваться в дебри программирования на новом незнакомом языке, его изучению здесь не будет придано очень пристального внимания, а только приведены самые элементарные примеры его использования.

Итак, с помощью динамических стилей вы можете менять любое визуальное свойство объекта - цвет, размер, видимость и многое другое. Производить эти операции легко с помощью Script языков, в нашем случае это будет JScript.

Далее,вы сможете получить информацию по следующим разделам:

  • Создание динамических стилей
  • Установка стиля объекта
  • Классы
  • Изменение стиля через Script-язык
  • Динамика в самом Internet Explorer 4.0
Сделаем стили динамическими
 

Динамический - означает изменение свойcтв в реальном времени, например при совершении какого-либо события. События - это ядро любых современных языков программирования. Следующая строчка, вставленная в стандартное ядро HTML страницы заставляет объект заголовка изменить свой цвет, когда пользователь наведет на него мышь.

<H1 onmouseover="this.style.color='red';">Эта строка покраснеет</H1>

Этот простой пример иллюстрирует доступ к свойству color элемента H1. Все действие, собственно, происходит в выражении onmouseover="this.style.color='red'"; Это выражение языка JScript означает, что при происхождении события onmouseover объект, с которым произошло событие (this-это), его множество style и свойство в этом множестве - color должно поменять свое значение на 'red'. (Заметьте, что red пишется в одинарных кавычках. Это значит, что red - символьная строка, а не какая-нибудь переменная)

Чтобы при выходе из зоны объекта, он снова менял свой цвет, например обратно, используйте событие onmouseout.

<H4 onmouseover="this.style.color='red';" onmouseout="this.style.color='black';">
Эта строка динамически изменяет свой цвет
</H4>

Эта строка специально, чтобы вы убедились

 Можете попробовать использовать событие onclick, которое происходит при щелчке мыши на объекте.

Теперь, вы можете реально использовать этот момент, например в ссылках. Добавьте приведенный выше код к объекту <A>.

Установка стиля объекта


Мы научились динамически изменять стили. Но это еще не самая главная возможность, предоставляемая DHTML. А что, если вам не нравится стандартный стиль оформления страницы, который использует Internet Explorer? Почему ссылки всегда должны иметь синий цвет, а шрифт размер в 16 пикселей? Нельзя ли как-нибудь изменить это? Можно! И нужно! Если вы хотите, чтобы ваши страницы отличались от множеста других, выделялись чем-то необычным и максимально действовали на восприятие их посетителя, используйте нестандартные стили! Но это не значит, что вы должны все свои сообщения писать кислотно желтым цветом, тут уж дело вкуса, главное то, что Dynamic HTML дает возможность использовать свою фантазию, предоставляя богатейший набор возможностей.  

Так как же установить нестандартный стиль объекта? Прежде всего через свойство STYLE. Посмотрите:

<H2 STYLE="color: green; cursor: hand">Наведи на меня мышь</H2>

Эта строка будет выводить на экран объект <H2> зеленого цвета, причем курсор, при наведении на него будет изменять свой вид на "руку", которая обычно сигнализирует то, что этот объект можно "щелкнуть".

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

<H2 STYLE="font-size: '20px'; font-weight: bold; cursor: size; background-color: lightgrey">
Это пример использования стилей
</H2>  

Классы


Стили можно устанавливать не только таким образом. Очень удобно использовать для установления стилей объектов классы. Под классом здесь подразумевается набор неких свойств и их значений, объединенный в один класс. Классу присваивается имя, а затем весь этот набор свойств можно установить для какого-либо конкретного объекта. Это очень удобно, если, например, у вас имеется несколько ссылок и для каждой из них надо установить красный цвет текста и нежно-голубой цвет фона, а также жирный шрифт, то не надо мучать себя и набивать каждый раз эти установки в свойстве Style каждого объекта, сделайте следующим образом:

<HTML>
<HEAD>
<STYLE>
.myStyle {color: red; background-color: lightblue; font-weight: bold}
</STYLE>
</HEAD>
<BODY>
<!-- ... Какой-то код >
<A HREF="gotonowhere.html" CLASS=myStyle>Ссылка с применением класса</A>
<!-- ... Еще какой-то код>
</BODY>
</HTML>

Как видите, здесь приведен пример использования класса, он же набор свойств. Класс определяется в блоке <HEAD>  с помощью блока <STYLE> Таких классов может быть определено великое множество и у них могут быть любые дозволительные имена.

Изменения стиля через Script-язык

Это еще не все способы изменения стиля. В самом начале этой главы, мы учились динамически изменять стили. Давайте рассмотрим еще один способ изменения, теперь, через объект <SCRIPT>.

Итак, чтобы изменять стили объекта, над которым совершится действие, напишем функцию. Написание функций также полезно, когда над множеством объектов надо производить одинаковые действия. Начнем как всегда с простого, например, со списков. Посмотрите на следующий код:

<HTML>
<HEAD></HEAD>
<BODY>
<SCRIPT LANGUAGE="JScript">
  function changeStyle(object) {
      if (object.style.color=='black')
            object.style.color='orange';
      else
            object.style.color='black';
  }
</SCRIPT>
<LI>Элемент 1
<LI style="cursor: hand"; onclick="changeStyle(this);">Элемент 2
</BODY>
</HTML>

Использование Script-языков дает очень гибкие возможности применения динамических стилей. В этом примере при щелчке мышью на второй элемент списка, он изменяет свой стиль с помощью функции changeStyle, которой в качестве аргумента передается объект, над которым было произведено действие.

Комбинирование использования функций и классов, а также различных событий c вашей фантазией дает поистине потрясающие результаты.

Динамика в самом IE 4.0

 Internet Explorer 4.0 обладает гибким свойствами прорисовки экрана и отображения на нем представляемой информации. Например, если вы изменили размер шрифта строчки и она теперь не помещается в отведенное ей место, остальные строки раздвинутся, чтобы не произошло их наложение одно на другую. Проиллюстрировать эту особенность очень хорошо может свойство display часто применяемой в создании динамических оглавлений. Вот пример:

<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JScript">
     function changeDisplay(object) {
           if (object.style.display=='none')
                 object.style.display='';
           else
                 object.style.display='none';
     }
</SCRIPT>
<P> Если вы наведете курсор </P>
<P onclick="changeDisplay(document.all.disappearingString);" style="cursor: hand; color: blue">
на эту строку и 'кликните' ее, </P>
<P id=disappearingString>то эта строка исчезнет</P>
<P> А эта займет ее место<p>
</BODY>
</HTML>

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




Комментарии

 Ваш комментарий к данному материалу будет интересен нам и нашим читателям!



Последние статьи: Web - программирование / Разное /

Учебное пособие по CGI-программированию Страница 30. Счётчик посещений
08-04-2010   

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

Кол. просмотров: общее - 4212 сегодня - 0

Учебное пособие по CGI-программированию Страница 28. Кто посещает мою страничку?
08-04-2010   

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

Кол. просмотров: общее - 3901 сегодня - 0

Учебное пособие по CGI-программированию Страница 27. Trics and traps
08-04-2010   

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

Кол. просмотров: общее - 4112 сегодня - 0

Учебное пособие по CGI-программированию Страница 26. Несколько слов об отладке
08-04-2010   

CGI-программы -не самые простые в отладке,по сложности отладки они способны сравнится лишь с отладкой драйверов. Вся сложность заключается в том,что скрипт выполняется не как обычная программа. Он выполняется в специальной среде сервера,которая создается при клиентском запросе... подробнее

Кол. просмотров: общее - 4119 сегодня - 0

Учебное пособие по CGI-программированию Страница 25. Анимация
08-04-2010   

Когда говорят о каком-то популярном сайте,то частенько к преимуществам относят и анимацию. Действительно,когда изображение изменяется (и особенно к месту ;)),то это смотрится и пользователю нравится... подробнее

Кол. просмотров: общее - 3871 сегодня - 0



  WWW.COMPROG.RU - 2009-2012 | Designed and Powered by Zaipov Renat | Projects