Date June 2nd 2010 Author Vitaly Agapov
Наша взаимовыгодная связь https://banwar.org/
- Рейхсфюрер, зараз весна сорок п'ятого, а не осінь сорок першого.
- Дякую за нагадування, Вальтер. Я, уявіть, кожен день заглядаю в календар. Щоранку.
- "17 миттєвостей весни"
Однією зі стандартних фич на будь-якому веб-порталі є календар новин, що дозволяє швидко вибрати новини за певний день. Ось і я зацікавився цією штукою і розібрався, як її реалізувати. Як з'ясувалося, для цього будуть потрібні лише невеликі знання JavaScript, а також плагін jQuery-UI для фреймворка jQuery.
Що конкретно ми хочемо отримати? Ми хочемо симпатичний календарик на сайдбарі сторінки з новинами. Він повинен виділяти дні, за які є новини і давати користувачеві клікати тільки на них. Він повинен довантажувати інформацію про дні з новинами за кожен новий місяць, що відкривається користувачем, а також зберігати в кеші вже підвантаженими інформацію. Та й вистачить, мабуть ... Само собою, клік на дату в календарі повинен викликати перехід на сторінку з новинами за обраний день.
Чи не пускаючись в міркування, просто наведу шматок (точніше, два шматки) коду. Обидва шматка будуть написані на Perl'е, але це не грає вирішальної ролі - левова частка коду являє собою JavaScript. Так що можна по-швидкому переробити все під, скажімо, PHP.
Перший шматок - це частина перлової CGI-скрипта, процедура, яка повертає код з календарем для генерується сторінки:
sub sub_newscalendar {my $ o; my @ tm = localtime; my $ year = $ tm [5] +1900; my $ month = $ tm [4] +1; my $ day = $ tm [3]; $ O. = Qq ~ <! - Блочний елемент для виведення Аяксова анімашки на час подгрузки календаря -> <div id = "calendar_loading"> <img src = "/ images / loading2.gif" alt = "" /> < / div> <! - Блочний елемент для самого календаря -> <div id = "calendar"> </ div> <script type = "text / javascript"> // <! [CDATA [var cache_days = new Array ( ); // Встановимо поточну дату var today = new Date (); var curr_date = today.getFullYear () + '-' + twoDigits (today.getMonth () + 1); var is_first = true; var ajax_exec = false; // Після завантаження сторінки починаємо завантаження календаря \ $ (document) .ready (function () {loadMonthCalendar ($ year, $ month);}); function showCalendar () {// Функція ховає Аяксова анимашку і показує div з календарем \ $ ( '# calendar_loading'). css ( 'display', 'none'); \ $ ( '# Calendar'). Css ( 'display', 'block'); } Function createCalendar () {// функція, що викликає конструктор datepicker з jQuery-UI для елемента #calendar \ $ ( "# calendar"). Datepicker ({monthNames: [ 'січні', 'лютий', 'Март', 'Апрель ',' травня ',' червня ',' липні ',' серпня ',' вересня ',' жовтня ',' листопаді ',' грудня '], monthNamesShort: [' січні ',' лютий ',' березня ', 'квітня', 'травня', 'червня', 'липні', 'серпня', 'вересня', 'жовтня', 'листопаді', 'грудня'], dayNames: [ 'неділя', 'понеділок', 'вівторок ',' серед «, 'четвер', 'п'ятницю', 'суботу'], dayNamesMin: [ 'Нд', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'] , nextText: 'Вперед', prevText: 'Назад', firstDay: 1, gotoCurrent: false, hideIfNoPrevNext: true, shortYearCutoff: 20, dateFormat: 'yy-mm-dd', minDate: new Date (2009, 11, 01) , maxDate: new Date ($ year, ($ month - 1), $ day), // подія, сраба Тива при виборі користувачем іншого місяця onChangeMonthYear: function (year, month, inst) {curr_date = year + '-' + twoDigits (month); if (is_first) {return false;} if (ajax_exec) {return false;} if (typeof (cache_days [curr_date])! = 'object') {// якщо це не перший виклик функції, не виклик з Ajax // а також якщо в кеші цього місяця немає, то видаляємо календар і завантажуємо його заново destroyCalendar (); loadMonthCalendar (year, month); }}, // Подія, що спрацьовує при кліці на дату onSelect: function (dateText, inst) {year = dateText.substr (0, 4); month = dateText.substr (5, 2); day = dateText.substr (8, 2); if (typeof (cache_days [year + '-' + month]) == 'object') {if (in_array (parseInt (day, 10), cache_days [year + '-' + month])) {// Якщо обрана дата є в кеші, то зробити на неї перехід location.href = '/ info / newsarchive /' + year + '-' + month + '-' + day + '/'; }} Return false; }, // Подія викликається перед отрисовкой кожного дня в місяці beforeShowDay: function (date) {this_day = date.getFullYear () + '-' + twoDigits (date.getMonth () + 1) + '-' + twoDigits (date. getDate ()); var arr = new Array (); // Функція повинна повернути масив з трьох елементів arr [0] = false; // Чи дозволяти вибір дати arr [1] = ''; // Який css-клас призначити arr [2] = ''; // Яку підказку показувати is_other = (date.getFullYear () + '-' + twoDigits (date.getMonth () + 1)! = Curr_date); is_week_end = (date.getDay () == 6 || date.getDay () == 0); is_selected = (this_day == '$ year -' + twoDigits ($ month) + '-' + twoDigits ($ day)); // Це ключовий момент. Якщо дата присутній в кеші, то буде дозволений вибір цієї дати is_href = in_array (date.getDate (), cache_days [date.getFullYear () + '-' + twoDigits (date.getMonth () + 1)]); if (is_other) {arr [0] = false; arr [1] = 'other-month'; } Else if (is_week_end && is_selected) {arr [0] = is_href; arr [1] = 'selected'; } Else if (is_week_end &&! Is_selected) {arr [0] = is_href; arr [1] = 'week-end'; } Else if (! Is_week_end && is_selected) {arr [0] = is_href; arr [1] = 'selected'; } Else if (! Is_week_end &&! Is_selected) {arr [0] = is_href; arr [1] = 'weekday'; } Return arr; }}); } Function loadMonthCalendar (year, month) {// Викликаємо Аяксом скрипт get-calendar, який повертає нас у вигляді JSON список днів ajax_exec = true; \ $. Post ( '/ get-calendar', {year: year, month: month}, function (data) {// Зберігаємо отримані значення в кеш cache_days [data.year + '-' + data.month] = data. days; showCalendar (); createCalendar (); ajax_exec = false; if (is_first) {is_first = false; \ $ ( '# calendar'). datepicker ( 'setDate', new Date ($ year, $ month - 1, $ day));} else {\ $ ( '# calendar'). datepicker ( 'setDate', new Date (year, month - 1, 1));}}, 'json'); } Function destroyCalendar () {// Видалення календаря \ $ ( '# calendar'). Css ( 'display', 'none'); \ $ ( '# Calendar_loading'). Css ( 'display', 'block'); \ $ ( '# Calendar'). Datepicker ( 'destroy'); } Function twoDigits (str) {// Функція повертає число у вигляді рядка з двох символів if (typeof (str)! = 'String') {str = str.toString (); } Return str.length <2? '0' + str: str; } Function in_array (val, ar) {// Функція перевіряє наявність елемента в масиві if (typeof (ar)! = 'Object' ||! Ar ||! Ar.length) {return false; } For (key in ar) {if (val == ar [key]) {return true; }} Return false; } //]]> </ script> ~; return $ o; }Для повноти картини подивимося текст скрипта get-calendar. Він повинен для конкретного місяця складати список днів, для яких є новини, і повертати їх в форматі JSON.
#! / Usr / bin / perl use CGI; use warnings; use DBI; use JSON; my $ cgi = new CGI (); $ Dbh = DBI-> connect ( "DBI: mysql: database = dbname; host = localhost", "username", "passwd", { 'RaiseError' => 1}); $ Dbh-> do ( "SET NAMES utf8"); $ Dbh-> do ( "SET CHARACTER SET utf8"); my% json_hash; $ Json_hash {month} = sprintf ( "% 02d", $ cgi-> param ( 'month')); $ Json_hash {year} = $ cgi-> param ( 'year'); my @days; unless ($ json_hash {month} = ~ / ^ \ d + $ / && $ json_hash {year} = ~ / ^ \ d + $ /) {print qq ~ { "days": [], "year": $ year, " month ":" $ month "} ~; exit (0); } # Це SQL-запит, витягує те, що нам треба my $ sql_query = "select day (create_date) from news where month (create_date) =". $ Json_hash {month}. "AND year (create_date) =". $ Json_hash {year}; my $ sth = $ dbh-> prepare ($ sql_query); $ Sth-> execute; while (my $ day = $ sth-> fetchrow ()) {push (@days, $ day); } $ Sth-> finish; $ Json_hash {days} = \ @ days; my $ json = JSON-> new-> allow_nonref; # За допомогою методу encode перетворимо хеш в JSON-текст. my $ json_text = $ json-> encode (\% json_hash); print qq ~ $ json_text ~; exit (0); На цьому все.
Робочий варіант можна подивитися тут .
Tags: Ajax , jQuery , Perl , Web-dev
Category: Web-dev | 8 Comments »
Leave a comment
Що конкретно ми хочемо отримати?Length <2?
Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.
