-
qwerty - 2 июля 2010 22:28идея хорошая. но зачем jquery? можно ли без него? ради одной такой функции не хочется его подключать -
ПафНутиЙ - 2 июля 2010 22:42Без jQuery никак не получится, это раз, а во вторых в DLE 9.0 всёравно будет "вшита" библиотека. -
Acuna - 4 июля 2010 19:14А нуко ся... Класс! Отлично работает! Спасибо!
Только плохо, что bb-коды не отображаются...Хотя нет, все работает отлично... -
DVMade - 9 июля 2010 11:55У меня нифига не выходит, все перепробывал, не появляется предпросмотр и все! Вот адрес сайта dvmade.ru помогите!
-
DVMade - 9 июля 2010 12:32Сорри, разобрался, а теперь подскажите как сделать, что бы предпросмотр выводился не низу формы а вверху?
-
ПафНутиЙ - 9 июля 2010 14:41заменить слово after в скрипте на before
-
DVMade - 9 июля 2010 17:31Кстати, вот еще одна трабла.. Просмотр коммента скачет с правую сторону всегда! Ниуког такого нету и как исправитЬ?
-
raven4eg - 18 августа 2010 13:15Хм, работает. НО, есть смысл задумать о том, как обрабатывать клики на кнопки панели bb-кодов. -
ПафНутиЙ - 18 августа 2010 13:22Не совсем понял вопрос. Вроде бы всё корректно обрабатывается.
-
sharkoster - 26 августа 2010 13:19Цитата: ПафНутиЙНе совсем понял вопрос. Вроде бы всё корректно обрабатывается.
Именно в datalife 9.0 не работают клики на некоторые BB коды, а именно:
вставка смайлика, вставка картинки, вставка ссылок, цвет текста... В общем все то что в dle 9.0 сделано через jQuery. Также не работает красивым хинт вот отсюда:
_http://4dle.ru/2010/08/21/novyjj-krasivyjj-khint-tooltip-na-jquery.html
Этот хинт кстати с BB кодами нормально работает, но после установки этого "предпросмотра" не работает и он. Если убрать этот хинт проблема с BB кодами всеравно остается.
Я подписался на комментарии, жду может апгрейдиш -
ПафНутиЙ - 26 августа 2010 13:57Цитата: sharkosterЯ подписался на комментарии, жду может апгрейдиш
Сейчас много проблем по работе, если и смогу заняться этим вопросом, то не раньше чем через неделю. Ещё даже не смотрел 9-ю версию DLE, но подозреваю, что дело в совпадении имён функций, или что-то в этом роде. -
sharkoster - 26 августа 2010 16:11Цитата: ПафНутиЙЕщё даже не смотрел 9-ю версию DLE, но подозреваю, что дело в совпадении имён функций, или что-то в этом роде.
Окей .Подожду.
Предпросмотр комментария (jQuery edition)
1-07-2010
Раздел: Статьи
Недавно мне попался на глаза интересный jQuery скрипт для предпросмотра комментария так сказать в реальном времени. И вот мне очень захотелось прикрутить этот скрипт к DLE, как оказалось впоследствии, дело не столь сложное.
Плюсы данного скрипта:
1. Предпросмотр комментария происходит, без перезагрузки страницы, т.е. в реальном времени.
2. При отключенных javascript`ах в браузере предпросмотр просто не будет показываться, т.е. ничего не расползётся и т.д.
Демонстрацию данного скрипта вы можете увидеть прямо в форме добавления комментария на этом сайте, если начнёте набирать текст.
А теперь обо всём по порядку.
Предупреждаю сразу, скрипт нужно подгонять под каждый конкретный сайт, для корректного отображения предпросмотра.
Скрипт можно разделить на две составляющие.
1. На первой части остановимся чуть позже, а вот вторая часть это несложный обработчик bb-кодов:
Обратите внимание на предпоследнюю строку, идентификатор #ctext, указанный в этой строке - это идентификатор блока с текстом комментария в предпросмотре.
2. А теперь самое сложное - первая часть скрипта.
Основной код - это обычный html-код
взятый из шаблона comments.tpl и немного поправленный.
- Нужно убрать из шаблона весь "мусор" - это все dle-теги.
- Вместо тега {phоto} нужно поставить ссылку на изображение аватарки.
- Вместо тега {commеnt} вставить блок с идентификатором комментария, о котором я говорил выше, т.е. вот такой вот код:
Вот собственно и всё, что требуется для красивого предпросмотра комментария в процессе набора.
С теорией разобрались, теперь установка:
1. Подключаем, если ещё не подключена, библиотеку jquery:
2. Подключаем, заранее поправленный под свой сайт, скрипт предпросмотра комментария (качаем его чуть ниже).
Замечу, что папка со скриптом на вашем сайте может отличаться от указанной в коде.
ВСЁ! Наслаждаемся.
Плюсы данного скрипта:
1. Предпросмотр комментария происходит, без перезагрузки страницы, т.е. в реальном времени.
2. При отключенных javascript`ах в браузере предпросмотр просто не будет показываться, т.е. ничего не расползётся и т.д.
Демонстрацию данного скрипта вы можете увидеть прямо в форме добавления комментария на этом сайте, если начнёте набирать текст.
А теперь обо всём по порядку.
Предупреждаю сразу, скрипт нужно подгонять под каждый конкретный сайт, для корректного отображения предпросмотра.
Скрипт можно разделить на две составляющие.
1. На первой части остановимся чуть позже, а вот вторая часть это несложный обработчик bb-кодов:
var comment = '';
$j('#comments').keyup(function() {
comment = $j(this).val();
comment = comment.replace(/(<\/?)script/g,'$1noscript')
.replace(/\r\n/g, '\n')
.replace(/\r/g, '\n')
.replace(/\n\n+/g, '\n\n')
.replace(/\[b\](.+?)\[\/b\]/g, '<strong>$1</strong>')
.replace(/\[i\](.+?)\[\/i\]/g, '<i>$1</i>')
.replace(/\[s\](.+?)\[\/s\]/g, '<s>$1</s>')
.replace(/\[u\](.+?)\[\/u\]/g, '<u>$1</u>')
.replace(/\[left\](.+?)\[\/left\]/g, '<div align="left">$1</div>')
.replace(/\[right\](.+?)\[\/right\]/g, '<div align="right">$1</div>')
.replace(/\[center\](.+?)\[\/center\]/g, '<div align="center">$1</div>')
.replace(/\[hide\](.+?)\[\/hide\]/g, '<div class="quote">Это скрытый текст</div>')
.replace(/\[url=(.+?)\]/g, '<a href="$1" target="_blank">')
.replace(/\[\/url\]/g, '</a>')
.replace(/\[leech=(.+?)\]/g, '<a href="$1" target="_blank">')
.replace(/\[\/leech\]/g, '</a>')
.replace(/\[img\](.+?)\[\/img\]/g, '<img src="$1" alt="" title="" />')
.replace(/\[email=(.+?)\]/g, '<a href="mailto:$1">')
.replace(/\[\/email\]/g, '</a>')
.replace(/\[color=(.+?)\]/g, '<span style="color:$1">')
.replace(/\[\/color\]/g, '</span>')
.replace(/\[quote=(.+?)\]/g, '<div class="title_quote">Цитата: $1</div><div class="quote">')
.replace(/\[quote\](.+?)/g, '</div><div class="quote">$1')
.replace(/\[\/quote\]/g, '</div>')
.replace(/\[spoiler=(.+?)\]/g, '<div class="title_spoiler"><a href="\#">$1</a></div><div class="text_spoiler">')
.replace(/\[spoiler\](.+?)/g, '<div class="title_spoiler"><a href="\#">Спойлер</a></div><div class="text_spoiler">$1')
.replace(/\[\/spoiler\]/g, '</div>')
.replace(/\[code\](.+?)\[\/code\]/g, 'предпросмотр исходного кода пока недоступен')
.replace(/\:(.+?)\:/g, '<img style="vertical-align: middle;border: none;" alt="" src="/engine/data/emoticons/$1.gif" />')
.replace(/\s*\n\s*/g, '<br />');
$j('#ctext').html(comment);
});
$j('#comments').keyup(function() {
comment = $j(this).val();
comment = comment.replace(/(<\/?)script/g,'$1noscript')
.replace(/\r\n/g, '\n')
.replace(/\r/g, '\n')
.replace(/\n\n+/g, '\n\n')
.replace(/\[b\](.+?)\[\/b\]/g, '<strong>$1</strong>')
.replace(/\[i\](.+?)\[\/i\]/g, '<i>$1</i>')
.replace(/\[s\](.+?)\[\/s\]/g, '<s>$1</s>')
.replace(/\[u\](.+?)\[\/u\]/g, '<u>$1</u>')
.replace(/\[left\](.+?)\[\/left\]/g, '<div align="left">$1</div>')
.replace(/\[right\](.+?)\[\/right\]/g, '<div align="right">$1</div>')
.replace(/\[center\](.+?)\[\/center\]/g, '<div align="center">$1</div>')
.replace(/\[hide\](.+?)\[\/hide\]/g, '<div class="quote">Это скрытый текст</div>')
.replace(/\[url=(.+?)\]/g, '<a href="$1" target="_blank">')
.replace(/\[\/url\]/g, '</a>')
.replace(/\[leech=(.+?)\]/g, '<a href="$1" target="_blank">')
.replace(/\[\/leech\]/g, '</a>')
.replace(/\[img\](.+?)\[\/img\]/g, '<img src="$1" alt="" title="" />')
.replace(/\[email=(.+?)\]/g, '<a href="mailto:$1">')
.replace(/\[\/email\]/g, '</a>')
.replace(/\[color=(.+?)\]/g, '<span style="color:$1">')
.replace(/\[\/color\]/g, '</span>')
.replace(/\[quote=(.+?)\]/g, '<div class="title_quote">Цитата: $1</div><div class="quote">')
.replace(/\[quote\](.+?)/g, '</div><div class="quote">$1')
.replace(/\[\/quote\]/g, '</div>')
.replace(/\[spoiler=(.+?)\]/g, '<div class="title_spoiler"><a href="\#">$1</a></div><div class="text_spoiler">')
.replace(/\[spoiler\](.+?)/g, '<div class="title_spoiler"><a href="\#">Спойлер</a></div><div class="text_spoiler">$1')
.replace(/\[\/spoiler\]/g, '</div>')
.replace(/\[code\](.+?)\[\/code\]/g, 'предпросмотр исходного кода пока недоступен')
.replace(/\:(.+?)\:/g, '<img style="vertical-align: middle;border: none;" alt="" src="/engine/data/emoticons/$1.gif" />')
.replace(/\s*\n\s*/g, '<br />');
$j('#ctext').html(comment);
});
Обратите внимание на предпоследнюю строку, идентификатор #ctext, указанный в этой строке - это идентификатор блока с текстом комментария в предпросмотре.
2. А теперь самое сложное - первая часть скрипта.
Основной код - это обычный html-код
<div class="comments"><h2>Предпросмотр комментария</h2><div class="comm-foto"><img src="http://yoursite.ru/theme/yourtheme/images/noavatar.png" border="0" alt="" width="80" /></div><div id="ctext" class="comment"></div><div class="clr"></div></div>
взятый из шаблона comments.tpl и немного поправленный.
- Нужно убрать из шаблона весь "мусор" - это все dle-теги.
- Вместо тега {phоto} нужно поставить ссылку на изображение аватарки.
- Вместо тега {commеnt} вставить блок с идентификатором комментария, о котором я говорил выше, т.е. вот такой вот код:
<div id="ctext"></div>
Вот собственно и всё, что требуется для красивого предпросмотра комментария в процессе набора.
С теорией разобрались, теперь установка:
1. Подключаем, если ещё не подключена, библиотеку jquery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
2. Подключаем, заранее поправленный под свой сайт, скрипт предпросмотра комментария (качаем его чуть ниже).
<script src="{THEME}/js/comment-preview.js" type="text/javascript"></script>
Замечу, что папка со скриптом на вашем сайте может отличаться от указанной в коде.
ВСЁ! Наслаждаемся.
Скачать скрипт предпросмотра комментария
Cлучайные материалы
Показать1740