Кот

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Кот » Архивы » Скрипты


Скрипты

Сообщений 1 страница 2 из 2

1

Вместо примеров сверстанных дизайнов, которые, наверно, не очень впечатляют, пусть будут примеры скриптов.

Самый простой:

Код:

<script type="text/javascript">
str = document.getElementById("navpm").innerHTML
if( (str.indexOf("(") != -1))
{
document.getElementById("navpm").style.backgroundImage = 'url(http://savepic.ru/2877370.gif)'
}
</script>

Что это такое?
Если у вас на форуме ссылки в главном меню заменены картинками, и (это важно) заменены они через CSS-свойства, то этот код позволит вам менять картинку пункта "Сообщения", когда у пользователя есть непрочитанная почта.

Как оно работает?
Так как код очень простой, его можно прокомментировать.

str = document.getElementById("navpm").innerHTML

В первой строке мы находим непосредственно ссылку "Сообщения", как элемент страницы. Если попытаться перевести это на человеческий язык, получится: "найти на странице элемент, у которого id = navpm и прочти его содержимое".

if( (str.indexOf("(") != -1))

Тут мы анализируем это содержимое. Как мы помним, если нам пришло новое сообщение, то в ссылке появляется цифра в скобочках вот такого вида - (1). Этот код переводится так: "если в тексте ссылки есть знак (".

document.getElementById("navpm").style.backgroundImage = 'url(http://savepic.ru/2877370.gif)'

Ну а здесь мы просто меняем фон кнопки. То есть "сделать фон найденного элемента вот таким-то".

Просто ведь?

Отредактировано Shata (2013-02-12 19:37:01)

+1

2

Скрипт "Профиль со вкладками"

Где-то я его уже выкладывала, но не помню, где. Помню только, что людям он нравился.

Код:

Код:
<script>
function HideInfo(id,but){
if(but.value=="1"){
var fil=document.getElementById(id).getElementsByTagName("li")
var fi=0
for (fi=0; fi<=(fil.length-1); fi++)
{if ((fil[fi].className=="pa-fld1") || (fil[fi].className=="pa-fld2") || (fil[fi].className=="pa-fld3"))
{fil[fi].style.display = "none";}
if ((fil[fi].className!="pa-fld1") && (fil[fi].className!="pa-fld2") && (fil[fi].className!="pa-fld3") )
{fil[fi].style.display = "block";}
}
}
if(but.value=="2"){
var fil=document.getElementById(id).getElementsByTagName("li")
var fi=0
for (fi=0; fi<=(fil.length-1); fi++)
{if (fil[fi].className!="pa-fld1") 
{fil[fi].style.display = "none";}
if (fil[fi].className=="pa-fld1")
{fil[fi].style.display = "block";}
}
}
if(but.value=="3"){
var fil=document.getElementById(id).getElementsByTagName("li")
var fi=0
for (fi=0; fi<=(fil.length-1); fi++)
{if (fil[fi].className!="pa-fld2")
{fil[fi].style.display = "none";}
if (fil[fi].className=="pa-fld2") 
{fil[fi].style.display = "block";}
}
}
if(but.value=="4"){
var fil=document.getElementById(id).getElementsByTagName("li")
var fi=0
for (fi=0; fi<=(fil.length-1); fi++)
{if (fil[fi].className!="pa-fld3")
{fil[fi].style.display = "none";}
if (fil[fi].className=="pa-fld3") 
{fil[fi].style.display = "block";}
}
}
  return false}
d = document.getElementsByTagName("div")
for (i=0;d[i]; i++){
if (d[i].className.indexOf("post-author")!=-1){t = d[i].innerHTML
   if((j = t.toLowerCase().indexOf("<li class=pa-from>"))!=-1 || (j = t.toLowerCase().indexOf("<li class=\"pa-from\">"))!=-1 || (j = t.toLowerCase().indexOf("<li class=pa-reg>"))!=-1 || (j = t.toLowerCase().indexOf("<li class=\"pa-reg\">"))!=-1)
    d[i].innerHTML = t.substring(0,j)+"<center><input type='Submit' onClick=\"return HideInfo('info"+i+"',this)\" value='1' id='bu1' title='О пользователе'>&nbsp;<input type='Submit' onClick=\"return HideInfo('info"+i+"',this)\" value='2' id='bu2' title='О персонаже'>&nbsp;<input type='Submit' onClick=\"return HideInfo('info"+i+"',this)\" value='3' id='bu3' title='Эпизоды'>&nbsp;<input type='Submit' onClick=\"return HideInfo('info"+i+"',this)\" value='4' id='bu4' title='Награды'></center><div id='info"+i+"'>"+t.substring(j,t.length)+"</div>"}}
</script>
Код:
.pa-fld1, .pa-fld2, .pa-fld3 {display: none}

#bu1 {background-image: url(http://uploads.ru/i/X/o/8/Xo8iA.png); height: 16px; width: 16px; background-color: transparent; border: none; color: transparent; opacity: 0.5}
#bu1:hover {opacity: 1}

#bu2 {background-image: url(http://uploads.ru/i/p/t/a/ptakE.png); height: 16px; width: 16px; background-color: transparent; border: none; color: transparent; opacity: 0.5}
#bu2:hover {opacity: 1}

#bu3 {background-image: url(http://uploads.ru/i/j/G/g/jGgUW.png); height: 16px; width: 16px; background-color: transparent; border: none; color: transparent; opacity: 0.5}
#bu3:hover {opacity: 1}

#bu4 {background-image: url(http://s3.uploads.ru/5KPm6.png); height: 16px; width: 16px; background-color: transparent; border: none; color: transparent; opacity: 0.5}
#bu4:hover {opacity: 1}

Что это такое?
Этот код добавляет в профиль четыре кнопки (можно больше, можно меньше, но конкретно этот делает четыре): "о пользователе", "о персонаже", "эпизоды", "награды". По умолчанию видно содержимое только первой вкладки, "о пользователе". Это все стандартные поля: регистрация, количество сообщений, репутация, и так далее. Соответственно, если нажать на кнопку "О персонаже", они исчезнут, и появится поле "О персонаже", которое сейчас стандартно используется на ролевых для игрового профиля - всякие там навыки, факультеты и ссылка на анкету. Соответственно, третья и четвертая кнопка сделают видимыми поле "Эпизоды" или поле "Награды".

Как оно настраивается?

1. Первым делом, разумеется, надо создать дополнительные поля профиля. Столько, сколько вам нужно. У каждого дополнительного поля есть свой идентификатор - pa-fld1, pa-fld2, pa-fld3 и так далее. В каком порядке вы их создали, такой id им и присвоился. Создали, запомнили порядок.
(Примечание: тут я позволю себе неточность, так как pa-fld1, pa-fld2, pa-fld3 - это не id элементов, а названия класса. Но нам это сейчас неважно, так как они уникальны).

2. Добавили в стиль вот это: .pa-fld1, .pa-fld2, .pa-fld3 {display: none}
По количеству ваших доп. полей, разумеется. Этот код скрывает доп. поля по умолчанию.

3. Переходим к коду.
Первый блок отвечает за то, чтобы при нажатии на первую кнопки скрывались все доп. поля и оставались только стандартные.

{if ((fil[fi].className=="pa-fld1") || (fil[fi].className=="pa-fld2") || (fil[fi].className=="pa-fld3"))
{fil[fi].style.display = "none";}
if ((fil[fi].className!="pa-fld1") && (fil[fi].className!="pa-fld2") && (fil[fi].className!="pa-fld3") )
{fil[fi].style.display = "block";}

Первые две строчки переводятся так: "Если это поле pa-fld1 или pa-fld2 или pa-fld3, то скрыть его".
Вторые две строчки говорят: "Если это НЕ поле pa-fld1, НЕ поле pa-fld2 и НЕ поле pa-fld3, то показать его".
Соответственно || - это "или", а && - это "и".
Если у вас полей больше или меньше, то просто допишите в первой и третьей строке еще одну скобку вида (fil[fi].className=="pa-fld4") и не забудьте поставить нужный знак "и/или", а если меньше - уберите лишнее и сотрите знак.

Остальные блоки отвечаю за то, чтобы по нажатию на нужную кнопку скрывать все остальные поля и показывать только то, которое надо.

if(but.value=="2"){
var fil=document.getElementById(id).getElementsByTagName("li")
var fi=0
for (fi=0; fi<=(fil.length-1); fi++)
{if (fil[fi].className!="pa-fld1")
{fil[fi].style.display = "none";}
if (fil[fi].className=="pa-fld1")
{fil[fi].style.display = "block";}
}
}

if(but.value=="2")
Если нажата кнопка 2

{if (fil[fi].className!="pa-fld1")
{fil[fi].style.display = "none";}
Если это не поле pa-fld1, то скрыть его.

if (fil[fi].className=="pa-fld1")
{fil[fi].style.display = "block";}
Если это поле pa-fld1, то показать его.

Таким образом, сколько у нас дополнительных полей, столько и таких блоков. Для каждого в двух условиях меняем pa-fld1 на нужное нам значение поля, а в самом начале меняем номер кнопки.

3. Кнопки.
Код кнопок находится тут:

  d[i].innerHTML = t.substring(0,j)+"<center><input type='Submit' onClick=\"return HideInfo('info"+i+"',this)\" value='1' id='bu1' title='О пользователе'>&nbsp;<input type='Submit' onClick=\"return HideInfo('info"+i+"',this)\" value='2' id='bu2' title='О персонаже'>&nbsp;<input type='Submit' onClick=\"return HideInfo('info"+i+"',this)\" value='3' id='bu3' title='Эпизоды'>&nbsp;<input type='Submit' onClick=\"return HideInfo('info"+i+"',this)\" value='4' id='bu4' title='Награды'></center><div id='info"+i+"'>"+t.substring(j,t.length)+"</div>"

Из всего этого скопления букв нас интересует выделенное синим. Попробуем это разбить на строки для наглядности:

<input type='Submit' onClick=\"return HideInfo('info"+i+"',this)\" value='1' id='bu1' title='О пользователе'>
&nbsp;
<input type='Submit' onClick=\"return HideInfo('info"+i+"',this)\" value='2' id='bu2' title='О персонаже'>
&nbsp;
<input type='Submit' onClick=\"return HideInfo('info"+i+"',this)\" value='3' id='bu3' title='Эпизоды'>
&nbsp;
<input type='Submit' onClick=\"return HideInfo('info"+i+"',this)\" value='4' id='bu4' title='Награды'>

Теперь видно, что перед нами код четырех кнопок, каждая со своим id, value и title. Value - это как раз то значение, которое должно совпадать с условием вот тут:

if(but.value=="2"){

id нужно для украшательств в CSS,  а title - просто всплывающая подсказка. Код onClick у всех кнопок одинаковый, его менять не надо.
&nbsp; - просто разделительный пробел.

Переделайте кнопки так, как вам надо, потом удалите все переносы строк обратно (это важно), и вставляйте свой код на место синего.

4. Наконец, последний штрих - это CSS кнопок.
Делайте с ним, что хотите, вставляйте в любой блок со стилем. Я сделала вот так:

#bu1 {background-image: url(http://uploads.ru/i/X/o/8/Xo8iA.png); height: 16px; width: 16px; background-color: transparent; border: none; color: transparent; opacity: 0.5}
#bu1:hover {opacity: 1}

#bu2 {background-image: url(http://uploads.ru/i/p/t/a/ptakE.png); height: 16px; width: 16px; background-color: transparent; border: none; color: transparent; opacity: 0.5}
#bu2:hover {opacity: 1}

#bu3 {background-image: url(http://uploads.ru/i/j/G/g/jGgUW.png); height: 16px; width: 16px; background-color: transparent; border: none; color: transparent; opacity: 0.5}
#bu3:hover {opacity: 1}

#bu4 {background-image: url(http://s3.uploads.ru/5KPm6.png); height: 16px; width: 16px; background-color: transparent; border: none; color: transparent; opacity: 0.5}
#bu4:hover {opacity: 1}

Отредактировано Shata (2013-02-12 20:04:21)

+1


Вы здесь » Кот » Архивы » Скрипты


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC