В данной статье, я бы хотел рассказать вам о одном замечательном скрипте, реализованном на jQuery.
Самая главная особенность этого скрипта в том, что просмотр происходит без перезагрузки страницы.
И так, о всем с самого начала:
Особенности именно этого скрипта:
- Просмотр происходит в живую, т. е. без перезагрузки страницы.
- Этот скрипт можно прикрутить к любому движку, включая WordPress.
- Если у комментатора отключена в браузере поддержка JavaScript, то это никак не скажется формt комментирования. Форма будет выглядеть стандартно, как будто никакого скрипта и нет.
- Кросбраузерно.
Процесс установки:
- Подключите фреймворк 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>
- <script type=»text/javascript» src=»http://www.google.com/jsapi»></script>
- Подключите скрипт по анологии с первым пунктом или через
- <script type=»text/javascript»>
/*<![CDATA[*/
Здесь скрипт
/*]]>*/
</script>
- <script type=»text/javascript»>
- В скрипте найдите блок настроек и укажите нужные параметры (следующий пример сделан на основе формы комментирования 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 — не показывать
/* === конец настроек === */
- /* === настройки === */
- Написать 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.
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
у меня ошибка при подключении фреймворк jquery. 7 строка видимо там где версия написана и скрипт из-за этого не вызывается
Ответить | Цитировать
Ответить | Цитировать