BBKód "rozbalto" pro skrytí a zobrazení nějakého obsahu

[leschek]

BBKód "rozbalto" pro skrytí a zobrazení nějakého obsahu[nepravyklik][/nepravyklik]

Tento BBKód by měl skrýt a ,po kliknutí na "hlavní text", zobrazit nějaký obsah příspěvku.

Stažení skriptu a jeho nahraní na server

BBKód je vytvořený pomocí skriptu switchcontent.js staženého z dynamicdrive.com

Vložil jsem ho do hlavní složky fóra do vytvořeného adresáře scripts (root/scripts/switchcontent.js)

Úprava souborů

Otevřít: styles/prosilver/template/overall_header.html

Najít

Code: Select all

</head>

Před to vložit

Code: Select all

<script type="text/javascript" src="scripts/switchcontent.js" >
/***********************************************
* Switch Content script- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

Otevřít: styles/prosilver/theme/colours.css

(vložit do každého stylu - musí se upravit barvy. BBKód bude fungovat i bez úpravy tohoto souboru, nebude obarvený, odsazený atd.)

Na konec vložit

Code: Select all

/*Zacatek BBcode rozbalto*/
.handcursor {
    cursor: hand;
    cursor: pointer;
    color: #333333;
    font-weight: bold;
}

.handcursor:hover {
    color: #222222;
}

.handcursor:active {
    color: #000000;
}

.switchgroup1{
    padding: 15px 0 0 30px;
    margin: 0px;
}
/* konec BBcode rozbalto */

Vytvoření BBKódu v administraci fóra

Administrace - Přispívání - Tagy BBCode

Použití BBCode

Code: Select all

[rozbalto={TEXT1}]{TEXT2}[/rozbalto]

HTML náhrada

Code: Select all

<div id="{TEXT1}-title" class="handcursor">{TEXT1}</div>
<div id="{TEXT1}" class="switchgroup1">{TEXT2}</div>

<script type="text/javascript">
// MAIN FUNCTION: new switchcontent("class name", "[optional_element_type_to_scan_for]") REQUIRED
// Call Instance.init() at the very end. REQUIRED

var rozbalto=new switchcontent("switchgroup1", "div") //Limit scanning of switch contents to just "div" elements
rozbalto.setPersist(false)
rozbalto.collapsePrevious(false) //Pokud se nastaví true, bude dříve zobrazený text, po kliknutí na další text, skrytý
rozbalto.init()
</script>

Nápověda

Code: Select all

[rozbalto=Hlavní text]Text zobrazený po kliknutí na "Hlavní text"[/rozbalto]

Poznámky a demo (klikněte):

1. Po vytvoření BBKódu pročistit cache fóra, prohlížeče (Ctrl+F5) a obnovit šablony a skiny.
2. Hlavní text musí být u každého použití BBKódu odlišný, protože se používá jako ID pro zobrazení skrytého textu. Nechcete, aby se po kliknutí na "hlavní text 1" zobrazil skrytý text pod "hlavním textem 2".
3. Hlavní text by se asi neměl formátovat, protože se jeho formátování načítá z css souboru. Nejspíš by šlo smazat kód z colours.css a hlavní text naformátovat pomocí BBKódů (nezkoušel jsem), spousta BBKódu by mohla trochu vadit, protože se hlavní text používá jako ID pro zobrazení skrytého textu.
4. Text zobrazený po kliknutí formátovat lze, ale je pravda, že jsem zkoušel jen odkazy, barvu textu a seznam. Ale mělo by to fungovat třeba i s obrázkama.
5. Další možnosti formátování skriptu naleznete dole na stránce dynamicdrive.com.
6. Další demo se spoustou skrytých textů najdete na mém hlavním fóru.