Студопедия

Главная страница Случайная страница

Разделы сайта

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника






Проектування інтерфейсу






Наш документ будується відповідно до HTML, що дозволяє використовувати новий, коротший синтаксис DOCTYPE, і опускати атрибут type в тегах script.

Для оптимізації завантаження, стилі включені в секції head, а файли JavaScript підключаються внизу документа, перед закриває тегом body.

Для організації прокручуваному області з рядками чату використовуємо плагінjScrollPane. Даний плагін має свої власні стилі, який включаються в секції head.

Розмітка чату складається з чотирьох основних елементів div - верхньої панелі, контейнера чату, контейнера користувачів і нижньої панелі. Останній div містить форми для реєстрації користувача і відправки повідомлення. Форма відправки повідомлення за замовчуванням прихована і виводиться, тільки якщо користувач успішно увійшов в систему чату.

Потім включаємо файли JavaScript: бібліотеку jQuery, плагінmousewheel (використовується в jScrollPane), плагінjScrollPane і файл script.js.

Починається все з завдання стилів для div #chatContainer. Він центрируется горизонтально за допомогою властивості margin: 100px auto;. Даний div розділяється на верхню панель, область чату, область користувачів і нижню панель.

Верхня панель виводить інформацію про зареєстрованого користувача. Вона отримує відносне позиціонування, так що аватар, ім'я та кнопка " вийти" розташовуються відповідно.

Потім слід div, який містить всі рядки чату - #chatLineHolder. Даний div має фіксовану висоту і ширину, а в частині даного уроку, яка присвячена jQuery, використовуємо плагінjScrollPane для перетворення його в область з прокруткою контенту з бічним слайдером.

У другій частині файлу стилів оформляємо контейнер #chatUsers і елементи div для користувача. Кожен активний користувач чату представлений зображенням gravatar розміром 32 на 32 пікселів. Зображення за замовчуванням використовується в якості фону, і коли реальне зображення завантажується з сервера gravatar.com, воно виводиться зверху. Так запобігається подразнюючу мерехтіння, яке зазвичай з'являється в момент завантаження зображення.

Інша частина коду пов'язана з нижньою панеллю і формою відправки. Елемент div.tip стає трикутником, зробленим з використанням CSS, за рахунок установки нульової висоти і ширини, при цьому ширина обведення встановлюється велика.

В останній частині коду змінюємо стилі за замовчуванням для елементів div плагінаjScrollPane. За замовчуванням плагін виводить панель прокрутки в червоному кольорі, що погано поєднується з дизайном сторінки. Замість написання власних стилів з нуля, ми просто включаємо стилі за замовчуванням і змінюємо деякі правила.






© 2023 :: MyLektsii.ru :: Мои Лекции
Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав.
Копирование текстов разрешено только с указанием индексируемой ссылки на источник.