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


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

1078
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 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    204
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 5
    Гостей: 5
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: