Autor Zpráva
zezmen
Profil
Dobrý den,
potýkám se s problémem jak správně vytvořit náhradu a to pro následující:
BBCode by mělo být něco jako:
[Expander][Nadpis={Nadpis}][Nadpis1={Nadpis1}][Nadpis2={Nadpis2}][Nadpis3={Nadpis3}][Text1={Text1}][Text2={Text2}][Text3={Text3}][/Expander]


HTML je:
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://localhost/BBCode/style.css" type="text/css" />
</head>
<body>
<ul class="acc" id="acc">
    <li>
        <h3>{Nadpis}</h3>
        <div class="acc-section">
            <div class="acc-content">
                <ul class="acc" id="nested">
                    <li>
                        <h3>{Nadpis1}</h3>
                        <div class="acc-section">
                            <div class="acc-content">
                                 {Text1}
                            </div>
                        </div>
                    </li>
                    <li>
                        <h3>{Nadpis2}</h3>
                        <div class="acc-section">
                            <div class="acc-content">
                                {Text2}
                            </div>
                        </div>
                    </li>
                    <li>
                        <h3>{Nadpis3}</h3>
                        <div class="acc-section">
                            <div class="acc-content">
                                {Text3}
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </li>

</ul>
<script type="text/javascript" src="http://localhost/BBCode/script.js"></script>

<script type="text/javascript">

var parentAccordion=new TINY.accordion.slider("parentAccordion");
parentAccordion.init("acc","h3",false,-1);

var nestedAccordion=new TINY.accordion.slider("nestedAccordion");
nestedAccordion.init("nested","h3",true,-1,"acc-selected");

</script>
</body>
</html>

Java Script je zde:
var TINY={};

function T$(i){return document.getElementById(i)}
function T$$(e,p){return p.getElementsByTagName(e)}

TINY.accordion=function(){
    function slider(n){this.n=n; this.h=[]; this.c=[]}
    slider.prototype.init=function(t,e,m,o,k){
        var a=T$(t), i=x=0; this.s=k||'', w=[], n=a.childNodes, l=n.length; this.m=m||false;
        for(i;i<l;i++){if(n[i].nodeType!=3){w[x]=n[i]; x++}} this.l=x;
        for(i=0;i<this.l;i++){
            var v=w[i]; this.h[i]=h=T$$(e,v)[0]; this.c[i]=c=T$$('div',v)[0]; h.onclick=new Function(this.n+'.pr(false,this)');
            if(o==i){h.className=this.s; c.style.height='auto'; c.d=1}else{c.style.height=0; c.d=-1}
        }
    };
    slider.prototype.pr=function(f,d){
        for(var i=0;i<this.l;i++){
            var h=this.h[i], c=this.c[i], k=c.style.height; k=k=='auto'?1:parseInt(k); clearInterval(c.t);
            if((k!=1&&c.d==-1)&&(f==1||h==d)){
                c.style.height=''; c.m=c.offsetHeight; c.style.height=k+'px'; c.d=1; h.className=this.s; su(c,1)
            }else if(k>0&&(f==-1||this.m||h==d)){
                c.d=-1; h.className=''; su(c,-1)
            }
        }
    };
    function su(c){c.t=setInterval(function(){sl(c)},10)};
    function sl(c){
        var h=c.offsetHeight, d=c.d==1?c.m-h:h; c.style.height=h+(Math.ceil(d/10)*c.d)+'px';
        c.style.opacity=h/c.m; c.style.filter='alpha(opacity='+h*100/c.m+')';
        if((c.d==1&&h>=c.m)||(c.d!=1&&h==1)){if(c.d==1){c.style.height='auto'} clearInterval(c.t)}
    };
    return{slider:slider}
}();

CSS style je zde:
* {margin:0; padding:0; font:12px Verdana,Arial}
code {font-family:"Courier New",Courier}

#options {width:457px; margin:20px auto; text-align:right; color:#9ac1c9}
#options a {text-decoration:none; color:#9ac1c9}
#options a:hover {color:#033}

#acc {width:457px; list-style:none; color:#033; margin:0 auto 40px}
#acc h3 {width:443px; border:1px solid #9ac1c9; padding:6px 6px 8px; font-weight:bold; margin-top:5px; cursor:pointer; background:url(images/header.gif)}
#acc h3:hover {background:url(images/header_over.gif)}
#acc .acc-section {overflow:hidden; background:#fff}
#acc .acc-content {width:425px; padding:15px; border:1px solid #9ac1c9; border-top:none; background:#fff}

#nested {width:425px; list-style:none; color:#033; margin-bottom:15px}
#nested h3 {width:411px; border:1px solid #9ac1c9; padding:6px 6px 8px; font-weight:bold; margin-top:5px; cursor:pointer; background:url(images/header.gif)}
#nested h3:hover {background:url(images/header_over.gif)}
#nested .acc-section {overflow:hidden; background:#fff}
#nested .acc-content {width:393px; padding:15px; border:1px solid #9ac1c9; border-top:none; background:#fff}
#nested .acc-selected {background:url(images/header_over.gif)}

Předem děkuji za nápady.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: