Хочу напомнить, что в предыдущих статьях я описал некоторые методы создания, а именно создание самой формы, подключение jquery, прописали javascript для вставки кода в форму. А сегодня мы сделаем вставку в форму смайликов. Определяемся, что нам необходимо для добавления смайлов в комментарии в форму добавления сообщений и последующий вывод их в сообщениях если это форум или комментариях если это статьи на сайте или новости и тому подобное.
Первое, что нам необходимо это конечно сами графичесские смайлики которые все и так знают. Таких изображений весёлых подвижных и разноцветных в сети интернет очень много поетому я не буду давать вам сами смайлы каждый может подобрать их под свой дизайн по цвету, размеру, простые или в формате gif подвижные. Все зависит от ваших потребностей.
Второе, что нам необходимо это создать сам скрипт, который будет заносить данные в форму и прописать имена смайликов которые можно придумать самим.
И так поехали кодировать. Первое дело создадим ссылку на добавление смайлов в форму.
Код HTML
<a class="usr_bb_button" href="javascript:void(0)" onclick="$('#smilespanel-message').slideToggle('fast')" title="Вставить смайл">
<img src="/images/bbcode/smiles.png" border="0" alt="Вставить смайл" />
</a>
Вставили ссылочку теперь можно создать файл с прописанными названиями смайлов, назовем его images.src например, ваше название может быть любое. Теперь сам код в нем будет выглядеть так.
Код
01.gif *angel*
02.gif *angry*
03.gif *applause*
04.gif *bazar*
05.gif *beat*
06.gif *beer*
07.gif *beer2*
08.gif *blind*
09.gif *bokali*
10.gif *boyan*
Для начала пропишем примерно 10 смайлов, вы можете добавлять сколько угодно просто дописав их в файл. Далее создаем вывод самих смайлов с помощью раскрывающегося списка таким образом. После закрывающегося тега формы вставим следующий код.
Код НТМL
</div><div class="usr_msg_smilebox" id="smilespanel-message" style="display:none">
<?php include dirname(__FILE__) . "/images2.tpl" ?>
</div>
Как видите здесь мы подключаем для погрузки файл в котором мы и пропишим ссылки на сами смайлики. В то место где мы будим их хранить, создаем теперь файл images2.tpl у вас может другое название и расширение тоже. Выглядеть он будет примерно так.
Код HTML
<img class="smile_bb"src="images/forum/smiles/01.gif" border=0 alt="*angel*" onclick="emoticon('*angel*')">
<img class="smile_bb"src="images/forum/smiles/02.gif" border=0 alt="*angry*" onclick="emoticon('*angry*')">
<img class="smile_bb"src="images/forum/smiles/03.gif" border=0 alt="*applause*" onclick="emoticon('*applause*')">
<img class="smile_bb"src="images/forum/smiles/04.gif" border=0 alt="bazar" onclick="emoticon('*bazar*')">
<img class="smile_bb"src="images/forum/smiles/05.gif" border=0 alt="*beat*" onclick="emoticon('*beat*')">
<img class="smile_bb"src="images/forum/smiles/06.gif" border=0 alt="*beer*" onclick="emoticon('*beer*')">
<img class="smile_bb"src="images/forum/smiles/07.gif" border=0 alt="*beer2*" onclick="emoticon('*beer2*')">
<img class="smile_bb"src="images/forum/smiles/08.gif" border=0 alt="*blind*" onclick="emoticon('*blind*')">
<img class="smile_bb"src="images/forum/smiles/09.gif" border=0 alt="*bokali*" onclick="emoticon('*bokali*')">
<img class="smile_bb"src="images/forum/smiles/10.gif" border=0 alt="*boyan*" onclick="emoticon('*boyan*')">
Тут думаю ничего объяснять не нунжно просто пути к нашим смайликам. Далее теперь нам необходимо создать javascript который будет при клике на определенного смайлика добавлять его в форму. Это будет выглядеть примерно так.
Код Javascript
function emoticon(theSmilie)
{
doInsert(" " + theSmilie + " ", "", false);
}
Это код можно дописать в любой подключенный к данной странице файл с расширением js. Теперь переходим к реализации этого с помощью php функций. Для этого создадим ещё один php файл и вставим в него следующий класс.
Код PHP
<?php class ImagesIterator { var $cur = 0; var $data; function ImagesIterator($file) { $this->data = file($file); } function hasNext() { return $this->cur < sizeof($this->data); } function next() { $data = split(" ", $this->data[$this->cur]); $this->cur++; return new EmotionIcon(str_replace("\n", "", $data[1]), $data[0]); } }
class EmotionIcon { var $emotion; var $src; function EmotionIcon($emotion, $src) { $this->emotion = $emotion; $this->src = $src; } } ?>
Теперь объясняю. Здесь мы создаем два класса с методами на php. Первый класс ImagesIterator и второй EmotionIcon которые и делают нам выборку и вставку в форму определенного кода смайла, в нашем случае это имя. Теперь нам необходимо подключить сам класс для выполнения его методов в нашей форме. В первых статьях мы создавали файл SimpleBB.php теперь ниже допишим еще следующее. Сразу после всего кода, где мы создавали парсер вставим следующее.
Код PHP
$text = preg_replace($search, $replace, $text);
$iterator = new ImagesIterator(CLASSES_PATH . "View/Forum/images.src");
while($iterator->hasNext()) {
$data = $iterator->next();
$text = str_replace($data->emotion, '<img src="images/forum/smiles/' . $data->src . '">', $text);
}
return $text;
}
}
?>
Вот так должен выглядеть конец файла с закрывающим тегом php. Здесь мы прописываем пути, например у меня файл images.src лежит в папке виды/форум/images.src , вы прописываете свой путь, далее прописываем путь к самим смайлам у меня например они лежат в папке images/forum/smiles/ и далее функция сама подставить какой смайл мы вставили. Это мое решение, вы конечно можете решить и другими методами, а вот решил сделать так. Есть предложения лучше, пожалуйста предлагайте. Идем дальше.
Выводы: При клике на иконку смайлика выпадает панель с разными смайликами и при нажатии на смайл добавилось название смайлика в форму. Ну вот в принципе и все на сегодня пока, что не пончтно спрашиваем не стисняемся. Обязательно всем отвечу, и объясню. До новых встреч!
PS
Не забывайте подключать файлы с классами и функциями к тем файлам которые с ними работают.