igrok,
По первому скрипту.
Покажу на примере формы добавления в модуле объявлений:
Для начала, нужно ID формы (смотри скрин ниже - #1)
Потом данные для поля «Заголовок объявления»:
#2 - ID ячейки куда будет добавлен сам счетчик, отображающий остаток.
#3 - имя поле на которое будет повешен данный счетчик.
В скрипте эти поля фигурируют вот тут:
Код
$('#bdM4').append(' (осталось: <span id="titleChar">25</span> символов)');
- добавляем в блок элемент для вывода остатка
Цитата code
$(document.forms.addform.title).on('keypress keyup',function(){
checkLength(25,this,'titleChar');
- вешаем событие на поле, и передаем в функцию ID элемента для вывода остатка.
Цитата code
var e=document.getElementById('checkTitle');
if(!/^\s*$/.test(this.value)){
e.innerHTML=this.value;
}else{
e.innerHTML='Заголовок объявления (2сл.)';
}
- передаем содержимое поля в блок превью, созданный заранее.
---
Превью создает вот этот фрагмент:
Код
$('body').append('<div id="checkShadow"><div id="checkBox"><h2 id="checkTitle">Заголовок объявления (2сл.)</h2><p id="checkText">Текст вашего объявления (2-4 слова)</p><p id="checkCont">Ссылка на страницу или номер тел.</p></div></div>');
ID элементов привязаны к скрипту.
Все оформление задается через стили.
---
Все остальные поля сделаны по принципу первого.
Единственный момент - с полем для текста. Там элемент для вывода остатка находится вот так:
Код
$('#bdM7 > div').eq(0).append(' (осталось: <span id="textChar">70</span> символов)');
- первый блок в ячейке (#2) с ID == bdM7 (#1)
---
Скрипт вставляется после формы и запускается вот так:
Код
<script type="text/javascript" src="/fn.setcheckbox.js"></script>
<script type="text/javascript">
setCheckBox();
</script>
Примерные стили - можно изменять по усмотрению:
Код
#checkTitle,#checkText,#checkCont{margin:0;padding:0;}
#checkShadow{background:#FFF;padding:10px;position:fixed;left:5%;bottom:5%;}
#checkBox{width:300px;height:90px;padding:4px;border:1px solid #333;font-family: Verdana, Helvetica, sans-serif;text-align:left;word-wrap:break-word;}
#checkTitle{font-size:15px;color:#1000ff;margin-bottom:5px;}
#checkText{color:#222;margin-bottom:7px;font-size:13px;}
#checkCont{color:#008b08;font-size:90%;font-size:12px;}