Случилось так, что мне надоело, при вставке стороннего, то есть не совсем «стороннего», а своего, но не стандартного, смайлика, каждый раз лазить в Файловый менеджер (далее - ФМ) или упорно вспоминать адрес расположения картинки, восстанавливая в уме структуру папок на хоте сайта ... Да и смайлов у меня не мало, правда и «много» - тоже не скажешь, достаточно. Единственно, они не систематизированы, а просто свалены в разные папки... Но это, к данной заметке, отношения не имеет. Так вот, задался я вопросом: «Как, наиболее просто и удобно всё это организовать?». Вот критерии параметров, должных к выполнению: - 1. Должно быть просто.
- 2. Должно быть удобно.
- 3. По возможности - использовать системные (установленные по умолчанию) скрипты.
- 4. Не должно быть ограничений ни на количество групп, ни на количество (в разумных пределах) смайлов.
- 5.
Без сомнения, уже существует куча написанных, и, возможно, более «лучших» (по параметрам, возможностям и т.п.) убеждать вас, что этот (мой), вариант - самый «правильный» - не хочу и не буду, тем более, не факт. ヅ
Не факт, также, что другие лучше ... ヅ Предварительные размышления, привели меня к выводу, что подобный скрипт можно сделать в двух, вариантах: - первый - содержание окна из контента внешнего файла;
- второй - генерация содержимого посредством JavaScript (циклом).
Ниже опишу первый вариант. Кому интересен второй - пишите в комментариях.
Контент, а именно смайлы, у меня будут располагаться в стандартном аякс (_uWnd) окне. Актуально только для сайтов в системе юКоз (uCoz) Создаётся новое _uWnd окно следующим структурным кодом: Code new _uWnd(name, title, width, height, opts, content, menuitems, app)
Где: name string - уникальное имя окошка. Нигде не отображается, но используется при работе с такими окнами. title string - заголовок окошка. Отображается в шапке. width integer - ширина окошка. height integer - высота окошка. opts object - дополнительные параметры:
А вот этим кодом, создаётся окно для дополнительных смайликов: Code <a href="javascript://" onclick="new _uWnd('smiles_1', 'Дополнительные смайлики', 500,500, {fadespeed:0, fadeclosespeed:0, fadetype:0, fadeclosetype:0, popup:0, autosizewidth:0, autosize:0, hideonresize:0, shadow:0, align:'center'}, {url:'/_content/_publ/cont/newSmiles/_sml_s.xml'});return false;"><b>-=Дополнительные смайлики #1=-</b></a>
Где: smiles_1 - имя окна. Уникальное. url:'/_content/_publ/cont/newSmiles/_sml_s.xml' - ссылка на ваш файл с смайлами.
А вот так, должен выглядеть сам «xml»-файл с контентом, в виде картинок смайлов. Code
<ajax>
<cmd p="content"><![CDATA[
<script type="text/javascript">function selSml(){_uWnd.close('smiles_1');}</script> /* Скрипт для закрытия окна при выборе смайла */
<style type="text/css">
#hereSml img:hover{border:1px dashed #F00;}#hereSml img{cursor:pointer;}
</style>
<fieldset>
<legend>Выберите смайлик</legend>
<div id="hereSml">
<img src="http://likbezz.ucoz.ru/_theme/_sml/s/s01.gif" onclick="emoticon('[img]http://likbezz.ucoz.ru/_theme/_sml/s/s01.gif[/img]','message'),selSml();return false;"> <img src="http://likbezz.ucoz.ru/_theme/_sml/s/s02.gif" onclick="emoticon('[img]http://likbezz.ucoz.ru/_theme/_sml/s/s02.gif[/img]','message'),selSml();return false;"> <img src="http://likbezz.ucoz.ru/_theme/_sml/s/s03.gif" onclick="emoticon('[img]http://likbezz.ucoz.ru/_theme/_sml/s/s03.gif[/img]','message'),selSml();return false;"> <img src="http://likbezz.ucoz.ru/_theme/_sml/s/s04.gif" onclick="emoticon('[img]http://likbezz.ucoz.ru/_theme/_sml/s/s04.gif[/img]','message'),selSml();return false;"> <img src="http://likbezz.ucoz.ru/_theme/_sml/s/s05.gif" onclick="emoticon('[img]http://likbezz.ucoz.ru/_theme/_sml/s/s05.gif[/img]','message'),selSml();return false;"> <img src="http://likbezz.ucoz.ru/_theme/_sml/s/s06.gif" onclick="emoticon('[img]http://likbezz.ucoz.ru/_theme/_sml/s/s06.gif[/img]','message'),selSml();return false;"> <img src="http://likbezz.ucoz.ru/_theme/_sml/s/s07.gif" onclick="emoticon('[img]http://likbezz.ucoz.ru/_theme/_sml/s/s07.gif[/img]','message'),selSml();return false;"> <img src="http://likbezz.ucoz.ru/_theme/_sml/s/s08.gif" onclick="emoticon('[img]http://likbezz.ucoz.ru/_theme/_sml/s/s08.gif[/img]','message'),selSml();return false;"> <img src="http://likbezz.ucoz.ru/_theme/_sml/s/s09.gif" onclick="emoticon('[img]http://likbezz.ucoz.ru/_theme/_sml/s/s09.gif[/img]','message'),selSml();return false;"> <img src="http://likbezz.ucoz.ru/_theme/_sml/s/s10.gif" onclick="emoticon('[img]http://likbezz.ucoz.ru/_theme/_sml/s/s10.gif[/img]','message'),selSml();return false;"> <img src="http://likbezz.ucoz.ru/_theme/_sml/s/s11.gif" onclick="emoticon('[img]http://likbezz.ucoz.ru/_theme/_sml/s/s11.gif[/img]','message'),selSml();return false;"> <img src="http://likbezz.ucoz.ru/_theme/_sml/s/s12.gif" onclick="emoticon('[img]http://likbezz.ucoz.ru/_theme/_sml/s/s12.gif[/img]','message'),selSml();return false;"> <img src="http://likbezz.ucoz.ru/_theme/_sml/s/s13.gif" onclick="emoticon('[img]http://likbezz.ucoz.ru/_theme/_sml/s/s13.gif[/img]','message'),selSml();return false;"> <img src="http://likbezz.ucoz.ru/_theme/_sml/s/s14.gif" onclick="emoticon('[img]http://likbezz.ucoz.ru/_theme/_sml/s/s14.gif[/img]','message'),selSml();return false;"> <img src="http://likbezz.ucoz.ru/_theme/_sml/s/s15.gif" onclick="emoticon('[img]http://likbezz.ucoz.ru/_theme/_sml/s/s15.gif[/img]','message'),selSml();return false;">
</div>
</fieldset>
]]>
</cmd>
</ajax>
Инфо: emoticon() - это функция, по умолчанию прописана в форме добавления комментария для форума. То есть, если ставите не на форум, нужно будет её добавить. Либо в шаблон, либо в «XML»-файл. В файлах примера, она уже прописана. На всякий ... А это, пример .... Точно по данному коду.
Конечно, можно оформить и поинтереснее, кнопочку, там, красивую забацать, и типа ... Это уже от вас зависит... ヅ
Естественно, можно сделать не один набор смайлов, а несколько ...
Вот так, например ...
Короче, суть ясна, я думаю, прикладываю файл с моими смайлами и примером- вам останется только что? - залить из себе на сайт, и переписать пути. Как это делается? - очень просто, если у вас есть, например, стандартный блокнот, (это такая программа) ...
Смотреть видео:
Не забываем прописывать правильные пути до смайлов. ヅ Живые примеры можно наблюдать на форуме, и в форме добавления комментариев, если ещё есть ...
Обсудить статью и вопросы по материалу можно оставить вот в этой теме на форуме:
«Как сделать дополнительные смайлики?»
P.S.Всем удачи... ヅ
Flesh.
Источник: Дополнительные смайлики на форум. Для юКоз (uCoz). JavaScript (циклы), Создание _uWnd окна, окошка, аякс, скачать, примеры | 