Главная › JavaScript

Скрипт предпросмотра комментария с помощью jQuery: вариант 1

19 комментариев

Сегодня рассмотрим первый вариант скрипта предпросмотра комментария, работающего на jQuery. Чтобы не повторяться здесь, предлагаю вам прочитать характерные особенности этого скрипта, описанные в одном из моих предыдущих постов.

В исходном коде специально созданного примера вы найдете скрипт, который реализует предпросмотр.

Прошу обратить внимание, что для полноценной настройки скрипта под ваш сайт, необходимы знания технологий CSS и HTML.

По сути данный скрипт можно прицепить к любому сайту на любом движке. Для этого необходимо выполнить несколько несложных действий:

  1. Подключить к сайту фреймворк jQuery (если он не был подключен ранее), например следующим образом:

    в тег <head></head> добавить пару следующих строчек:

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2.6");</script>
  2. Подключить сам скрипт либо аналогично моему примеру, либо поместить его в отдельный js-файл и подключить по аналогии с первым пунктом (не забыв указать полный путь до скрипта):
    <script type="text/javascript" src="jquery-comment-preview.js"></script>
  3. В скрипте найти блок настроек и указать нужные параметры (мой пример сделан на основе формы комментирования WordPress):
    	/* === настройки === */
	var author_id   = '#author';  // ID поля имени автора, решетка перед ID обязательна
	var url_id      = '#url';     // ID поля ссылки, решетка перед ID обязательна
	var comment_id  = '#comment'; // ID поля комментария, решетка перед ID обязательна
	var avatar_link = 'http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=32'; // ссылка на аватар
	var show_avatar = 1 // 1 - показывать аватар, 0 - не показывать
	/* === конец настроек  === */
  4. Написать CSS-код для блока предпросмотра под свой сайт.
  5. Если вам очень захочется поменять HTML-код блока предпросмотра, то он представлен в скрипте следующей строкой:
    $j(comment_id).parent().after('<div id="comment-preview-block"><h2>Предпросмотр комментария:</h2><div id="comment-preview">'+ avatar +'<div><strong id="preview-author"><a href="'+ url +'">'+ author +'</a></strong>&nbsp;пишет:</div><div id="ctext"></div></div></div>');

    Однако имейте при этом в виду, что работа скрипта завязана на идентификаторах, которые используются в данном коде (за исключением id="comment-preview-block" и id="comment-preview"), поэтому при их изменении вам придется заменять их во всем скрипте.

В ближайшее время выложу второй вариант скрипта предпросмотра комментария, работающего также на jQuery.

* * *

ЦОП E-Customer приглашает партнеров принять участие в новогоднем розыгрыше! Фотоаппарат, мобильные телефоны и швейцарские часы уже ждут своих хозяев. 20 декабря он-лайн трансляция события с объявлением победителей. Правила участия и все детали на форуме.

Смотрите также

Скрипт предпросмотра комментария с помощью jQuery: вариант 2

22 комментария

Сегодня предлагаю вам второй вариант моего скрипта для предпросмотра комментария. Смотрим готовый пример. Скрипт находится в исходном коде данного примера. Прошу обратить внимание, что для полноценной настройки скрипта под ваш ...

jQuery-cкрипт “Добавить в закладки”

135 комментариев

Данный скрипт – это усовершенствованная версия JS-скрипта “Добавить в закладки”, который я представил читателям более года назад. Прежде всего хочу поблагодарить Женю Самборского за то, что помог мне его “добить”. ...

Предпросмотр комментария вживую с помощью jQuery: теория

12 комментариев

Уважаю такие движки (будь то форум, блог, или же какая-нибудь система управления сайтом), в которых предусмотрен предпросмотр набираемого сообщения/комментария. Он может быть полезен, к примеру, в случае, когда нужно изобразить ...

Скрипт для плавной прокрутки на верх страницы (на JavaScript и на jQuery)

66 комментариев

Предлагаю вашему вниманию скрипт, который плавно прокручивает страницу наверх при клике на соответствующую ссылку. Я сделал 2 варианта: на чистом JavaScript и на jQuery. Выбирайте тот, который вам больше по ...

