Saver
(Saver)
#1
Cześć
Cześć1
Cześć2
Cześć3
[/code]
Zrobiłem coś takiego ale za każdym razem otwiera się ten pierwszy spolier, a jak zrobić żeby po kliknięci na każdy button otwierał się osobny spolier?
Próbowałem także przez pokazSpoiler1(this), pokazSpoiler2(this) … i wkleić 4 razy kod js z pokazSpoiler1(obj), pokazSpoiler2(obj)… i też nie działa.
Może mi ktoś w tym pomóc?
przemol96
(przemol96)
#5
Albo coś takiego:
do css
/* */<br />
#menu7 {<br />
width: 200px;<br />
margin: 10px;<br />
padding: 0;<br />
}<br />
<br />
#menu7 dt {<br />
background-color: #888;<br />
color: #fff;<br />
font-weight: bold;<br />
text-align: center;<br />
cursor: pointer;<br />
margin: 10px 0 0 0;<br />
padding: 2px;<br />
}<br />
<br />
#menu7 dd {<br />
background-color: #eee;<br />
color: #000;<br />
border-width: 0 1px 1px 1px;<br />
border-style: solid;<br />
border-color: #888;<br />
margin: 0;<br />
padding: 1px 5px;<br />
}<br />
<br />
#menu7 dd.active {<br />
font-weight: bold;<br />
}<br />
<br />
.menu8, .menu8 dl {<br />
line-height: normal;<br />
font-size: 12px;<br />
position: absolute;<br />
width: 150px;<br />
margin: 0;<br />
padding: 0;<br />
border-width: 1px;<br />
border-style: solid;<br />
border-color: #eee #aaa #aaa #eee;<br />
}<br />
<br />
.menu8 dt {<br />
cursor: pointer;<br />
margin: 0;<br />
padding: 0;<br />
background-color: #888;<br />
color: #fff;<br />
text-align: center;<br />
font-weight: bold;<br />
font-size: 14px;<br />
border-width: 1px;<br />
border-style: solid;<br />
border-color: #aaa #666 #666 #aaa;<br />
padding: 4px 5px;<br />
}<br />
<br />
.menu8 dl dt {<br />
background-color: #ccc;<br />
color: #000;<br />
text-align: left;<br />
font-weight: normal;<br />
font-size: 12px;<br />
border: 0;<br />
padding: 0;<br />
}<br />
<br />
.menu8 dd {<br />
background-color: #ccc;<br />
color: #000;<br />
margin: 0;<br />
padding: 0;<br />
width: 150px;<br />
height: 22px;<br />
}<br />
<br />
.menu8 dd.active {<br />
font-weight: bold;<br />
}<br />
<br />
#CONTENT .menu8 dt a {<br />
background: url("../pliki/submenu.gif") no-repeat 140px 8px;<br />
padding-right: 20px;<br />
}<br />
<br />
#CONTENT .menu8 a:link, #CONTENT .menu8 a:visited {<br />
display: block;<br />
color: #000;<br />
border: 0;<br />
text-decoration: none;<br />
padding: 4px 5px;<br />
}<br />
<br />
#CONTENT .menu8 a:hover {<br />
color: #fff;<br />
background-color: #008;<br />
}<br />
<br />
.menu8 dl {<br />
position: absolute;<br />
border: 0;<br />
}<br />
<br />
.menu8 dl dd {<br />
position: relative;<br />
left: 151px;<br />
bottom: 22px;<br />
border-left: 1px solid #eee;<br />
border-right: 1px solid #aaa;<br />
}<br />
<br />
.menu {<br />
position: relative;<br />
}<br />
<br />
.menu dl {<br />
width: 150px;<br />
margin: 0;<br />
padding: 0;<br />
border-width: 1px;<br />
border-style: solid;<br />
border-color: #aaa #666 #666 #aaa;<br />
}<br />
<br />
.menu dt {<br />
margin: 0;<br />
padding: 2px 5px;<br />
cursor: pointer;<br />
background-color: #888;<br />
color: #fff;<br />
font-weight: bold;<br />
text-align: center;<br />
}<br />
<br />
.menu dd {<br />
margin: 0;<br />
padding: 2px 5px;<br />
background-color: #ccc;<br />
color: #000;<br />
}<br />
/* */
do pliku spoiler.js wstawiasz tak do head:
// <br />
/**<br />
* @author Sławomir Kokłowski {@link http://www.kurshtml.boo.pl}<br />
* @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!)<br />
*/<br />
<br />
function Menu(id, style, otworz, wysun, czasRozwin, czasZwin, czasOtworz, czasZamknij, nieInicjalizuj)<br />
{<br />
if (typeof czasRozwin == 'undefined' || czasRozwin < 0) czasRozwin = 25;<br />
if (typeof czasZwin == 'undefined' || czasZwin < 0) czasZwin = 25;<br />
if (typeof czasOtworz == 'undefined' || czasOtworz < 0) czasOtworz = 250;<br />
if (typeof czasZamknij == 'undefined' || czasZamknij < 0) czasZamknij = 500;<br />
<br />
var url = unescape(window.location.href.replace(/#.*/, ''));<br />
var base = window.location.protocol + '//' + window.location.host + window.location.pathname.replace(/[^\/\\]+$/, '');<br />
<br />
if (style)<br />
{<br />
if (style.indexOf(':') < 0)<br />
{<br />
document.getElementById(id).className += ' ' + style;<br />
}<br />
else<br />
{<br />
style = style.replace(/(^\s+|(\s|;)+$)/g, '').split(/\s*;\s*/);<br />
for (var i = 0; i < style.length; i++)<br />
{<br />
style[i] = style[i].split(/\s*:\s*/);<br />
for (var j = 0, c, property = ''; j < style[i][0].length; j++)<br />
{<br />
c = style[i][0].charAt(j);<br />
property += c == '-' ? style[i][0].charAt(++j).toUpperCase() : c.toLowerCase();<br />
}<br />
eval('document.getElementById("' + id + '").style.' + property + ' = "' + style[i][1].replace(/"/g, '\\"') + '"');<br />
}<br />
}<br />
}<br />
<br />
for (var i = 0; i < document.getElementById(id).getElementsByTagName('dt').length; i++)<br />
{<br />
var dd = new Array();<br />
var el = document.getElementById(id).getElementsByTagName('dt')[i].nextSibling;<br />
var nodeName;<br />
while (el && (nodeName = el.nodeName.toLowerCase()) != 'dt')<br />
{<br />
if (nodeName == 'dd')<br />
{<br />
el._dt = document.getElementById(id).getElementsByTagName('dt')[i];<br />
if (otworz)<br />
{<br />
el.onmouseover = function()<br />
{<br />
clearTimeout(this._dt._timoutID);<br />
this._dt._displayed = false;<br />
this._dt.onclick();<br />
}<br />
el.onmouseout = function()<br />
{<br />
clearTimeout(this._dt._timoutID);<br />
var dt = this._dt;<br />
this._dt._timoutID = setTimeout(function () { dt._displayed = true; dt.onclick(); }, czasZamknij);<br />
};<br />
}<br />
dd[dd.length] = el;<br />
}<br />
el = el.nextSibling;<br />
}<br />
document.getElementById(id).getElementsByTagName('dt')[i]._dd = dd;<br />
document.getElementById(id).getElementsByTagName('dt')[i]._timoutID = null;<br />
document.getElementById(id).getElementsByTagName('dt')[i]._displayed = false;<br />
document.getElementById(id).getElementsByTagName('dt')[i].onclick = function()<br />
{<br />
clearTimeout(this._timoutID);<br />
if (!this._displayed)<br />
{<br />
var el = this.parentNode.getElementsByTagName('dt')[0];<br />
while (el)<br />
{<br />
if (el.nodeName.toLowerCase() == 'dt' && el != this)<br />
{<br />
el._displayed = false;<br />
if (czasZwin) display(el, 0);<br />
else display(el);<br />
}<br />
el = el.nextSibling;<br />
}<br />
}<br />
this._displayed = !this._displayed;<br />
if (this._displayed && czasRozwin || !this._displayed && czasZwin) display(this, 0);<br />
else display(this);<br />
};<br />
if (otworz)<br />
{<br />
document.getElementById(id).getElementsByTagName('dt')[i].onmouseover = function()<br />
{<br />
clearTimeout(this._timoutID);<br />
var dt = this;<br />
this._timoutID = setTimeout(function () { dt._displayed = false; dt.onclick(); }, czasOtworz);<br />
};<br />
document.getElementById(id).getElementsByTagName('dt')[i].onmouseout = function()<br />
{<br />
clearTimeout(this._timoutID);<br />
var dt = this;<br />
this._timoutID = setTimeout(function () { dt._displayed = true; dt.onclick(); }, czasZamknij);<br />
};<br />
}<br />
}<br />
<br />
start(document.getElementById(id).getElementsByTagName('dt')[0]);<br />
<br />
function start(dt)<br />
{<br />
var hide = true;<br />
var el = dt;<br />
while (el)<br />
{<br />
var nodeName = el.nodeName.toLowerCase();<br />
if (nodeName == 'dt')<br />
{<br />
dt = el;<br />
hide = true;<br />
}<br />
if (nodeName == 'dt' || nodeName == 'dd')<br />
{<br />
if (!nieInicjalizuj && el.getElementsByTagName('a').length)<br />
{<br />
var active = el.getElementsByTagName('a')[0].href && unescape(el.getElementsByTagName('a')[0].href.replace(/#.*/, '')) == url;<br />
if (!active)<br />
{<br />
var rel = el.getElementsByTagName('a')[0].getAttribute('rel');<br />
if (rel)<br />
{<br />
var matches = (' ' + rel + ' ').match(/\s+Collection\(([^)]+)\)\s+/i);<br />
if (matches)<br />
{<br />
matches = matches[1].split(',');<br />
for (var k = 0, pos = -1; k < matches.length; k++)<br />
{<br />
if (matches[k].charAt(0) == '[' && (pos = matches[k].lastIndexOf(']')) > 0)<br />
{<br />
if (new RegExp(unescape(matches[k].substring(1, pos)), matches[k].substring(pos + 1)).test(url))<br />
{<br />
active = true;<br />
break;<br />
}<br />
}<br />
else<br />
{<br />
if (/^[\/\\]/.test(matches[k])) matches[k] = window.location.protocol + '//' + window.location.host + matches[k];<br />
else if (!/^[a-z0-9]+:/i.test(matches[k])) matches[k] = base + matches[k];<br />
if (unescape(matches[k].replace(/[\/\\]\.([\/\\])/g, '$1').replace(/[^\/\\]+[\/\\]\.\.[\/\\]/g, '').replace(/#.*/, '')) == url)<br />
{<br />
active = true;<br />
break;<br />
}<br />
}<br />
}<br />
}<br />
}<br />
}<br />
if (active)<br />
{<br />
el.className = (el.className ? el.className + ' ' : '') + 'active';<br />
dt._displayed = true;<br />
display(dt);<br />
hide = false;<br />
var el_parentNode = el.parentNode;<br />
while (el_parentNode != document.getElementById(id))<br />
{<br />
if (el_parentNode.nodeName.toLowerCase() == 'dd')<br />
{<br />
var el_sibling = el_parentNode.previousSibling;<br />
while (el_sibling)<br />
{<br />
if (el_sibling.nodeName.toLowerCase() == 'dt')<br />
{<br />
el_sibling._displayed = true;<br />
display(el_sibling)<br />
break;<br />
}<br />
el_sibling = el_sibling.previousSibling;<br />
}<br />
}<br />
el_parentNode = el_parentNode.parentNode;<br />
}<br />
}<br />
}<br />
}<br />
if (nodeName == 'dd')<br />
{<br />
if (hide) el.style.display = 'none';<br />
start(el.getElementsByTagName('dt')[0]);<br />
}<br />
el = el.nextSibling;<br />
}<br />
}<br />
<br />
function display(dt, i)<br />
{<br />
if (typeof i == 'undefined')<br />
{<br />
for (var i = 0; i < dt._dd.length; i++)<br />
{<br />
dt._dd[i].style.display = dt._displayed ? 'block' : 'none';<br />
if (!dt._displayed)<br />
{<br />
for (var j = 0; j < dt._dd[i].getElementsByTagName('dt').length; j++)<br />
{<br />
dt._dd[i].getElementsByTagName('dt')[j]._displayed = false;<br />
display(dt._dd[i].getElementsByTagName('dt')[j]);<br />
}<br />
}<br />
}<br />
}<br />
else if (i < dt._dd.length)<br />
{<br />
var dir = wysun ? !dt._displayed : dt._displayed;<br />
var n = dir ? i : dt._dd.length - 1 - i;<br />
dt._dd[n].style.display = dt._displayed ? 'block' : 'none';<br />
if (!dt._displayed)<br />
{<br />
for (var j = 0; j < dt._dd[n].getElementsByTagName('dt').length; j++)<br />
{<br />
dt._dd[n].getElementsByTagName('dt')[j]._displayed = false;<br />
display(dt._dd[n].getElementsByTagName('dt')[j]);<br />
}<br />
}<br />
dt._timoutID = setTimeout(function() { display(dt, i + 1); }, dt._displayed ? czasRozwin : czasZwin);<br />
}<br />
}<br />
}<br />
//
do pliku html w body
- Cześć 1
- Cześć 2
- Cześć 3
- Cześć 4
[/code]