Главная » Создание сайтов » Верстка » Предпросмотр комментариев с помощью jQuery

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

Предпросмотр комментариев с помощью jQuery
В данной статье, я бы хотел рассказать вам о одном замечательном скрипте, реализованном на jQuery.

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

И так, о всем с самого начала:

Особенности именно этого скрипта:

  • Просмотр происходит в живую, т. е. без перезагрузки страницы.
  • Этот скрипт можно прикрутить к любому движку, включая WordPress.
  • Если у комментатора отключена в браузере поддержка JavaScript, то это никак не скажется формt комментирования. Форма будет выглядеть стандартно, как будто никакого скрипта и нет.
  • Кросбраузерно.

Процесс установки:

  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. Подключите скрипт по анологии с первым пунктом или через
    • <script type="text/javascript">
      /*<![CDATA[*/
      Здесь скрипт
      /*]]>*/
      </script>
  3. В скрипте найдите блок настроек и укажите нужные параметры (следующий пример сделан на основе формы комментирования WordPress):
    • /* === настройки === */
      var show_text = 'Предпросмотр';
      var hide_text = 'Скрыть предпросмотр';
      var textarea_name = 'comment'; // значение параметра «name» поля textarea, к которому прицепляем скрипт (<textarea name="?????" ...>)
      var author_id = 'author'; // значение параметра «id» поля имени автора
      var url_id = 'url'; // значение параметра «id» поля ссылки
      var avatar_link = 'http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=32'; // ссылка на аватар
      var show_avatar = 1 // 1 — показывать аватар, 0 — не показывать
      /* === конец настроек === */
  4. Написать CSS-код для блока предпросмотра под свой сайт, либо воспользоваться готовыми стилями из примера.

CSS:
/* стили для предпросмотра */
#jquery-comment-preview {
position: relative;
overflow: hidden;
background: #EEE;
height: 28px;
padding: 0 1px;
border: solid #D6D3D3;
border-width: 1px 1px 0;
}
ol#comment-preview {
padding: 10px;
list-style: none;
background: #FFF;
border: 1px solid #CCC;
width: 480px;
}
#comment-preview .avatar {
float: right;
border: 1px solid #EEE;
padding: 2px;
background: #FFF;
}
#preview-tab {
position: absolute;
margin: 3px;
background: #FFF;
}
#preview-tab div {
cursor: pointer;
font-size: 12px;
line-height: 1;
}
#preview-tab a {
float: left;
text-decoration: none;
padding: 4px 7px;
border: 1px solid #E4E4E4;
border-right: 1px solid #C9C9C9;
border-bottom: 1px solid #C9C9C9;
}
#preview-tab a:hover {
background: #FEF8C7;
}
#preview-tab a:active {
border: 1px solid #DDD;
border-right: 1px solid #E9E9E9;
border-bottom: 1px solid #E9E9E9;
}
.avatar {
float: right;
display: inline;
padding: 2px;
border: 1px solid #DDD;
margin: 5px 0 5px 10px;
}
#textarea_clone {
height: 0;
overflow: hidden;
}

Script:
<script type="text/javascript">
/*<![CDATA[*/

var $j = jQuery.noConflict();

