HTML5 [1]
CSS3 [1]
JavaScript [3]
JS in HTML5 [4]
Canvas (Context2D) [1]
Canvas (WebGL) [0]
Browser Technologies [2]
jQuery [1]
ExtJS [0]
Prototype.js [2]
SVG [2]
Browsers [2]
Mozilla Plugins [0]
XUL, Jetpack, etc.
Web [2]
MeowW [4]
iOS [0]
Алгоритмы [0]
Криптография [0]
Теория игр [0]
Теория вероятностей [0]
Математика [1]
Мат. анализ [0]
Алгебра [0]
Дискретная математика [0]
Теория графов [0]
Комбинаторика [0]
Теория чисел [0]
Комплексный анализ [0]
Матлогика [0]
Математическая логика, её связь с теорией алгоритмов и т.п.
Тензоры [0]
Геометрия [0]
Топология [0]
Дифференциальная геометрия [0]
Дифференциальные уравнения [0]
01 Май 2011 в 12:03:24
22:30:07
HTML Component

Что такое HTC?


С этой статьи мы начнём изучать HTC. Нет, не надо коситься на мобильники, я имею в виду технологию, также известную как Behaviors или поведения. HTC переводится как HTML Component. Доступна она только в IE5.5 версии). Зачем изучать какую-то очередную непонятную технологию ослика? Во-первых, IE9 можно хоть и с натяжкой, но назвать приличным браузером. Хотя он ещё многое не умеет. А при помощи HTC его можно этому научить!!! Во-вторых, это просто хорошая идея и хорошая технология. Жаль, что в HTML5 ничего подобного не появилось. Только при помощи HTC удаётся научить тот же IE6 понимать CSS3 (см. css3pie, там активно используется htc).

Как с ним работать


HTC - это XML-технология. Не, там не надо писать все эти <?xml ...>.Просто там используются теги/ Так что это - XML. Наполовину. На вторую половину там - код на JavaScript. Собственно, он и исполняет главную роль, а теги - для оформления.


Code
<public:component>

</public:component>

Между главными тегами мы можем вставить любой тег htc. JS-код вставляется в тег <script>. Только лучше не забывать, что IE - это IE, и указывать явно тип скрипта (text/javascript). А то примет ещё за VBScript.


Hello, world!


Давайте напишем простенький Fuck you, world Hello, world. Создаём новый текст-файл с расширением htc. Вписываем туда следующее:


Code
<public:component>
<public:attach event="onClick" onEvent="hw();" />
<script type="text/javascript">
function hw(){
window.alert('Hello, world!');
event.returnValue=false;
}
</script>
</public:component>

Заметили?! Я закрываю одиночные теги символами />. Это - надо делать, xml-ное правило сюда перешло. Далее. Я привязываю тегом <public:attach /> функцию hw() к событию onClick. Далее в функции hw(); я вывожу окошко alert и устанавливаю свойство события returnValue в false. Таким образом я отменяю стандартную реакцию на событие.


Как бы нам теперь подключить и испытать наш htc? Создаём новую страничку html примерно след. содержания:


Code
<html>
<head>
<title>Тест htc</title>
<style>
a {behavior:url(адрес_к_нашему_файлу_htc);}
</style>
</head>
<body>
<a href="http://ucozerer.ucoz.ru/">http://ucozerer.ucoz.ru/</a>
</body>
</html>

Мы присоединяем ко всем ссылкам наше поведение через css. При нажатии на ссылку исполнится функция hw(), в результате чего выведется окно window.alert('Hello, world!'), а ссылка НЕ сработает - event.returnValue=false.


Заключение


Очень надеюсь, вы прониклись htc. Ведь это очень удобно - легко управлять всеми элементами на странице так, как это предоставляет htc. А ведь в следующих статьях мы научимся кое-чему покруче: создание своих тегов, атрибутов, свойств элементов, методов элементов, событий!!!
И вот ещё приятный бонус: как я слышал, Opera тоже поддерживает htc. Проверю и разочарую вас в след.статьях на эту тему).

Просмотров: 705 | | Теги: поведения, IE, html component, HTC, behaviors
Всего комментариев: 0
Имя *:
Email:
Код *: