Спливаюче вікно jquery, загальні відомості по створенню
Відео: Web-дизайн. Навчальний відеокурс
Одним із способів залучення користувачів на сайт є спливаючі вікна. Звичайно, це не дає стовідсоткової гарантії підвищення відвідуваності, але все-таки на деякий час вони привертають увагу до інформації.
створити спливаюче вікно jquery - завдання не з легких, але при бажанні вона цілком здійсненна. І все-таки, перед тим, як починати створювати такий твір, треба представляти візуально, що це таке і як воно виглядає.
Сторінка сайту створюється за допомогою мови HTML. На ній, в тому порядку, який подобається власникові ресурсу, розміщуються кнопки. Їх може бути кілька штук (від однієї до ...), на розсуд створює. Натискаючи на таку кнопочку, відвідувач буде бачити спливаюче вікно jquery. Зміст оних може бути абсолютно різним, наприклад приваблива картинка або нова форма реєстрації, реклама, повідомлення, та все що завгодно. Фантазія в цій справі не обмежується ніякими межами. Спливаючі вікна найчастіше перекривають сторінку сайту прозорим темним тлом і на кожному з них присутній піктограма, зазвичай розуміється користувачами на рівні інтуїції. Можливості даної функції безмежні.
На перший погляд, створити таку річ складно, але це помилкове враження. Якщо є бажання і існує потреба, чому б в цьому не розібратися докладніше? Навіть якщо багато чого незрозуміло, завжди є можливість вивчити процес, звернувшись до професіоналів. Давайте, наприклад, створимо і розмістимо кнопки, які будуть викликати вікна реєстрації, картинок або фотографій і вкладки. Використовуючи javascript спливаюче вікно, вірніше кнопку, оформляємо у вигляді посилання і задаємо для всіх них загальний клас. Посилання поміщаємо всередину тега div-а.
Відео: ASP.NET MVC. Створення HTML-хелпери. Custom html helpers
Атрибут rel, доданий в кожну, в точності відповідає класового назвою вікна і дає можливість відкрити потрібне, тільки-но клікнувши на посилання. Все, спливаюче вікно jquery ми створили. Тепер залишається його зробити акуратним і привабливим. Для цього буде потрібно використання стилів.
Робота в стилях складнощів не викликає: все просто і зрозуміло. Треба тільки хоч трохи володіти мовою HTML. Але навіть якщо користувач не розбирається в ньому, потрібні відомості легко знайти в інтернеті. Для того щоб кнопки jquery, спливаючі вікна виглядали у всіх відомих на сьогоднішній день браузерах однаково красиво і акуратно, треба: а) центрировать блоки ссилок- б) закруглити угли- в) підключити PIE для ІЕ 7-8.
В цілому, розмітка HTML буде однаковою для всіх спливаючих вікон. Тому на використанні тегів не варто зациклюватися: якщо не володієте, досить запам`ятати кілька основних. Різниця буде лише в оформленні розмірів, тобто одне спливаюче вікно jquery по ширині буде виглядати дещо інакше. Те ж саме стосується і вмісту.
Для розміщення форми реєстрації в зазначений вище тег треба записати наступне:
Close
Відео: javascript for Web Apps, by Tomas Reimers and Mike Rizzo
Реєстрація на сайті
Введіть логін: Введіть пароль:
В даному записі reg_form збігається з атрибутом першої кнопки rel, а подвійний клас обгортають блоку задається popup reg_form (пробіл обов`язковий). Такий напис дозволяє створити як загальний стиль для всіх спливаючих вікон, так і задати для кожного окремо конкретні параметри.
Далі починаємо розміщувати кнопку, що відповідає за картинки. Тут те ж саме: вказується подвійний клас і позначається шлях до папки, де ці зображення знаходяться. Ну і далі в тому ж дусі.
Відео: Як зробити спливаюче вікно для відправки форми
Після створення залишиться тільки підкоригувати загальний зовнішній вигляд сторінки сайту, прописати правила для вікон. Тобто вони всі будуть однаково оформлені, відредаговані по горизонталі, і кожне матиме кнопку, що відповідає за закриття самого вікна і його заголовка. Крім того, при завантаженні сторінки ресурсу вони все будуть приховані.
Якщо ж немає ніякого бажання робити це самому, завжди є можливість завантажити скрипт, що дозволяє створити спливаюче вікно автоматично, тільки трохи коректуючи дії програми.