Комментарии (19)

  1. Sonikelf
    15 лет 6 месяцев назад

    Ура! Спасибо!
    Ушел пробовать :)

  2. Sonikelf
    15 лет 6 месяцев назад

    3. В скрипте найти блок настроек и указать нужные параметры (мой пример сделан на основе формы комментирования WordPress

    Мм.. Слил скрипт, запихал в отдельный файлик, открыл редактором, но.. Моего интеллекта решительно не хватает для понимания места, где в этом скрипте расположен блог настроек..
    Можно поподробнее, так сказать, для дятлов? :)

  3. Dimox
    15 лет 6 месяцев назад

    Я же написал, как выглядят настройки, вот этот код там и ищите =) Начинаются со строчки:

    /* === настройки === */

  4. Sonikelf
    15 лет 6 месяцев назад

    Я же написал, как выглядят настройки, вот этот код там и ищите =) Начинаются со строчки:
    /* === настройки === */

    Всё понял. Дырявая моя голова при прочтении поста пропустила:

    В исходном коде специально созданного примера вы найдете скрипт, который реализует предпросмотр.

    И жестоко пыталась в коде скрипта гугла вышеупомянутые настройки.
    Брр. Я совсем докатился.

    PS: И вообще – Дим, так нечестно :) Раскрыв один секретик ты породил новый: http://clip2net.com/clip/m10803/1229530264-clip-22kb.jpg. Я теперь хочу теперь еще и такую плюшку :)

  5. Dimox
    15 лет 6 месяцев назад

    Всё понял. Дырявая моя голова при прочтении поста пропустила:

    Рад, что разобрался.

    Я теперь хочу теперь еще и такую плюшку :)

    Эта плюшка состряпана в плагине для WordPress в виде 2-го варианта скрипта предпросмотра. В ближайшем посте будет =) Только в таком случае тебе нет резона разбираться в скрипте из данного поста.

  6. Sonikelf
    15 лет 6 месяцев назад

    Эта плюшка состряпана в плагине для WordPress в виде 2-го варианта скрипта предпросмотра. В ближайшем посте будет =) Только в таком случае тебе нет резона разбираться в скрипте из данного поста.

    Мне бы хоть в этом пока разобраться.. Ибо выводиться он пока отказывается..

  7. Dimox
    15 лет 6 месяцев назад

    Тебе принципиально нужен этот вариант предпросмотра?

  8. Sonikelf
    15 лет 6 месяцев назад

    Dimox, как объяснить.. На блоге я буду использовать другой вариант, т.е. тот, что сейчас установлен у тебя.. Но я люблю покопаться в коде и доводить начатое до конца, а посему сижу и мучаюсь, как дурак, в попытке поставить заставить работать эту версию :) Чистая упрямость и вредность – ничего больше..

  9. Dimox
    15 лет 6 месяцев назад

    Тогда пробуй сначала сделать по аналогии с исходным кодом примера.

  10. lilumi
    15 лет 6 месяцев назад

    Спасибо тебе огроменное. Я сегодня полдня и пол инета перерыл в поисках учебников, в которых бы рассказывалось как сделать превью для любой textarea и вот уже сам начал шкрябать и решил отвлечься и почитать гугльридер. И что я вижу — твой скрипт делает именно то что мне надо! Я очень тебе благодарен.

  11. Dimox
    15 лет 6 месяцев назад

    lilumi, на здоровье. Я рад, что пригодилось ;)

  12. Николай В.
    15 лет 5 месяцев назад

    У этого скрипта есть недочет. Если удалять содержимое из textarea и при этом уменьшается кол-во строк, то высота textarea остается прежней. Хотя, это скорее не недочет скрипта предпросмотра, а того, который ответственен за изменение размера этой самой textarea.

  13. Dimox
    15 лет 5 месяцев назад

    Николай В., если вы про textarea, который ниже коментариев, то к скрипту предпросмотра это отношения не имеет. Растяжка textarea – это другой скрипт.

  14. Николай В.
    15 лет 5 месяцев назад

    Ну да, я и написал об этом в своем комментарии :). Просто, все делалось в комплексе: предпросмотр и проверка растяжки textarea.

  15. Макс
    15 лет назад

    Проблемма в следующем:
    набираем к примеру 3 строки текста или более, после нажимаем 2 раза Enter, чтобы отступить от этих строк и пишем ещё одну строку текста.
    После второго нажатия на Enter разрыв получается не только между последней строкой и всеми остальными, но и между предпоследней строкой и верхними строчками

  16. Gomer
    14 лет 7 месяцев назад

    2.Подключить сам скрипт либо аналогично моему примеру, либо поместить его в отдельный js-файл и подключить по аналогии с первым пунктом (не забыв указать полный путь до скрипта):

    Имеется ввиду, что

    нужно вставить в исходный код в том месте, где должен находиться скрипт на сайте? Простите я чайник.

  17. ПафНутиЙ
    14 лет назад

    Как и обещал смог прикрутить Ваш скрипт к DataLife Engine, одновременно упростив его, т.к. поля автор, e-mail, и сайт впринципе не нужны.
    В итоге имеем вот такой код:

    var $j = jQuery.noConflict();

$j(document).ready(function() {
	$j('#comments').one('focus',function() {
	//
	//Код берём из comments.tpl и подгоняем методом научного тыка.
		$j('#comments').parent().after('<div class="comments"><h2>Предпросмотр комментария</h2><div class="comm-foto"><img src="{THEME}/images/noavatar.png" border="0" alt="" width="80" /></div><div id="ctext" class="comment"></div><div class="clr"></div></div>');
	});
	
	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/\.gif" />')
		.replace(/\s*\n\s*/g, '<br />');
		$j('#ctext').html(comment);
	});

})

    Пришлось только переписать обработку тегов, используемых при написании комментария. и осталась незакрытая проблема отображения в окошке предпросмотра исходного кода, он обрабатывается браузером как элемент страницы, а не как текст.

  18. One source
    13 лет 9 месяцев назад

    Было бы неплохо сразу к объяснялке приделать эту функцию для просмотра