DOM: примеры

Google AJAX Feed API and multiple feeds

Пару недель назад Google анонсировал AJAX Feed API, который позволяет загрузить и разместить на веб-странице анонсы новостей из любого открытого Atom- или RSS-канала, используя только JavaScript. Покажу, как доработать простой пример из документации к API и получить список новостей, отсортированных по дате, из нескольких лент.

Компактный список

Это обновленная версия скрипта, который позволяет сворачивать-разворачивать вложенные списки. Теперь сценарий запускается до события load объекта window. Для навигации по списку теперь можно использовать не только мышь, но и клавиатуру. По прежнему: если в браузере отключить JavaScript, будет просто показан развернутый список, т.е. все его элементы всегда доступны, не зависимо от возможности выполнять JavaScript.

Advanced Thumbnail Creator

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

DOM-прогулка по ячейкам таблицы

Этот пример демонстрирует, как можно добраться до любой ячейки любой таблицы (x)HTML-документа с помощью DOM.

Быстрое создание (x)HTML элементов методами DOM.

Добавление новых элементов обычными методами DOM скучное занятие, которое может вызвать справедливое недовольство: для каждого элемента получаются очень многословные и многоэтажные конструкции. Если нужно сделать один-два элемента (например, DIV или P и т.п.) с текстом внутри, еще можно смириться с написанием большого количества практически одинаковых строк кода. А когда таких элементов не один десяток и все разные…

Проблема window.onload() и ее решение

Собственно, вся проблема состоит в том, что событие onload() возникает после полной загрузки документа. Конечно, было бы здорово выполнить какие-нибудь действия с загруженным html-документом не дожидаясь загрузки изображений, flash-роликов и пр.

Поиск элемента в документе XHTML

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

XHTML+CSS+DOM слайд-шоу 2

В сентябре прошлого года я показал, как с помощью JavaScript можно представить XHTML документ в виде последовательности слайдов. По прошествии некоторого времени эта идея получила дальнейшее развитие. Предлагаю новую версию XHTML+CSS+DOM слайд-шоу.

Динамические выпадающие списки

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

Перемещение блоков по веб-странице.

С помощью DOM можно без особого труда перемещать целые фрагменты XHTML-документа и, таким образом, изменять порядок отображения элементов в окне браузера не зависимо от порядка загрузки веб-страницы.

Подбор цвета on-line

Кроссбраузерный on-line подбор цвета (ColorPicker). В результате получаем шестнадцатиричный RGB код выбранного цвета. Использованы: XHTML1.1+JavaScript+CSS.

XHTML+CSS+DOM слайд-шоу

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

Пример фотогалереи с использованием DOM

Фотогалерея, в которой увеличенные изображения можно выбирать без перезагрузки всей html-страницы. В примере используется Объектная модель документа(DOM), минимум XHTML-кода, немного CSS и JavaScript. Работает в Firefox1.02+, Opera7+, Internet Explorer5+, в других браузерах не проверял.

Открываем ссылку в новом окне, не используя атрибут target в коде страницы

Рекомендации W3C для HTML 4.01 Strict и XHTML 1.0 Strict более не включают атрибут target для тега <a>. Переходные (Transitional) версии спецификаций допускают его применение, но стандарты для того и разработаны, чтобы ими пользоваться. Поэтому далее рассмотрим, как все-таки открывать ссылки в новом окне, не используя при этом устаревший атрибут target в (X)HTML-коде документа.




14 queries 0.348 seconds.