Скрипт "Профиль со вкладками"
Где-то я его уже выкладывала, но не помню, где. Помню только, что людям он нравился.
Код:
Что это такое?
Этот код добавляет в профиль четыре кнопки (можно больше, можно меньше, но конкретно этот делает четыре): "о пользователе", "о персонаже", "эпизоды", "награды". По умолчанию видно содержимое только первой вкладки, "о пользователе". Это все стандартные поля: регистрация, количество сообщений, репутация, и так далее. Соответственно, если нажать на кнопку "О персонаже", они исчезнут, и появится поле "О персонаже", которое сейчас стандартно используется на ролевых для игрового профиля - всякие там навыки, факультеты и ссылка на анкету. Соответственно, третья и четвертая кнопка сделают видимыми поле "Эпизоды" или поле "Награды".
Как оно настраивается?
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='О пользователе'> <input type='Submit' onClick=\"return HideInfo('info"+i+"',this)\" value='2' id='bu2' title='О персонаже'> <input type='Submit' onClick=\"return HideInfo('info"+i+"',this)\" value='3' id='bu3' title='Эпизоды'> <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='О пользователе'>
<input type='Submit' onClick=\"return HideInfo('info"+i+"',this)\" value='2' id='bu2' title='О персонаже'>
<input type='Submit' onClick=\"return HideInfo('info"+i+"',this)\" value='3' id='bu3' title='Эпизоды'>
<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 у всех кнопок одинаковый, его менять не надо.
- просто разделительный пробел.
Переделайте кнопки так, как вам надо, потом удалите все переносы строк обратно (это важно), и вставляйте свой код на место синего.
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)
