Money-Top

Расширенные комментарии v2 для uCoz


Установка:

Зайдите в ПУ > Управление дизайном > Форма добавления комментариев и замените код на этот:
<div class="comment-add">
<div class="ca-top">Оставить комментарий</div>
<div class="ca-form">
<div class="caf-extra-block">
<div class="caf-extra">
<label for="caf-plus">Достоинства</label>
<textarea id="caf_plus"></textarea>
</div>
<div class="caf-extra">
<label for="caf-minus">Недостатки</label>
<textarea id="caf_minus"></textarea>
</div>
</div>
<div class="caf-main">
<label for="caf-comm">Комментарий</label>
<textarea id="caf_comm"></textarea>
</div>
<div class="caf-default">
<textarea name="message" id="message"></textarea>
</div>
<?if($SECURITY_CODE$)?>$SECURITY_CODE$<?endif?>
<div class="ca-bottom">
<div class="cab-submit">
<input id="addcBut" type="submit" name="submit" value="Отправить">
</div>
<div class="cab-error">$ERROR$</div>
<div class="cab-select-extra">
<input id="change_extra" type="button" value="Расширенный" title="Изменить тип комментария">
</div>
</div>
</div>

<script>
$('#caf_plus, #caf_minus, #caf_comm').bind('keyup keydown', function(){
let valComm = $('#caf_comm').val(), isActive = $('.comment-add .caf-extra-block').hasClass('caf-active');
if(isActive){
let valPlus = $('#caf_plus').val(), valMinus = $('#caf_minus').val();
valPlus = (valPlus ? '[b]Достоинства:[/b]\n'+valPlus+'\n\n' : '');
valMinus = (valMinus ? '[b]Недостатки:[/b]\n'+valMinus+'\n\n' : '');
valComm = (valComm ? '[b]Комментарий:[/b]\n'+valComm : '');
$('#message').val((valPlus+valMinus+valComm));
} else $('#message').val(valComm);
});

$('#change_extra').on('click', function(){
let thisVal = $(this).val();
$(this).val(thisVal == 'Расширенный' ? 'Обычный':'Расширенный');
$('.comment-add .caf-extra-block').toggleClass('caf-active');
$('.comment-add textarea').val('');
});
</script>


