Вот я опубликованный выше код, под тему
prosilver переделал с некоторыми изменениями:
1. Изменил цвета, отступы, рамки.
2. В вышеприведённом коде зачем-то было сделано так, что, когда спойлер после открытия закрываешь, заголовок съезжает вправо, добавляется второй
. Может это должно было символизировать то, что этот спойлер просмотрели?
3. Так же я решил что поскольку спойлер раскрывается и закрывается не только при нажатии на картинки + / -, но и при нажатии на заголовок, правильнее будет, чтобы при наведении на заголовок курсор принимал вид руки с выпяченым пальцем
pointer. Реализовал через css, если кто-то считает что лучше через JavaScript, пусть сделает.
Вот пример, только там я бордер почти везде убрал:
http://conferencia.patriotoportal.ru/vi ... p=183#p183- Код: выделить все
<div style="border-top: 2px solid #B9CBDC; border-left: 2px solid #B9CBDC; border-right: 2px solid #B9CBDC; border-bottom: 1px solid #B9CBDC; font-size: 1em;"><div style="border-bottom: 1px solid #B9CBDC; background-color: #CADCEB; padding: 3px; font-size: 0.9em; font-weight: bold; display: block;"><span style="cursor: pointer;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerHTML = '<b><a href=\'#\' onClick=\'return false;\'><img src=\'styles/prosilver/imageset/icon_minus_1.gif\' width=\'9\' height=\'9\' border=\'0\'></a> {TEXT1}</b>'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = '<b><a href=\'#\' onClick=\'return false;\'><img src=\'styles/prosilver/imageset/icon_plus_1.gif\' width=\'9\' height=\'9\' border=\'0\'></a> {TEXT1}</b>'; }" /><b><a href="#" onClick="return false;"><img src="styles/prosilver/imageset/icon_plus_1.gif" alt="" width="9" height="9" border="0"></a> {TEXT1}</b></span></div><div><div style="display: none; border-bottom: 1px solid #B9CBDC; padding: 3px;">{TEXT}</div></div></div>
Только не забудьте себе в папку styles/prosilver/imageset/ кинуть
icon_plus_1.gif и
icon_minus_1.gif. Так же можете занести информацию о этих файлах в
imageset.cfg:
- Код: выделить все
img_icon_plus = icon_plus_1.gif*9*9
img_icon_minus = icon_minus_1.gif*9*9
