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

1138
6.6 из 10
Проголосовало: 6






И так давайте начнём, всем известно, что для отображения в комментариях и в новостях вашего сайта, мы используем 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; /* - удаляем элемент из документа */  
}


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


На этом всё, спасибо за внимание!
Автор публикации: Загрузка
Загрузка
Estwood, это его n материал
Источник: http://www.center-dm.ru/
  • Оставить первым комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
  • waak написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
  • waak написал:
  • Почему у меня он перелистывает в верх а не вниз и если это первая песня на стр то он её по кругу гоняет а не переходит к последней
    и как сделать стоп по клику на трек который играет?
  • Acht написал:
  • Тест
    Последние темы
    Опрос
    466
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: