Як зробити спливаючі вікна на jQuery (інформери)
Досить часто при розробці різних web-додатків та сайтів, виникає одне й те саме завдання – зробити інформери на jQuery. І, зазвичай, це чотири спливаючі вікна:
- Інформація про помилку
- Підтвердження дії
- Завантаження та очікування
- Виведення інформації
Використовувати з цією метою окремі бібліотеки - безглуздо. І тому є кілька причин.
По-перше, те, що одна бібліотека не конфліктує з одним з ваших проектів - зовсім не означає, що в іншому проекті не буде конфліктів між скриптами.
По-друге, рідко можна зустріти бібліотеку тільки з чотирма вікнами, що спливають. А це означає, що для вирішення невеликого завдання вам доведеться підключати всю "могутність" бібліотеки разом з її стилями та картинками. Що часом може непогано позначитися на продуктивності.
По-третє, як тільки вам треба буде щось змінити, лише "якусь дрібницю", то ви можете дізнатися неприємну новину - "бібліотека не підтримує такі налаштування". У такому разі варіантів буде два: або міняти завдання, або міняти бібліотеку. Погодьтеся, що це трохи хитромудро для простих вікон.
По-четверте, бібліотека тягне у себе як необхідність дізнатися кілька назв функцій, а й, як мінімум, вникнути у основи самої бібліотеки. А цей час і часом досить непоганий.
Тому найпростіше - один раз зробити свої спливаючі вікна, і коригувати їх від програми до додатку. На резонне заперечення Існує стандартний віджет діалогу в самому jQuery, навіщо щось писати? - Є кілька простих відповідей.
По-перше, саме цей віджет і використається.
По-друге, щоразу писати по 10-15рядків коду тільки одних параметрів - рано чи пізно набридне.
По-третє, так чи інакше настає момент, коли ви починаєте колупатися в html усередині діалогу, тому що в голові виникнуть наступні думки "якось шапка діалогу виглядає неакуратно в загальному стилі мого сайту" / "кнопки б трохи правіше розташувати" / " як би прибрати цей хрестик зверху" / "а ось якби тут трохи .." І т.п.
І перше, з чого необхідно почати - це зібрати невеликі вимоги до таких вікон, щоб не виникло сюрпризів. Після деякого часу вийшов приблизно цей список:
- Підключення та налаштування вікон повинно відбуватися автоматично (вам необхідно підключити лише файли js, css та картинку для завантаження)
- Повторне підключення файлу скрипта не повинно викликати збій
- Заголовок та текст мають елементарно змінюватися
- Використовувати лише стандартні механізми jQuery
- Без вказівки будь-яких налаштувань у вашому коді кожне вікно має виглядати приємно
- Інтерфейс має бути простим
- Завжди має бути можливість повісити оброблювач на кожну з кнопок
- У вас завжди має бути можливість швидко підкоригувати дії віконців
Примітка : Звичайно, частина цього списку може здатися вам зайвою і "так зрозумілою". Але, як показує практика, часом про це забувають, і в результаті отримують потужні, але складні для використання рішення. І, в результаті, для цих рішень пишуться інші рішення, які дозволяють просто і швидко отримати те, що потрібно. Погодьтеся, що це дещо марнотратно. Тому, якщо ви згодом писатимете свої скрипти і модулі, то не забувайте про те, що у вашому списку вимог завжди повинні бути пункти з розряду "отже зрозуміло".
Пишемоспливаючі вікна на jQuery
Після того, як було визначено перелік вимог, необхідно скласти структуру тестового проекту з урахуванням вимог. Отримуємо таке:
- css - каталог
- template.css - файл стилів віконець
Як видно, структура є досить простою, і її легко інтегрувати на будь-який сайт. Максимально, що від вас може знадобитися - це змінити атрибут "src" усередині js, але про це пізніше.
Складаємо index.html
Для тестового висновку складемо простий html-файл, усередині якого підключатимуться jQuery бібліотеки та стилі з web-ресурсу самого jQuery. Також підключаємо всередині файлу стиль спливаючих вікон template.css і скрипт jquery-min.js. А всередину секції body розмістимо чотири кнопки для тестового запуску. І напишемо невеликий скрипт для обробників клацань для кнопок. У результаті буде наступний код:
Як бачите, все досить просто і немає жодних складнощів. Якщо ви відкриєте зараз index.html, то має відобразитися чотири кнопки (як показано на малюнку).
Пишемо скрипт jquery-msg.js
Примітка : Звичайно, можна було об'єднати ряд функцій у загальну частину, але тоді буде порушена вимога "У вас завжди має бути можливість швидко підкоригувати дії вікон". Кожне вікно розраховане на власну HTML структуру (хоч і однотипну в рамках прикладу). А це означає, що як тільки ви поміняєте частину HTML-коду, наприклад, біля вікна з підтвердженням дії, то у разі об'єднанняоднотипних функцій це може призвести до необхідності змінювати інші вікна, що й суперечить вимогам.
Усередині загальної частини створюється та налаштовується все те, що технічно необхідно, але не залежить від функцій самих вікон. А саме: створити модальне вікно з параметрами користувача (з урахуванням преднастроенных параметрів), автоматично додати його в DOM, вставити передану html-розмітку, при необхідності додати класи стилів і видалити стандартний заголовок (щоб повністю очистити область; плюс до всього, власний заголовок легше налаштовувати). Сам код:
Тепер на основі загального інтерфейсу необхідно створити вікно підтвердження. З урахуванням усіх вимог, виходить наступний код:
Файл стиль template.css
Підсумок - красиві спливаючі вікна на jQuery
Тепер збережемо всі отримані файли в якійсь папці, відкриємо браузером файл index.html і по черзі натискатимемо на кнопки.
При натисканні на кнопку "Показати помилку" буде показано наступне спливаюче вікно:
При натисканні на кнопку "Підтвердіть дію" з'явиться таке вікно:
При натисканні на кнопку "Завантаження" спочатку з'явиться, а потім закриється по setTimeout наступний інформер:
При натисканні на кнопку "Інформація", на екрані з'явиться таке вікно:
"Ось і все! Скрипт готовий!" - скаже хтось. Але це не так. Тепер необхідно пройтися всіма пунктами вимог і подивитися наскільки написаний скрипт відповідає їм.
- Підключення та налаштування вікон має відбуватися автоматично (вам необхідно підключити лише файли js, css і картинку для завантаження) - Є (видно з самого index.html)
- Повторне підключення файлу скрипта не повинно викликати збій.(спробуйте підключити вдруге файл)
- Заголовок та текст повинні елементарно змінюватися - Є (просто передайте параметр)
- Використовувати лише стандартні механізми jQuery - Є (використовується стандартний діалог та прості події)
- Без вказівки будь-яких налаштувань у вашому коді, кожне вікно має виглядати приємно - Є (тут звичайно, "на смак та колір", але, тим не менш)
- Інтерфейс повинен бути простим - Є (сам скрипт може бути не дуже простий для новачка, але з точки зору використання все дуже просто - дві функції show і hide)
- Завжди має бути можливість повісити оброблювач на кожну з кнопок – Є (передача покажчика на функцію через параметри)
- У вас завжди має бути можливість швидко підкоригувати дії вікон - Є (загальна частина збирає суто технічні моменти, логіка кожного вікна описується окремо, так що провести коригування потрібного вікна можна легко та безболісно)
Ось тепер можна сказати, що скрипт готовий!
Примітка : Звичайно, і тут не можна говорити фразу "Ну, нарешті!". Ще необхідно провести хоча б невелике тестування всіх вхідних параметрів, але це виходить за межі статті. Та й якщо виникне якась проблема, її завжди можна виправити. І пам'ятайте, що такі скрипти коригуються від додатка до додатку.
Файл архів з вихідним кодом ви можете завантажити тут: