» » >

Улучшаем внешний вид функции CODE uCoz
·
28.09.2013, 21:16

Всем доброго дня, сегодня ночью я решил решить вопрос касающийся подсветки синтаксиса кода uCoz, но перед тем как в следующем посте мы будем его устанавливать, я решил разобрать по полочкам стандартный html код функции CODE uCoz, который мы и будем улучшать.

И так давайте начнём, всем известно, что для отображения в комментариях и в новостях вашего сайта, мы используем bb-код code:

давайте рассмотри его исходный html код в вашем браузере:

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 стилях, давайте на них посмотрим:

CSS-Code


/* Ячейка с кодом
------------------------------------------*/
.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 стилям:

CSS-Code


.bbCodeName {
  display:none; /* - удаляем элемент из документа */  
}  

но я предлагаю пойти немного дальше и заменить данный текст на ссылку с текстом Выделить всё, как вы понимаете при нажатии на которую, текст с кодом выделится в основной ячейки, а вы сможете его легко копировать к себе нас сайт, и так в самый низ страницы перед закрывающим тегом </body>, устанавливаем следующий js:

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>

Уважаемые читатели моего блога, если кто знает на 100% автора данного скрипта, будьте-добры напишите об этом в комментариях ниже, так как очень трудно отследить настоящий источник.

На этом всё, спасибо за внимание!

Категория: Разбор полётов | Добавил: tashkent97
Просмотров: 536 | Загрузок: 263 | Источник: center-dm.ru | Рейтинг: 5.0/1
Всего комментариев: 0
dth="100%" cellspacing="1" cellpadding="2" class="commTable">
Имя *: Email:
Яндекс.Метрика Яндекс цитирования<