Улучшаем внешний вид функции CODE uCoz Портал Zagru.ru
Дата публикации:

Улучшаем внешний вид функции CODE uCoz Портал Zagru.ru

2fd6b5dc

И так давайте начнём, всем известно, что для отображения в комментариях и в новостях вашего сайта, мы используем bb-код code давайте рассмотри его исходный html код в вашем браузере: <!--uzcode--> <div class="bbCodeBlock"> <div class="bbCodeName" style="padding-left: 5px; font-weight: bold; font-size: 7pt;">Code</div> <div class="codeMessage" style="border: 1px inset; max-height: 200px; overflow: auto;"> <!--uzc--> <code>ваш код</code> <!--/uzc--> </div> </div> <!--/uzcode--> как вы видите uCoz сгенерировал три ячейки div, с нужными нам классами, а также прописал им стандартные стили, которые нам придётся обойти с помощью параметра !important; в css стилях, давайте на них посмотрим: /* Ячейка с кодом ------------------------------------------*/ .bbCodeName { padding:0!important; /* - запрещаем внутренние отступы */ margin-bottom:5px; /* - нижний внешний отступ */ } .codeMessage { margin: 0px 0px 15px 0px; /* - нижний внешний отступ */ padding:5px 10px; /* - внутренние отступы */ border:1px solid #CEE7EC!important; /* - рамка вокруг ячейки кода */ background:#fff url(http://www.center-dm.ru/sites/fon_code.gif); /* - фон ячейки кода*/ font:11px Verdana,Arial,sans-serif; /* - шрифт и его размер */ text-align:left; /* - прижимаем текст к правой стороне */ color:#555; /* - цвет текста */ } Теперь внешний вид функции кода uCoz изменён, но у нас с вами имеется один недочёт, а именно, мы видим название данной функции в виде текста Code, который можно скрыть благодаря css стилям: .bbCodeName { display:none; /* - удаляем элемент из документа */ } но я предлагаю пойти немного дальше и заменить данный текст на ссылку с текстом Выделить всё, как вы понимаете при нажатии на которую, текст с кодом выделиться в основной ячейки, а вы сможете его легко копировать к себе нас сайт, и так в самый низ страницы перед закрывающим тегом </body> , устанавливаем следующий js: <script type="text/javascript"> function selectCode(a){ var e=a.parentNode.parentNode.getElementsByTagName('code')[0]; if(window.getSelection){ var s=window.getSelection(); if(s.setBaseAndExtent){ s.setBaseAndExtent(e,0,e,e.innerText.length-1); }else{ var r=document.createRange(); r.selectNodeContents(e); s.removeAllRanges(); s.addRange(r);} }else if(document.getSelection){ var s=document.getSelection(); var r=document.createRange(); r.selectNodeContents(e); s.removeAllRanges(); s.addRange(r); }else if(document.selection){ var r=document.body.createTextRange(); r.moveToElementText(e); r.select();}} // Замена Code на Выделить всё... codediv=document.getElementsByTagName('div'); for(i=0;i<codediv.length;i++){ if(codediv[i].className=="bbCodeBlock"){ s=codediv[i].innerHTML; s=s.replace(/>Code</g,'><a href="#" onclick="selectCode(this);return false;">Выделить всё<\/a><').replace('<!--uzc-->','<!--uzc--><code>').replace('<!--\/uzc-->','<\/code><!--\/uzc-->'); codediv[i].innerHTML=s;}} </script> На этом всё, спасибо за внимание!