Главная » Шаблоны и Скрипты для uCoz » Скрипты для uCoz » Мини чат для uCoz |
Простой мини-чат для uCoz
31.05.2015, 20:45 | |
Простой мини-чат для uCoz. Ну я могу сказать что это обычный мини-чат, он довольно оригинальный, подходит под любой дизайн сайта. Этот мини-чат содержит аккуратную форму добавления сообщений. Установка: 1.В Вид мини-чата: Код <div class="b_blog"> <div class="chat_title"> <div class="chat_titlel"> <a href="javascript:void('Apply to')" onclick="parent.window.document.getElementById('mchatMsgF').focus();parent.window.document.getElementById('mchatMsgF').value+='[i]$USERNAME$[/i], ';return false;">$USERNAME$</a></div> <div class="chat_titler">$DATE$, $TIME$</div> </div> <div class="chat_cont">$MESSAGE$ </div> <div class="chat_patt"></div> </div> 2. В Форму добавления сообщения: Код <?if(!$CAN_ADD$)?><div align="center"><?if($LOGIN_LINK$)?><a href="$LOGIN_LINK$">Для добавления необходима авторизация</a><?else?>Доступ запрещен<?endif?></div><?else?> <?if($FLD_SECURE$)?> <table border="0" cellpadding="1" cellspacing="1" width="100%"> <tr><td width="50%">$FLD_SECURE$</td><td align="right">$IMG_SECURE$</td></tr> </table> <?endif?> <textarea name="mcmessage" class="mchat" id="mchatMsgF" title="Сообщение" onkeyup="countMessLength();" onfocus="countMessLength();" style="resize:none;"></textarea> <div class="chat_panel"> <ul> <li><a href="javascript:void('Apply to')" onclick="parent.window.document.getElementById('mchatMsgF').focus();parent.window.document.getElementById('mchatMsgF').value+='[b]Ваше слово[/b] ';return false;" id="mchatBtn"><b>B</b></a></li> <li><a href="javascript:void('Apply to')" onclick="parent.window.document.getElementById('mchatMsgF').focus();parent.window.document.getElementById('mchatMsgF').value+='[i]Ваше слово[/i] ';return false;" id="mchatBtn"><i>i</i></a></li> <li><a href="javascript:void('Apply to')" onclick="parent.window.document.getElementById('mchatMsgF').focus();parent.window.document.getElementById('mchatMsgF').value+='[u]Ваше слово[/u] ';return false;" id="mchatBtn"><u>U</u></a></li> <li><a href="javascript://" rel="nofollow" onclick="new _uWnd('Sml',' ',-250,-350,{autosize:0,closeonesc:1,resize:0},{url:'/index/35-1-2'});return false;"><img style="padding-top:6px" src="http://ucozup.ru/files_ucozup/kopete020.png" width="12" height="12"></a></li> <li><input type="submit" value="Отправить" class="mchat" id="mchatBtn" alt="" style="padding:1px 6px 0 3px;"></li> </ul> </div> <input type="hidden" name="numa" id="numa832" value="0"><input type="hidden" name="a" value="18"><input type="hidden" id="ajaxFlag" name="ajax" value="1" /> <?endif?> 3. И в таблицу Стилей CSS добавляем этот код: Код .b_blog {overflow:hidden; width:173px; margin:0 0 4px 1px;} .chat_title {background:url(/minichat/chat_title.png) no-repeat; width:173px; height:20px; font:10px Tahoma; color:#383838;} .chat_titlel {background:#fff; border-radius:3px; margin:3px; padding:1px 2px; float:left;} .chat_titlel a {color:black;} .chat_titlel a:hover {text-decoration:none;} .chat_titler {background:#fff; border-radius:3px; margin:3px; padding:1px 2px; float:right;} .chat_cont {overflow:hidden; font:11px Tahoma; color:#383838; width:169px; padding:2px;} .chat_cont a {color:#383838; text-decoration:none;} .chat_patt {background:url(/minichat/chat_patt.png) no-repeat; width:173px; height:3px; margin:0 auto;} #mchatMsgF {background:url(/minichat/chat_mess.png) no-repeat; width:184px; height:52px; padding:7px; color:#8a8a8a; font:10px Tahoma; border:none; outline:none;} .chat_panel {background:url(/minichat/chat_panel.png) no-repeat; width:184px; height:23px;} .chat_panel ul {display:block; height:23px;} .chat_panel ul li {background:url(/minichat/chat_line.png) no-repeat right; padding:0 0 0 2px; float:left; height:23px; line-height:23px;} .chat_panel ul li:hover {background:#759141;} .chat_panel ul li a {color:#fff; padding:0 8px 0 5px;} .chat_panel ul li a:hover {text-decoration:none;} #mchatBtn {background:none; line-height:23px; font-weight:bold;} .scroll-pane {height:230px; padding:0 0 0 10px; margin:0 5px 4px 0; overflow:auto; outline:none;} .jspContainer {width:100% !important;position: relative; overflow: hidden; outline:0; z-index: 1;} .jspTrack {height:100%; position: absolute; cursor: pointer; right:6px; top:0; overflow:hidden; z-index:22;} .jspDrag {width:4px; border-radius:10px; overflow: hidden; position: relative; top: 0; left:8px; background:url(/minichatchat_scroll.png) no-repeat -8px center; cursor: pointer; } .jspDragTop {border-radius:10px 10px 0 0; width:4px; height:14px; position: absolute; top: 0; left: 0; overflow: hidden; background:url(/minichat/chat_scroll.png) no-repeat 0 top; } .jspDragBottom {border-radius:0 0 10px 10px; width:4px; height:14px; position: absolute; bottom: 0; left: 0; overflow: hidden; background:url(/minichat/chat_scroll.png) no-repeat -4px bottom; } .jspPane { width:196px !important;padding:0 !important; position: absolute; } .jspVerticalBar {width: 12px; height: 100%; position: absolute; top:0px; right: 0; } .jspHorizontalBar { width: 100%; height: 10px; position: absolute; bottom: 0; left: 0;} .jspVerticalBar *, .jspHorizontalBar * { margin: 0; padding: 0; } .jspCap { display: none; } .jspHorizontalBar .jspCap { float: left; } .jspTrack { position: relative;} input[type="button"], input[type="submit"], input[type="reset"] {background:url(/minichat/forum_butt.png) no-repeat left 0,url(/minichat/forum_butt.png) no-repeat right -40px,url(/minichat/forum_butt.png) repeat-x 0 -20px; height:20px; display:inline-block; border-radius:6px; color:#fff; padding:0 5px 1px; text-shadow:1px 1px #394c14; font:11px Tahoma; border:none;} input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {background:url(/minichat/forum_butt_hover.png) no-repeat left 0,url(/minichat/forum_butt_hover.png) no-repeat right -40px,url(/minichat/forum_butt_hover.png) repeat-x 0 -20px; height:20px; display:inline-block; border-radius:6px; cursor:pointer;} | |
Просмотров: 472 | Загрузок:19 Скачать (62.1 Kb) |
Всего комментариев: 0 | |