$j(document).ready(function() {

/* === настройки === */
var show_text = 'Предпросмотр';
var hide_text = 'Скрыть предпросмотр';
var textarea_name = 'comment'; // значение параметра "name" поля textarea, к которому прицепляем скрипт (<textarea name="?????" ...>)
var author_id = 'author'; // значение параметра "id" поля имени автора
var url_id = 'url'; // значение параметра "id" поля ссылки
var avatar_link = 'http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=32'; // ссылка на аватар
var show_avatar = 0 // 1 - показывать аватар, 0 - не показывать
/* === конец настроек === */

var textarea = $j('textarea[name="'+ textarea_name +'"]');
var textarea_id = '#' + $j(textarea).attr('id');
var avatar = '';
if (show_avatar == 1) avatar = '<img src="'+ avatar_link +'" alt="" class="avatar" />';
var comment = '';

$j(textarea_id).wrap('<div id="jquery-comment-wrap"></div>');
$j(textarea_id).before('<div id="jquery-comment-preview"></div>');
$j('#jquery-comment-preview').prepend('<div id="preview-tab"><div><a>'+ show_text +'</a></div></div>');

$j('#jquery-comment-wrap, #jquery-comment-preview').width($j(textarea).width());

$j('#preview-tab div').toggle(
function() {
comment = $j(textarea_id).val();
comment_preview = comment.replace(/(<\/?)script/g,'$1noscript')
.replace(/(<blockquote[^>]*>)/g, '\n$1')
.replace(/(<\/blockquote[^>]*>)/g, '$1\n')
.replace(/\r\n/g, '\n')
.replace(/\r/g, '\n')
.replace(/\n\n+/g, '\n\n')
.replace(/\n?(.+?)(?:\n\s*\n)/g, '<p>$1</p>')
.replace(/<p>\s*?<\/p>/g, '')
.replace(/<p>\s*(<\/?blockquote[^>]*>)\s*<\/p>/g, '$1')
.replace(/<p><blockquote([^>]*)>/ig, '<blockquote$1><p>')
.replace(/<\/blockquote><\/p>/ig, '<p></blockquote>')
.replace(/<p>\s*<blockquote([^>]*)>/ig, '<blockquote$1>')
.replace(/<\/blockquote>\s*<\/p>/ig, '</blockquote>')
.replace(/\s*\n\s*/g, '<br />');

var author = $j('#'+ author_id).val();
var url = $j('#'+ url_id).val();
author = '<a href="'+ url +'">'+ author +'</a>';
if (url == '') { author = $j('#author').val(); }
var preview_html = '<ol id="comment-preview"><li>'+ avatar +'<strong>'+ author +'</strong> пишет:<br />'+ comment_preview +'</li></ol>';

$j(textarea).after('<div id="textarea_clone"></div>');
$j(textarea).clone().prependTo($j('#textarea_clone'));
$j('#textarea_clone textarea').text(comment);
$j('#textarea_clone').hide();
$j(textarea).replaceWith('<div id="comment_preview"></div>');
$j('#comment_preview').html(preview_html);
$j('#preview-tab a').text(hide_text);
},
function() {
$j('#textarea_clone').remove();
$j('#comment_preview').replaceWith(textarea);
$j(textarea).text(comment);
$j('#preview-tab a').text(show_text);
}
)

})

/*]]>*/
</script>

Пример этого кода можно увидеть у нас в блоге.

Есть еще один вариант предпросмотра комментариев. Суть заключается в следующем: как только вы ставите курсор в поле комментария и начинаете набирать текст, под этим полем тут же появляется предпросмотр набираемого комментария. А с помощью CSS этот предпросмотр представляется в таком же виде, как уже выглядят опубликованные выше комментарии.

Мне показался этот пример не очень хорошим. Он больше подойдет блогом, которые очень усердно комментируют и не хотят перечитывать свои комментария. Может быть мы скоро такой поставим... А пока больше подойдет вариант, который описан выше.

За примеры скриптов, большое спасибо Dimox.

С уважением, Vasilenko Ivan!

Комментарии — 5 комментариев

  1. #2344 Юрий в 15:07, 6 июля 2009:

    Ответить | Цитировать

    Спасибо за инфу!

  2. #2501 WebMast в 8:15, 13 июля 2009:

    Ответить | Цитировать

    Пожалуйста...

  3. #3378 Паша в 10:50, 6 августа 2009: (подписался)

    Ответить | Цитировать

    проблема в следующем

    у меня ошибка при подключении фреймворк jquery. 7 строка видимо там где версия написана и скрипт из-за этого не вызывается

  4. #3389 WebMast в 16:49, 6 августа 2009:

    Ответить | Цитировать

    Чесно, я так сразу немогу сказать в чем может быть проблема... Если что, можешь обратиться ко мне по icq. Мои контакты>

  5. #11390 Mope в 13:53, 19 апреля 2011:

    Ответить | Цитировать

    Решение интересное. спасибо.

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting