От автора: в этом небольшом уроке мы реализуем возможность добавления смайлов в текстовую область формы средствами библиотеки jQuery. Полагаю, Вы уже пользовались такой возможностью неоднократно. В частности, используется она при добавлении поста на форуме, в комментариях, гостевой книге. Обычно рядом с текстовой областью, где пишется текст комментария, располагается блок со смайлами. Кликая на понравившемся смайле, мы добавляем его к нашему тексту. Думаю, идея понятна.
Прежде всего, нам потребуется минимальная разметка:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Смайлы</title> </head> <body> <div class="form"> <form method="post" action="#"> <textarea name="text" id="text"></textarea> <div class="smiles">Тут будут смайлы</div> <input type="submit" name="submit" value="Отправить" /> </form> </div> </body> </html> |
Теперь добавим немного оформления:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style type="text/css"> .form{ width:700px; margin:0 auto; } #text{ width:100%; height:250px; border:1px solid #000; } .smiles{ text-align:center; } .smile{ cursor:pointer; } </style> |
Теперь немного рутины — необходимо добавить имеющиеся у нас смайлы в блок, отведенный для них. Все смайлы находятся в папке img:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<div class="smiles"> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> <img class="smile" src="img/biggrin.png" alt=":D"> </span> <span> <img class="smile" src="img/laugh.png" alt=":lol:"> </span> <span> <img class="smile" src="img/cool.png" alt="B)"> </span> <span> <img class="smile" src="img/ph34r.png" alt=":ph34r:"> </span> </div> |
Отлично! Смайлы расположились в отведенном для них блоке. Теперь подключим библиотеку jQuery и начнем писать несложный клиентский код:
|
1 2 3 4 5 6 |
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ // здесь код... }); </script> |
В чем заключается идея нашей дальнейшей работы? Если Вы обратили внимание, то каждая картинка смайла имеет свое уникальное значение атрибута alt — назовем его символьным представлением смайла. Картинка, соответственно, будет его графическим представлением.
Итак, идея заключается в том, чтобы при клике по смайлу получить значение его атрибута alt и добавить полученное символьное представление в текстовую область. Получим значение атрибута alt в переменную smile:
|
1 2 3 4 5 6 7 |
<script type="text/javascript"> $(document).ready(function(){ $(".smile").click(function(){ var smile = $(this).attr('alt'); }); }); </script> |
Перед тем, как добавить полученное значение в текстовую область, необходимо получить значение текстовой области, т.е. получить возможное ее содержание. Получим его в переменную text:
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> $(document).ready(function(){ $(".smile").click(function(){ var smile = $(this).attr('alt'); var text = $("#text").val(); }); }); </script> |
Ну и добавим смайл, изменяя значение текстовой области на новое — текст, который там был (или не был) плюс символьное представление смайла:
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> $(document).ready(function(){ $(".smile").click(function(){ var smile = $(this).attr('alt'); var text = $("#text").val(); $("#text").val(text + smile); }); }); </script> |
Отлично! Теперь при клике по смайлу он добавляется в текстовую область. Если до этого там был текст, то смайл добавляется после него. Осталось исправить некоторые недочеты. Мы привыкли, что перед вставляемым смайлом обязательно должен быть пробел, отделяющий смайл от текста. Добавим эти пробелы:
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> $(document).ready(function(){ $(".smile").click(function(){ var smile = $(this).attr('alt'); var text = $("#text").val(); $("#text").val(text + ' ' + smile + ' '); }); }); </script> |
Однако пользователь сам может поставить пробел после текста. Теперь, если он кликнет по смайлу, то появится лишний пробельный символ между текстом и смайлом. Исправим это, обрезая концевые пробелы при получении значения текста:
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> $(document).ready(function(){ $(".smile").click(function(){ var smile = $(this).attr('alt'); var text = $.trim($("#text").val()); $("#text").val(text + ' ' + smile + ' '); }); }); </script> |
Ну и вернем фокус в поле после добавления смайла, чтобы можно было сразу продолжать писать текст:
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> $(document).ready(function(){ $(".smile").click(function(){ var smile = $(this).attr('alt'); var text = $.trim($("#text").val()); $("#text").focus().val(text + ' ' + smile + ' '); }); }); </script> |
Вот, собственно, и все. Клиентская часть готова. Для полноты картины можно также написать самую простую серверную часть, которая бы сохраняла текст в хранилище и доставала его оттуда клиенту. При этом также необходимо осуществлять замену символьного представления смайлов их графическим представлением.
Для указанных целей создадим базу данных с одной таблицей. В таблице создадим 2 поля — первое поле будет счетчиком сообщений (id типа INT, имеющее атрибут Первичного ключа, автоинкрементируемое), второе будет хранить текст сообщений (тип TEXT).
Соединимся с БД:
|
1 2 3 |
@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("Cant set charset"); |
Теперь реализуем добавление сообщений в БД:
|
1 2 3 4 5 6 7 |
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; } |
И, наконец, получение сообщений:
|
1 2 3 4 5 6 |
$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. Выведем сообщения из массива в нужном месте, к примеру, сразу после формы:
|
1 2 3 4 5 |
<?php foreach($posts as $post){ echo $post['text']. "<hr />"; } ?> |
Отлично, сообщения выводятся. Пока что в них выводится символьное представление смайлов. Напишем функцию, которая бы заменяла в выводимом тексте символьное представление графическим:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
function smile($var){ $symbol = array(':mellow:', '<_<', ':)', ':wub:', ':angry:', ':(', ':unsure:', ':wacko:', ':blink:', '-_-', ':rolleyes:', ':huh:', '^_^', ':o', ';)', ':P', ':D', ':lol:', 'B)', ':ph34r:'); $graph = array('', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '<img src="img/biggrin.png">', '<img src="img/laugh.png">', '<img src="img/cool.png">', '<img src="img/ph34r.png">'); return str_replace($symbol, $graph, $var); } |
Здесь все просто — функция возвращает результат работы штатной функции str_replace(), которая, в свою очередь, ищет в строке $var вхождения подстроки из массива $symbol и меняет эти вхождения на подстроки из массива $graph.
Обработаем вывод сообщений написанной функцией:
|
1 2 3 |
foreach($posts as $post){ echo smile($post['text']). "<hr />"; } |
Осталось обработать вывод функцией htmlspecialchars() в целях защиты от XSS-уязвимости и пропустить вывод через функцию nl2br(), которая заменит символы переноса строк на теги переноса строк (br).
|
1 2 3 |
foreach($posts as $post){ echo nl2br(smile(htmlspecialchars($post['text']))). "<hr />"; } |
Вот и все. Теперь в сообщениях выводятся полноценные смайлы, а не их символьное представление. На этом наш небольшой урок завершен. Удачи Вам и до новых встреч.
Комментарии (7)