Далее перейдите в ПУ > Управление дизайном > Таблица стилей (CSS) и добавьте вниз:
.comment-add {display: block; width: 100%; background: #fff; color: #333; padding: 10px; box-sizing: border-box;}
.comment-add label {display: block;}
.comment-add textarea {font-weight: inherit; font-famaly: inherit; font-size: inherit; color: inherit; box-sizing: border-box; overflow: hidden auto;}
.comment-add .ca-top {display: block; width: 100%; font-size: 1rem; font-size: bold; margin-bottom: 10px;}
.comment-add .ca-form {display: block; width: 100%; margin-bottom: 10px;}
.comment-add .ca-form textarea {width: 100%; height: 80px; padding: 5px; border: 1px solid #aaa; border-radius: 5px; resize: none;}
.comment-add .ca-form textarea:hover {border-color: #999;}
.comment-add .ca-form textarea:focus {border-color: #07f;}
.comment-add .ca-form .caf-extra-block {display: none; width: 100%; margin-bottom: 5px;}
.comment-add .ca-form .caf-extra-block.caf-active {display: block;}
.comment-add .ca-form .caf-extra-block .caf-extra {display: inline-block; float: left;}
.comment-add .ca-form .caf-extra-block .caf-extra::after {content: ''; display: block; clear: both;}
.comment-add .ca-form .caf-extra-block .caf-extra:first-child {width: calc(50% - 10px); margin-right: 10px;}
.comment-add .ca-form .caf-extra-block .caf-extra:last-child {width: 50%;}
.comment-add .ca-form .caf-main {display: block; width: 100%; margin-bottom: 10px;}
.comment-add .ca-form .caf-main textarea {width: 100%; min-height: 80px; height: 80px; max-height: 300px; resize: vertical;}
.comment-add .ca-form .caf-default {display: none;}
.comment-add .ca-form .recaptcha-wrapper {margin-bottom: 10px;}
.comment-add .ca-bottom {display: block; width: 100%;}
.comment-add .ca-bottom::after {content: ''; display: block; clear: both;}
.comment-add .ca-bottom input {display: block; height: 30px; border-radius: 5px; background: #ddd; color: #333; border: 1px solid #ddd; box-sizing: border-box; cursor: pointer;}
.comment-add .ca-bottom input:hover {border-color: #07f;}
.comment-add .ca-bottom .cab-submit,
.comment-add .ca-bottom .cab-error,
.comment-add .ca-bottom .cab-select-extra {display: inline-block; float: left; height: 30px;}
.comment-add .ca-bottom .cab-submit,
.comment-add .ca-buttom .cab-submit input {width: 90px;}
.comment-add .ca-bottom .cab-error {width: calc(100% - 215px); margin: 0 5px; line-height: 30px;}
.comment-add .ca-bottom .cab-error .commError {text-align: left;}
.comment-add .ca-bottom .cab-select-extra,
.comment-add .ca-bottom .cab-select-extra input {width: 115px;}


И на этом все!)

Комментарии
Комментариев пока нет..
Ты можешь быть первым, кто оставит комментарий к публикации!


Вы не зарегистрированы

Расширенные комментарии v2 для uCoz


Автор публикации
Дата публикации
19-01-2022, 15:43
Просмотров
223
Комментариев
0

Fozzy - Самый быстрый хостинг

Внимание! Данный материал предоставлен сайтом VIPAdmin.Club исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое
Магазин
Смотрите также
Расширенные комментарии v2 для uCoz
19-01-2022, 15:43
223

Расширенные комментарии v2 для uCoz

Информация
Версия
v1.405
Версия CMS
v15.0
Тематика
Новости, Блог, Каталог
Фреймворк
Bootstrap v5

Описание


Установка:

Зайдите в ПУ > Управление дизайном > Форма добавления комментариев и замените код на этот:
<div class="comment-add">
<div class="ca-top">Оставить комментарий</div>
<div class="ca-form">
<div class="caf-extra-block">
<div class="caf-extra">
<label for="caf-plus">Достоинства</label>
<textarea id="caf_plus"></textarea>
</div>
<div class="caf-extra">
<label for="caf-minus">Недостатки</label>
<textarea id="caf_minus"></textarea>
</div>
</div>
<div class="caf-main">
<label for="caf-comm">Комментарий</label>
<textarea id="caf_comm"></textarea>
</div>
<div class="caf-default">
<textarea name="message" id="message"></textarea>
</div>
<?if($SECURITY_CODE$)?>$SECURITY_CODE$<?endif?>
<div class="ca-bottom">
<div class="cab-submit">
<input id="addcBut" type="submit" name="submit" value="Отправить">
</div>
<div class="cab-error">$ERROR$</div>
<div class="cab-select-extra">
<input id="change_extra" type="button" value="Расширенный" title="Изменить тип комментария">
</div>
</div>
</div>

<script>
$('#caf_plus, #caf_minus, #caf_comm').bind('keyup keydown', function(){
let valComm = $('#caf_comm').val(), isActive = $('.comment-add .caf-extra-block').hasClass('caf-active');
if(isActive){
let valPlus = $('#caf_plus').val(), valMinus = $('#caf_minus').val();
valPlus = (valPlus ? '[b]Достоинства:[/b]\n'+valPlus+'\n\n' : '');
valMinus = (valMinus ? '[b]Недостатки:[/b]\n'+valMinus+'\n\n' : '');
valComm = (valComm ? '[b]Комментарий:[/b]\n'+valComm : '');
$('#message').val((valPlus+valMinus+valComm));
} else $('#message').val(valComm);
});

$('#change_extra').on('click', function(){
let thisVal = $(this).val();
$(this).val(thisVal == 'Расширенный' ? 'Обычный':'Расширенный');
$('.comment-add .caf-extra-block').toggleClass('caf-active');
$('.comment-add textarea').val('');
});
</script>


Далее перейдите в ПУ > Управление дизайном > Таблица стилей (CSS) и добавьте вниз:
.comment-add {display: block; width: 100%; background: #fff; color: #333; padding: 10px; box-sizing: border-box;}
.comment-add label {display: block;}
.comment-add textarea {font-weight: inherit; font-famaly: inherit; font-size: inherit; color: inherit; box-sizing: border-box; overflow: hidden auto;}
.comment-add .ca-top {display: block; width: 100%; font-size: 1rem; font-size: bold; margin-bottom: 10px;}
.comment-add .ca-form {display: block; width: 100%; margin-bottom: 10px;}
.comment-add .ca-form textarea {width: 100%; height: 80px; padding: 5px; border: 1px solid #aaa; border-radius: 5px; resize: none;}
.comment-add .ca-form textarea:hover {border-color: #999;}
.comment-add .ca-form textarea:focus {border-color: #07f;}
.comment-add .ca-form .caf-extra-block {display: none; width: 100%; margin-bottom: 5px;}
.comment-add .ca-form .caf-extra-block.caf-active {display: block;}
.comment-add .ca-form .caf-extra-block .caf-extra {display: inline-block; float: left;}
.comment-add .ca-form .caf-extra-block .caf-extra::after {content: ''; display: block; clear: both;}
.comment-add .ca-form .caf-extra-block .caf-extra:first-child {width: calc(50% - 10px); margin-right: 10px;}
.comment-add .ca-form .caf-extra-block .caf-extra:last-child {width: 50%;}
.comment-add .ca-form .caf-main {display: block; width: 100%; margin-bottom: 10px;}
.comment-add .ca-form .caf-main textarea {width: 100%; min-height: 80px; height: 80px; max-height: 300px; resize: vertical;}
.comment-add .ca-form .caf-default {display: none;}
.comment-add .ca-form .recaptcha-wrapper {margin-bottom: 10px;}
.comment-add .ca-bottom {display: block; width: 100%;}
.comment-add .ca-bottom::after {content: ''; display: block; clear: both;}
.comment-add .ca-bottom input {display: block; height: 30px; border-radius: 5px; background: #ddd; color: #333; border: 1px solid #ddd; box-sizing: border-box; cursor: pointer;}
.comment-add .ca-bottom input:hover {border-color: #07f;}
.comment-add .ca-bottom .cab-submit,
.comment-add .ca-bottom .cab-error,
.comment-add .ca-bottom .cab-select-extra {display: inline-block; float: left; height: 30px;}
.comment-add .ca-bottom .cab-submit,
.comment-add .ca-buttom .cab-submit input {width: 90px;}
.comment-add .ca-bottom .cab-error {width: calc(100% - 215px); margin: 0 5px; line-height: 30px;}
.comment-add .ca-bottom .cab-error .commError {text-align: left;}
.comment-add .ca-bottom .cab-select-extra,
.comment-add .ca-bottom .cab-select-extra input {width: 115px;}


И на этом все!)
[xfgiven_images]
Изображения
[/xfgiven_images]
Автор публикации
wad
Комментарии и отзывы
  • Пустота..
    Людям пока лень писать тут отзывы и комментарии..


  • Вы не зарегистрированы

Лучшие статьи

Template not found: /templates/bootstrap5/topnews.tplTemplate not found: /templates/bootstrap5/topnews.tplTemplate not found: /templates/bootstrap5/topnews.tpl