/*Онлайн чат*/
Добро пожаловать в чат
Вход / Регистрация
/*Онлайн чат*/ /*TimeLine*/
Обновления на сайте
  • Adrian Monino
    Premium Member
  • /*TimeLine*/

    Улучшаем внешний вид функции CODE uCoz

    Изображение материала
    Информация
    КатегорияСкрипты и модификация
    АвторГость
    Кол-во просмотров340
    Кол-во скачиваний0
    Кол-во комментарий0
    Ссылка на демоДЕМО
    ИсточникПерейти
    Дата добавления23.05.2012 / 20:50
    Описание

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

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

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

    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 стилям:

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


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

    Code
    <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>  


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

    Комментарии
    Добавить комментарий