- Створення форми зворотного зв'язку
- Установка випадає календаря jQuery
- Налаштування випадає календаря jQuery
- далі - Зміна стилів випадає календаря
Створення форми зворотного зв'язку
Календар в формі зворотного зв'язку
У багатьох формах зворотного зв'язку потрібне введення дати, наприклад, дати замовлення авіаквитків, бронювання номера в готелі і т.п. Для цього зазвичай використовується проста рядок
<input type = "text" name = "date" />.
На жаль, відвідувачі по-різному можуть ввести дані, що іноді створює плутанину. Для виключення цього можна трохи доопрацювати форму, наприклад, зробивши окремі поля для всіх / місяця / року:
Приклад робочий, вихідний HTML-код не має яких-небудь особливостей, і ви можете знайти і подивитися його на сторінці, натиснувши Ctrl + U.
Ще більш зручно і красиво можна зробити введення дати з допомогою спливаючого календарика. Для цього не потрібно особливих знань і умінь, так як дбайливі програмісти вже створили десятки варіантів скриптів, найбільш популярні з яких пропонуються в безкоштовній бібліотеці jQuery. Про неї вже неодноразово розповідалося раніше, наприклад, в статтях " Фотогалерея jQuery - просто і красиво! "Або" Створення простого анімованого меню ".
Розглянемо введення дати в форму зворотного зв'язку за допомогою віджета Datepicker jQuery UI. Два діючих прикладу його використання показані внизу. Для введення дати клацаєте в поле введення і вибираєте потрібну кількість в випадаючому календарі, після чого воно автоматично вводиться в форму. Другий приклад відрізняється від першого розкриваються списками для вибору місяця і року, ефектом анімації і обмеженням введення дати: 2 дня назад і 8 місяців +3 тижні +1 день вперед (maxDate: "+ 8m + 3w + 1d").
Спочатку розглянемо, як за кілька хвилин встановити календарик (приклад 1) на сайті, а потім більш ретельно, для особливо цікавих товаришів, розберемося в тонкощах зміни стилів і налаштувань календаря (приклад 2). До речі, стиль нашого календаря в бібліотеці jQuery називається Sunny (Сонячний).
Установка випадає календаря jQuery
Отже, процес установки календаря складається з 4 кроків (детально установка скриптів jQuery на сайт описана в статті " Створення фотогалереї jQuery ", Але читати цей матеріал необов'язково):
- завантажуєте архів з необхідними файлами.
- Створюєте нову папку calendar в тому ж каталозі (папці), де розташована сторінка з формою зворотного зв'язку, і розпаковуєте в неї скачаний архів. У ньому дві папки - js і css. У першій знаходяться три js-скрипта, а в другій - файл стилів СSS (jquery-ui-1.10.2.custom.css) і папка images з допоміжними зображеннями.
- У тезі <head> ... </ head> на сторінці з формою зворотного зв'язку вказуєте шлях до нових файлів і розміщуєте додатковий java-скрипт, необхідний для установки параметрів календаря:
<Link type = "text / css" href = "calendar / css / jquery-ui-1.10.2.custom.css" rel = "stylesheet" />
<Script type = "text / javascript" src = "calendar / js / jquery-1.8.3.min.js"> </ script>
<Script type = "text / javascript" src = "calendar / js / jquery-ui-1.10.2.custom.min.js"> </ script>
<Script type = "text / javascript" src = "calendar / js / jquery.ui.datepicker-ru.js"> </ script>
<Script type = "text / javascript">
$ (Function () {
$ ( "# Datepicker"). Datepicker ({
changeMonth: false,
changeYear: false
});
});
</ Script>
<Style type = "text / css">
div.ui-datepicker {
font-size: 12px;
width: 200px;
}
</ Style>
Зверніть увагу, що розміри шрифту і ширину календаря (width) можна задати тут же в тезі <style> ... </ style>. Висота календаря визначається автоматично, в залежності від кількості днів у місяці. До речі, ніхто не заважає додати і інші правила CSS, наприклад, межі, колір фону, вид шрифту і т.п. і звичайно, всі ці дані можна розмістити не на сторінці сайту, а винести в файл calendar / css / jquery-ui-1.10.2.custom.css. - Для створення випадає календаря на сторінці сайту необхідно додати в тег <input /> атрибут id = "datepicker":
<input type = "text" id = "datepicker" />.
На цьому установка календаря закінчена! Можете відкрити сторінку з формою зворотного зв'язку в браузері і помилуватися на результат.
Важливе зауваження 1: якщо на вашому сайті використовується кілька плагінів jQuery, то зручніше перенести файл jquery.js (бажано останньої версії) в кореневу папку, щоб не завантажувати його кілька разів. В цьому випадку, рядок звернення до нього буде виглядати однаково для всіх плагінів. Зокрема, для нашого прикладу виходить так:
<Script src = "jquery-1.8.3.min.js" type = "text / javascript"> </ script>
Не рекомендується використовувати на одній сторінці кілька різних версій jQuery, щоб вони не конфліктували один з одним. При цьому обов'язково перевіряйте роботу плагінів з встановленою версією jQuery, так як не всі версії взаємозамінні.
Налаштування випадає календаря jQuery
Щоб в календарі зробити вибір місяці і роки з випадаючих списків, як в Прімері 2 вгорі, досить змінити false на true в двох рядках скрипта установки параметрів календаря (див. Пункт 3 вище по тексту):
changeMonth: true,
changeYear: true.
Для зміни виведення інформації в поле вводу форми відкрийте файл jquery.ui.datepicker-ru.js і задайте потрібний формат дати в рядку dateFormat. наприклад:
dateFormat: 'dd. mm. yy '- число, місяць, рік (наш приклад),
dateFormat: 'DD, d MM, yy' - день тижня, число, місяць, рік,
dateFormat: d MM, yy - число, назва місяця (повне), рік (повний - чотири цифри),
dateFormat: d M, y - число, назва місяця (короткий), рік (короткий - дві цифри)
і т.д.
У цьому ж файлі ви можете змінити відмінок і написання з великої або великої літери назв місяців і днів тижня.
Важливе зауваження 2: розміщуючи випадає календар на сторінці сайту, прослідкуйте, щоб його кодування збігалася з кодуванням сторінки. Зазвичай, це UTF-8 або windows-1251. Змінити кодування календаря і скорегувати переклад можна у файлі jquery.ui.datepicker-ru.js. Для цього, наприклад, в Adobe Dreamweaver треба відкрити файл і вибрати в меню Змінити - Властивості сторінки - Кодування. У нашому прикладі обрана charset = utf-8.
На закінчення, не забувайте, що завантаження скриптів уповільнює відкриття сторінки. При повільному з'єднанні з інтернетом це призводить до того, що виконання сценаріїв відбувається не відразу, і користувач деякий час (до повного завантаження скрипта) не побачить, що випадає календаря.
Далі розглянемо, як змінити стиль календаря , Ввести обмеження діапазону введення дати і змінити деякі інші настройки. Це необхідно, щоб не можна було, наприклад, замовити квитки на літак на п'ять років вперед або в кінотеатр на минулий місяць.
також розглянемо висновок на сторінці сайту двох календарів з залежним вибором дати. Це потрібно, наприклад, при вказівці термінів бронювання номера в готелі, коли дата виїзду не може бути раніше дати заїзду, а також при виборі днів вильоту / прильоту літаків і ін.
28.04.2013 р
далі - Зміна стилів випадає календаря
