смайлики. Часть 2.
В прошлой статье я писал, как добавить к текстовому полю формы JavaScript, который добавляет в форму BB-код смайлика...
Добавляем в форму смайлики
На самом деле добавить в форму гостевой книги или комментариев смайлики не так сложно, как кажеться — нужно...
Вред от XHTML 1.0 Strict
Мода на «web 2.0», стремление подогнать сайты под какие либо стандарты вынуждают web-мастеров идти на...
Устройство тем оформления
Учебное пособие: делаем собственную тему оформления (шаблон) для системы управления сайтом Natali. Подробное описание методики интеграции своего дизайна в систему управления сайтом.
Добавляем в форму смайлики24 марта 2008На самом деле добавить в форму гостевой книги или комментариев смайлики не так сложно, как кажеться — нужно только прочитать эту статью :) Итак, возникла потребность добавить к форме гостевой книги или комментариев статей/новостей вывод смайликов, что бы при клике на «мордочку» в поле ввода текста вставлялся код смайлика. Еще желательно, что бы посетитель сайта по своему желанию открывал и закрывал таблицу со смайлами. На самом деле — ничего сложного. Писанины правда выйдет много :) В общем, начинаем. Не буду мудрить, сразу привожу JavaScript-код, который позволяет вставлять смайлики в форму. <script language="javascript" type="text/javascript">
Не важно, где вы это напишете — главное, ДО того, как будет вызвана сама функция вывода смайликов. Затем изобразим поле texarea, в которое нам нужно вставлять смайлы, и саму табличку смайликов:
Нам нужно только привязать поле textarea к нашей функции JavaScript — что мы и сделали, указав имя текстового поля message (оно же указано и в JS-функции). Обратите внимание — я указал для ячеек таблицы свойство CSS cursor: pointer — это необходимо, что бы при наведении мышки на смайлик курсор принимал вид «лапки». Для этого урока я взял 6 смайликов (или, как их называет их создатель — «колобков») замечательного художника Aiwan. В итоге вот что у нас получилось: В принципе, это все — при клике на смайлик в форму вноситься его код (обозначение), который в последствии будет заменен скриптом на соответствующую картинку (как это сделать на PHP — я расскажу в следующей статье), нам осталось только сделать форму вывода смайлов закрывающейся. Для этого я возьму еще одну функцию JavaScript, не раз меня выручавшую. Правда, она больше подходит для использования в циклах, но мне она нравиться своей простотой. Вот она: <script language="JavaScript">
Далее мы скроем таблицу со смайликами, используя свойство CSS display: none;. JavaScript-функция, приведенная выше, изменяет свойство элемента display. Нашей таблице со смайликами нужно присвоить уникальный ID, и сделать кнопочку, которая будет вызывать эту функцию. Теперь код вывода формы выглядит так: <form method="post" name="guestbook">
Обратите внимание: таблице со смайликами присвоен идентификатор — id="id123", и у кнопки вызов события onclick именно для элемента страницы с этим идентификатором. Вот что у нас получилось: Вот собственно, и все. По своему желанию вы можете добавить сколько угодно и каких угодно смайликов. Old_Chroft 02 апреля 2008
Обязательно будет :)
-AnDrOiD- 02 апреля 2008
пасибо! полезно.. только вот продолжения хочется ... а конкретнее : "который в последствии будет заменен скриптом на соответствующую картинку (как это сделать на PHP — я расскажу в следующей статье)"
- будет оно ?
df 24 марта 2008
Давно хотел оживить комментарии смайлами... Хрофт спасибо, ща бум тестить:)
|