Интерфейсы

Update: Более новый материал по этой теме находится по адресу https://learn.javascript.ru/event-details.

Drag and drop
В свое время приходилось реализовывать кучу drag and drop'ов под самым разным соусом.

Эта статья представляет собой учебник-выжимку о том, как организовать drag'n'drop в javascript, начиная от основ и заканчивая готовым фреймворком.

Кроме того, почти все javascript-библиотеки реализуют drag and drop так, как написано (в статье дано несколько разных вариантов, не факт что ваш фреймворк использует лучший). Зная, что и как, вы сможете поправить и адаптировать существующую библиотеку под себя. читать дальше »
Грамотное javascript-дерево за 7 шагов
В этой статье описана DOM/CSS-структура дерева, которую я в свое время разработал для dojo toolkit.

Основные особенности:
- Семантическая удобная CSS-разметка.Внешний вид дерева определяется исключительно CSS.
- Скрытие/раскрытие узлов
- Структура дерева обозначена линиями
- Допускает многострочное HTML-содержимое в узлах
- Оптимизация по количеству HTML-тагов
- Легко дополняется новыми фишками
читать дальше »
Интеграция AJAX в интерфейс
1. Реализация AJAX для подгрузки селекта
2. Резюме
При создании компонент интерфейса часто нужен AJAX. Например - SELECT с подгружающимся списком, поле с автозаполнением, дерево с подгружающимися узлами и т.п.

Эта статья посвящена конкретному примеру удобной и универсальной реализации AJAX для компонента интерфейса. Она дает общие рамки, можно даже сказать "фреймворк" для создания таких виджетов. читать дальше »
Координаты элемента на странице
Для кросс-браузерного вычисления координат элемента давно используется суммирование offsetLeft/offsetTop. Список глюков этого подхода такой же длинный, как история его существования.

Эта статья - о том, как вычислять координаты не только кросс-браузерно, но и правильно. Да, и еще - быстро. читать дальше »
Правильные show/hide/toggle
Как правильно реализовать универсальные функции show и hide для DOM элемента? Есть несколько распространенных вариантов, с различными граблями, которые мы рассмотрим, и выберем оптимальный.

Самое интересное, что даже самые лучшие show/hide функции из хороших javascript-библиотек не универсальны. читать дальше »
Удобное дерево с AJAX-подгрузкой
Эта статья показывает, как написать простое и удобное дерево с AJAX-подгрузкой узлов.

Она основана на материалах грамотное javascript-дерево и интеграция AJAX в интерфейс. читать дальше »

Отправить комментарий

Приветствуются комментарии:

Полезные.
Дополняющие прочитанное.
Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
Для остальных вопросов и обсуждений есть форум.

P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.

Ваше имя:

Адрес электронной почты:

Содержание этого поля является приватным и не предназначено к показу.

Домашняя страница:

Комментарий: *

Адреса страниц и электронной почты автоматически преобразуются в ссылки.
Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
Строки и параграфы переносятся автоматически.
Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA

Антиспам

Вопрос: * 6 + 10 =

Введите результат. Например, для 1+3, введите 4.

Текущий раздел
Drag and drop Грамотное javascript-дерево за 7 шагов Интеграция AJAX в интерфейс Координаты элемента на странице Правильные show/hide/toggle Удобное дерево с AJAX-подгрузкой