Вбудована система редагування
Не варто змушувати користувачів клікати по безлічі сторінок, щоб відредагувати одне єдине поле - це несучасно. У цьому уроці ви дізнаєтеся, як створити вбудовану систему редагування – подібними системами обладнано багато популярних сайтів, наприклад, Flickr.
Сьогодні ми з вами навчимося створювати щось подібне за допомогою – так, ви вгадали! – нашого улюбленого фреймворку jQuery! Зацікавились? Тоді вперед!
Визначимося з цілями
До того, як ми почнемо займатися функціоналом, слід визначитися з цілями нашої роботи та її передбачуваним кінцевим результатом.
Отже, тепер ми визначилися з цілями і можемо розпочати розробку плану з їхнього досягнення.
План дій
Необхідно скласти список дій, які нам доведеться вчинити, а також виробити їхній порядок.
Ось що нам належить зробити у процесі написання функціоналу. Звичайно, є деякі підпункти, але я поясню їх у справі.
Розмітка основної частини
HTML-код розмітки демо-версії виглядає приблизно так:
Як бачите, якщо не брати до уваги так званий бойлер-плейт (повторення синтаксичних шаблонів), у нас є два списки, які необхідно впорядкувати: кожен елемент li відноситься до класу «редаговані», і нам слід показати користувачу, що він може коригувати ці веб-сторінки елементів. Також ми використовували бібліотеку jQuery та наш власний скрипт.
CSS
Нічого особливого – просто кілька HTML-кодів для розмітки та стилю. Зверніть увагу на функції editHover та noPad - ми про них ще згадаємо.
Отже, тепер у нас є основа функціоналу, змодельована деяким чином – можна розпочинати дії щодо приведення функціоналу ввідповідність до наших вимог. Не забувайте, що ми будемо використовувати jQuery, причому буде потрібна версія не нижче 1.3 - все інше не працюватиме. Додавання псевдо-класу hover для зміни фону
Як ми вже вирішили, при наведенні курсору на текст, що редагується, його фон повинен змінюватися на світло-блакитний. Щоб здійснити це, ми використовуємо клас editHover.
Цей невеликий шматочок коду зробить все, що вам потрібно. Для редагування класу editHover ми будемо використовувати функцію hover, доступну в jQuery – таким чином, елемент веб-сторінки змінюватиме колір, коли на нього наводять курсор, і прийматимемо колишній колір, коли курсор прибирають. Ця функція використовується для виділення специфічних елементів – безглуздо використовувати його для всіх елементів веб-сторінки.
Переключення елементів
Перш за все, нам необхідно переконатися, що наш код спрацює після подвійного клацання миші по елементу, що редагується, тому давайте передбачимо це в коді.
Ми прикріпили функцію replaceHTML (заміна HTML) до події double click (подвійне клацання миші) у випадку, якщо подія відноситься до редагованого елемента. Тепер продовжимо роботу над організацією перемикання елементів.
Продовжимо роботу над кодом крок за кроком, не кваплячись і докладно розглядаючи кожну дію.
Тепер наш текст надійно збережений, доступний для подальшого використання, і ми можемо зайнятися перемиканням елементів. Насамперед ми обнулюємо елементи li порожнім рядком функції html, потім додаємо кілька стандартних HTML-елементів для створення вікна введення тексту, а також парочку посилань для збереження та скасування редагування. Також ми розподілили всі елементи класів, щоб забезпечити простий доступ коду до них.
Як завжди, ми використовуємо всеце для того, щоб визначити в коді початок дій, які користувач може здійснювати з вибраним елементом.
Збереження редагування
Перш за все дозвольте представити вам функцію jQuery, яка називається live. Не виключено, що раніше вам не доводилося з нею стикатися, тож я в двох словах розповім, що це таке.
Ця функція пов'язує операції та події незалежно від того, коли було створено документ. Докладніша інформація про функцію доступна в офіційних документах фреймворку.
Тепер погляньмо на наш код уважно. Спочатку ми пов'язуємо код, що міститься в анонімній функції, з подією «клацання миші». За допомогою функції ми зберігаємо текст, який міститься в полі введення – це досить спритний хід, адже цей текст ще не має власної ідентифікації на сторінці. Потім ми переходимо від початкового елемента до елемента, створеного користувачем, а потім зберігаємо його.
Далі ми звертаємося до вихідного елемента і замінюємо його HTML-вміст текстом, збереженим на попередньому кроці.
Ця частина коду цілком могла вміститися в один рядок, але я розбив її на кілька рядків для зручнішої читабельності коду.
Скасування редагування
Це насправді дуже просто – ніякого підводного каміння, все точно так, як написано. Якщо користувач передумав зберігати відредагований текст, ми просто замінюємо HTML-вміст вихідного елемента текстом, який у елементі спочатку і був збережений з допомогою функції oldText.
Що ж, основна частина роботи виконана, залишилося лише дещо підредагувати на випадок, якщо користувач зробить щось, що ми не передбачили.
Зв'язування та роз'єднання
Якщо ви вже спробувалипротестувати написаний код, то, напевно, зіткнулися з такою помилкою: коли користувач двічі клацає мишкою по вікну введення тексту, в ньому з'являється HTML-код системи редагування. Спробуйте - з кожним подвійним клацанням до нього додаватиметься все нові і нові рядки тексту. Ще гірше буде, якщо ви оберете для сигналу до початку редагування одинарне клацання миші.
Щоб уникнути цього, слід роз'єднати зв'язок між клацанням та початком редагування, коли на екрані вже з'явилося вікно введення, та відновити цей зв'язок, коли користувач збереже результати редагування або скасує його взагалі. Давайте займемося цим.
Слід трохи змінити написаний нами код:
Ми зробили так, що сигнал «початок редагування» не працює, якщо редагування вже почалося. Для решти редагованих елементів сторінки сигнал, як і раніше, діє.
Потім ми відновлюємо зв'язок між подвійним клацанням миші та початком редагування тексту, незалежно від того, чи буде користувач ще раз коригувати текст чи ні. Якщо ми не відновимо зв'язок, текст можна буде виправити лише один раз.
Останні штрихи
Остання частина нашого коду спрямована лише на зовнішню ефектність дій програми. Можливо, ви звернули увагу на те, що елементи класу li відрізняються гарним вирівнюванням, але при редагуванні тексту воно зникає, що псує всю картину. Ми ж хочемо, щоб відредагований текст був вирівняний так само, як вихідний, тому додаємо елементу клас noPad на початку редагування.
Нагадую, що при виправленні одного елемента можна паралельно редагувати решту елементів веб-сторінки.
І ще один крок:
Щоб не робити код надто довгим, я обмеживсяодним варіантом функціоналу. Якщо ж ви вирішите використовувати цей функціонал у власних проектах, то вам доведеться передбачити використання систем не-SAP, а, крім того, модель AJAX.
Додати цей функціонал у програму дуже просто, але не забувайте, що вищевикладений код – лише приклад, ілюстрація, і він не призначений для промислового тиражування. Я, як бачите, утримався від додавання додаткових атрибутів до елементів веб-сторінки та вікон редагування, але якщо ви пишете програму, призначену для масового використання, вам доведеться все це зробити.
Для додавання запиту AJAX слід відредагувати функцію збереження таким чином:
Не забувайте, що в системах не-SAP для роботи програми належним чином потрібні додаткові атрибути до функції вибору тексту та його редагування, які можна легко додати в розроблений мною код.
Висновки
Ну ось і все – у вас є код, який ви можете додати до своїх веб-розробок. Сподіваюся, що урок вам сподобався, і ви змогли почерпнути щось цікаве і корисне. Сміливо використовуйте код у своїх цілях та звертайтеся до мене, якщо щось буде незрозуміло.
Даний урок підготовлений для вас командою сайту.
5 останніх уроків рубрики "Різне"
Як розмістити свій сайт на хостингу? Правильно обраний хороший хостинг – це майбутнє Ваших сайтів
Проект готовий, Все перевірено на локальному сервері OpenServer та можна переносити сайт на хостинг. Ось тільки яку компанію вибрати? Пропоную переглянути хостинг fornex.com. Відмінне місце для твого проекту зперспективами бурхливого зростання.
Розробка веб-сайтів за допомогою онлайн платформи Wrike
Створення вебсайту – процес трудомісткий, що вимагає злагодженої взаємодії між замовником та виконавцем, а також між усіма членами колективу, залученими до проекту. І в цьому дуже хорошу підмогу надасть онлайн платформа Wrike.
20 ресурсів для прототипування
Добірка з кількох десятків ресурсів для створення мокапів та прототипів.
Топ 10 безкоштовних хостингів
Невелика вибірка провайдерів безкоштовного хостингу з детальним описом.
Швидка замітка: масовий UPDATE у MySQL
Ні для кого не секрет як у MySQL реалізувати масовий INSERT, а ось з UPDATE можуть виникнути складності. Щоб не вдаватися до маніпуляцій події ON_DUPLICATE, можна скористатися спеціальною конструкцією CASE … WHEN … THEN.