Улучшение вида code
И так давайте начнём, всем известно, что для отображения в комментариях и в новостях вашего сайта, мы используем bb-код code
давайте рассмотри его исходный html код в вашем браузере:
как вы видите uCoz сгенерировал три ячейки div, с нужными нам классами, а также прописал им стандартные стили, которые нам придётся обойти с помощью параметра !important; в css стилях, давайте на них посмотрим:
Теперь внешний вид функции кода uCoz изменён, но у нас с вами имеется один недочёт, а именно, мы видим название данной функции в виде текста Code, который можно скрыть благодаря css стилям:
но я предлагаю пойти немного дальше и заменить данный текст на ссылку с текстом Выделить всё, как вы понимаете при нажатии на которую, текст с кодом выделиться в основной ячейки, а вы сможете его легко копировать к себе нас сайт, и так в самый низ страницы перед закрывающим тегом , устанавливаем следующий js:
давайте рассмотри его исходный 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-->
<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; /* - цвет текста */
}
------------------------------------------*/
.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; /* - удаляем элемент из документа */
}
display:none; /* - удаляем элемент из документа */
}
но я предлагаю пойти немного дальше и заменить данный текст на ссылку с текстом Выделить всё, как вы понимаете при нажатии на которую, текст с кодом выделиться в основной ячейки, а вы сможете его легко копировать к себе нас сайт, и так в самый низ страницы перед закрывающим тегом , устанавливаем следующий 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>
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>
0| Всего комментариев: 0 | |
 | Информация: Посетители, находящиеся в группе Гости, не могут оставлять комментарии. |