Contenteditable — редагування вмісту «на льоту»

16

Від автора: в цьому і наступному уроці ми познайомимося з одним з нових атрибутів в HTML5 під назвою contenteditable. З самої назви зрозуміло, що даний атрибут якось пов’язаний з редагуванням вмісту. І дійсно, він дозволяє редагувати вміст елементів прямо на сторінці.

Contenteditable — редагування вмісту «на льоту»Contenteditable — редагування вмісту «на льоту»

Думаю, ви вже здогадалися, де це може стати в нагоді і будуєте плани на використання цього атрибута. Використання даного атрибуту дуже зручно, скажімо, для деяких розділів адмінки сайту, де необхідно проводити швидке редагування заголовків, налаштувань і т. п.

У цих уроках ми розглянемо практичне використання атрибуту contenteditable і реалізуємо редагування налаштувань сайту буквально «на льоту». Для прикладу скористаємося простою таблицею БД з налаштуваннями будь-якого сайту (дамп таблиці ви знайдете в исходниках до уроку).

Створимо 3 файлу: index.php, config.php і functions.php. В індексний файл будемо виводити таблицю з налаштуваннями, у файлі config.php будемо зберігати підключення до БД, а у файлі functions.php опишемо функції для роботи з даними.

Підключимося до БД у файлі config.php, використовуючи необхідні налаштування:

define(«DBHOST», ‘localhost’);
define(«DBUSER», ‘root’);
define(«DBPASS», «);
define(«DBNAME», ‘crafter’);
$db = @mysqli_connect(DBHOST, DBUSER, DBPASS, DBNAME) or die(«Немає з’єднання з БД»);
mysqli_set_charset($db, «utf8») or die(«Не встановлена кодування з’єднання»);

Сам файл конфігурації, а заодно і файл функцій, підключимо вгорі файлу index.php:

Тепер у файлі функцій опишемо нескладну функцію, яка отримує дані з таблиці налаштувань:

/**
* отримання налаштувань
**/
function get_options(){
global $db;
$query = «SELECT * FROM options»;
$res = mysqli_query($db, $query);
$options = array();
while($row = mysqli_fetch_assoc($res)){
$options[$row[‘id’]] = $row;
}
return $options;
}

Отримаємо результат роботи функції в індексному файлі у масив $options:

Далі в індексному файлі створимо просту розмітку і виведемо в циклі налаштування в таблицю. Заодно підключимо бібліотеку jQuery і наш майбутній файл скрипту script.js, який не забудьте створити. У результаті вміст індексного файлу буде наступним:

Редагований контент

ID Системне назва Назва опції Значення

Як бачимо, тут ми до останньої клітинки зі значеннями опцій помістили елемент div з атрибутом contenteditable. Тепер вміст цього елемента буде доступно для редагування. Далі оформимо таблицю стилів:

.zebra{
width: 70%;
margin: 20px auto;
border-collapse: collapse;
}
.zebra th{
background: #555;
color: #fff;
text-align: left;
}
.zebra .foot{
background: #d5d5d5;
color: #000;
text-align: left;
}
.zebra input{
width: 100%;
transition: all .5s;
}
.zebra input:focus{
box-shadow: 0 0 5px #000;
}
.zebra th,
.zebra td{
border-bottom: 1px solid #ccc;
padding: 5px;
vertical-align: middle;
padding: 12px 5px;
}
.zebra tr{
transition: all .5s;
}
.zebra tr:hover{
/*background: #f1f1f1;*/
}
.edit{
padding: 3px;
transition: all .5s;
border: 1px solid rgba(82, 168, 236, .5);
}
.edit:focus{
border: 1px solid rgba(82, 168, 236, 1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.9);
outline: none 0;
}

І, нарешті, напишемо декілька рядків клієнтського коду у файлі script.js:

$(function(){
var oldVal, newVal, id;
$(‘.edit’).keypress(function(e){
if(e.which == 13){
return false;
}
});
$(‘.edit’).focus(function(){
oldVal = $(this).text();
id = $(this).data(‘id’);
console.log(oldVal + ‘|’ + id);
});
});

Цими рядками ми відстежуємо подія натискання клавіш при натисканні клавіші Enter ми забороняємо її поведінку за замовчуванням, тобто забороняємо перенесення рядків для редагування контенту. Також при отриманні фокусу для того чи іншого елемента з налаштуванням, ми отримуємо поточне значення налаштування і ID опції. ID нам знадобиться у майбутньому для запиту до БД, а от поточне значення установки необхідно для того, щоб порівняти його зі значенням після втрати елементом фокуса. Якщо ці значення будуть відрізнятися, значить, користувач зраджував налаштування, і нам необхідний запит до БД для збереження нового значення.

На цьому ми завершимо поточний урок. Удачі і до нових зустрічей!