Від автора: у цьому невеликому уроці ми реалізуємо можливість додавання смайлів в текстову область форми засобами бібліотеки jQuery. Думаю, Ви вже користувалися такою можливістю неодноразово. Зокрема, вона використовується при додаванні поста на форумі, в коментарях, в гостьовій книзі. Зазвичай поряд з текстової областю, де пишеться текст коментаря, розташовується блок зі смайлами. Клікаючи на вподобаному смайле, ми додаємо його до нашого тексту. Думаю, ідея зрозуміла.
Насамперед, нам потрібно мінімальна розмітка:
Смайли
Тепер додамо трохи оформлення:
.form{
width:700px;
margin:0 auto;
}
#text{
width:100%;
height:250px;
border:1px solid #000;
}
.smiles{
text-align:center;
}
.smile{
cursor:pointer;
}
Тепер трохи рутини — необхідно додати наявні у нас смайли в блок, відведений для них. Всі смайли знаходяться в папці img:
Відмінно! Смайли розташувалися у відведеному для них блоці. Тепер підключаємо бібліотеку jQuery і почнемо писати нескладний клієнтський код:
$(document).ready(function(){
// тут код…
});
В чому полягає ідея нашої подальшої роботи? Якщо Ви звернули увагу, то кожна картинка смайла має своє унікальне значення атрибута alt — назвемо його символьним поданням смайла. Картинка, відповідно, буде його графічним поданням.
Отже, ідея полягає в тому, щоб при кліці по смайлу отримати значення його атрибуту alt і додати отриманий символьне уявлення в текстову область. Отримаємо значення атрибута alt в змінну smile:
$(document).ready(function(){
$(“.smile”).click(function(){
var smile = $(this).attr(‘alt’);
});
});
Перед тим, як додати отримане значення в текстову область, необхідно отримати значення текстової області, тобто отримати можливе її зміст. Отримаємо його в змінну text:
$(document).ready(function(){
$(“.smile”).click(function(){
var smile = $(this).attr(‘alt’);
var text = $(“#text”).val();
});
});
Ну і додамо смайл, змінюючи значення текстової області на нове — текст, який там був (або не було) плюс символьне уявлення смайла:
$(document).ready(function(){
$(“.smile”).click(function(){
var smile = $(this).attr(‘alt’);
var text = $(“#text”).val();
$(“#text”).val(text + smile);
});
});
Відмінно! Тепер при кліці по смайлу він додається в текстову область. Якщо до цього там був текст, то смайл додається після нього. Залишилося виправити деякі недоліки. Ми звикли, що перед вставляється смайлом обов’язково повинен бути пробіл, відокремлює смайл від тексту. Додамо ці прогалини:
$(document).ready(function(){
$(“.smile”).click(function(){
var smile = $(this).attr(‘alt’);
var text = $(“#text”).val();
$(“#text”).val(text + ”+ smile + ‘ ‘);
});
});
Проте користувач сам може поставити пробіл після тексту. Тепер, якщо він клацне по смайлу, то з’явиться зайвий символ пробілу між текстом і смайлом. Виправимо це, обрізаючи кінцеві пробіли при отриманні значення тексту:
$(document).ready(function(){
$(“.smile”).click(function(){
var smile = $(this).attr(‘alt’);
var text = $.trim($(“#text”).val());
$(“#text”).val(text + ”+ smile + ‘ ‘);
});
});
Ну і повернемо фокус до поля після додавання смайла, щоб можна було продовжувати писати текст:
$(document).ready(function(){
$(“.smile”).click(function(){
var smile = $(this).attr(‘alt’);
var text = $.trim($(“#text”).val());
$(“#text”).focus().val(text + ”+ smile + ‘ ‘);
});
});
Ось, власне, і все. Клієнтська частина готова. Для повноти картини можна також написати найпростішу серверну частину, яка б зберігала текст в сховище і діставала його звідти клієнту. При цьому також необхідно здійснювати заміну символьного подання смайлів їх графічним поданням.
Для зазначених цілей створимо базу даних з однієї таблиці. В таблиці створимо 2 поля — перше поле буде лічильником повідомлень (id типу INT, має атрибут Первинного ключа, автоинкрементируемое), друге буде зберігати текст повідомлення (тип TEXT).
З’єднаємося з БД:
@mysql_connect(“localhost”, “root”, “”) or die(“No connect to Server”);
mysql_select_db(“test”) or die(“No connect to DB”);
mysql_query(“SET NAMES utf8”) or die(“Can’t set charset”);
Тепер реалізуємо додавання повідомлень в БД:
if($_POST[‘submit’]){
$text = mysql_real_escape_string(trim($_POST[‘text’]));
$query = “INSERT INTO smile(text) VALUES(‘$text’)”;
mysql_query($query) or die(mysql_error());
header(“Location: index.php”);
exit;
}
І, нарешті, отримання повідомлень:
$posts = array();
$query = “SELECT * FROM smile ORDER BY id DESC”;
$res = mysql_query($query) or die(mysql_error);
while($row = mysql_fetch_assoc($res)){
$posts[] = $row;
}
Всі повідомлення отримані в масив $posts. Виведемо повідомлення з масиву в потрібному місці, наприклад, відразу після форми:
Відмінно, повідомлення виводяться. Поки що в них виводиться символьне уявлення смайлів. Напишемо функцію, яка б заміняла в виводиться тексті символьне уявлення графічним:
function smile($var){
$symbol = array(‘:mellow:’,
‘<_<’,
‘:)’,
‘:wub:’,
‘:angry:’,
‘:(‘,
‘:unsure:’,
‘:wacko:’,
‘:blink:’,
‘-_-‘,
‘:rolleyes:’,
‘:huh:’,
‘^_^’,
‘:o’,
‘;)’,
‘:P’,
‘:D’,
‘:lol:’,
‘B)’,
‘:ph34r:’);
$graph = array(“,
“,
“,
“,
“,
“,
“,
“,
“,
“,
“,
“,
“,
“,
“,
“,
‘‘,
‘‘,
‘‘,
‘‘);
return str_replace($symbol, $graph, $var);
}
Тут все просто — функція повертає результат роботи штатної функції str_replace(), яка, в свою чергу, шукає в рядку $var входження підрядка з масиву $symbol і змінює ці входження на підрядки з масиву $graph.
Опрацюємо висновок повідомлень написаної функцією:
foreach($posts as $post){
echo smile($post[‘text’]). “”;
}
Залишилося обробити висновок функцією htmlspecialchars() в цілях захисту від XSS-вразливості і пропустити висновок через функцію nl2br(), яка замінить символи переносу рядків на теґи розриву рядків (br).
foreach($posts as $post){
echo nl2br(smile(htmlspecialchars($post[‘text’]))). “”;
}
От і все. Тепер в повідомленнях виводяться повноцінні смайли, а не їх символьне уявлення. На цьому наш невеликий урок завершено. Удачі Вам і до нових зустрічей.
