Zaczerpnięte z http://www.dynami...ordion.htm :) Przystosowane do PF7. Proszę o wyrozumiałość, to moja pierwsza modyfikacja :P
1. Wklej w themes/templates/header.php przed:
echo "</head>\n<body>\n";
to:
echo "<!--Make sure your page contains a valid doctype at the very top-->
<link rel='stylesheet' type='text/css' href='haccordion.css' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type='text/javascript' src='haccordion.js'>
/***********************************************
* Horizontal Accordion script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<style type='text/css'>
/*CSS for example Accordion #hc1*/
#hc1 li{
margin:0 3px 0 0; /*Spacing between each LI container*/
}
#hc1 li .hpanel{
padding: 5px; /*Padding inside each content*/
background: lightblue;
}
/*CSS for example Accordion #hc2*/
#hc2 li{
margin:0 0 0 0; /*Spacing between each LI container*/
border: 12px solid black;
}
#hc2 li .hpanel{
padding: 5px; /*Padding inside each content*/
background: #E2E9FF;
cursor: hand;
cursor: pointer;
}
</style>
<script type='text/javascript'>
haccordion.setup({
accordionid: 'hc1', //main accordion div id
paneldimensions: {peekw:'50px', fullw:'400px', h:'158px'},
selectedli: [0, true], //[selectedli_index, persiststate_bool]
collapsecurrent: false //<- No comma following very last setting!
})
haccordion.setup({
accordionid: 'hc2', //main accordion div id
paneldimensions: {peekw:'30px', fullw:'450px', h:'150px'},
selectedli: [-1, true], //[selectedli_index, persiststate_bool]
collapsecurrent: true //<- No comma following very last setting!
})
</script>";
2. Rozpakuj pliki z załącznika i prześlij do głównego katalogu.
3. Wklej w nowy panel to:
echo "<h2>Demo 1:</h2>
<div id='hc1' class='haccordion'>
<ul>
<li>
<div class='hpanel'>
<img src='http://img502.imageshack.us/img502/746/thailand.jpg' style='float:left; padding-right:8px; width:200px; height:148px' />The Andaman Sea is regarded as Thailand's most precious natural resource as it hosts the most popular and luxurious resorts in Asia.
</div>
</li>
<li>
<div class='hpanel'>
<img src='http://img264.imageshack.us/img264/7199/japan.jpg' style='float:left; padding-right:8px; width:200px; height:148px' />Japan is a constitutional monarchy where the power of the Emperor is very limited.
</div>
</li>
<li>
<div class='hpanel'>
<img src='http://img101.imageshack.us/img101/516/mayai.jpg' style='float:left; padding-right:8px; width:200px; height:148px' />Malaysia is a South Asian country rich in natural resources in areas such as agriculture, forestry and minerals.
</div>
</li>
<li>
<div class='hpanel'>
<img src='http://img194.imageshack.us/img194/9553/camam.jpg' style='float:left; padding-right:8px; width:200px; height:148px' />Agriculture has long been the most important sector of the Cambodian economy.
</div>
</li>
<li>
<div class='hpanel'>
<img src='http://img408.imageshack.us/img408/5751/langkawi.jpg' style='float:left; padding-right:8px; width:200px; height:148px' />Langkawi is particularly known for its beaches which are among the best in Malaysia.
</div>
</li>
</ul>
</div>
<p style='clear:left'><a href=\"javascript:haccordion.expandli('hc1', 0)\">Expand 1 Panel</a> | <a href=\"javascript:haccordion.expandli('hc1', 1)\">Expand 2nd Panel</a> | <a href=\"javascript:haccordion.expandli('hc1', 2)\">Expand 3rd Panel</a> | <a href=\"javascript:haccordion.expandli('hc1', 3)\">Expand 4th Panel</a> | <a href=\"javascript:haccordion.expandli('hc1', 4)\">Expand 5th Panel</a></p>
<br />
<h2>Demo 2:</h2>
<div id='hc2' class='haccordion'>
<ul>
<li style='border-right-width:0'>
<div class='hpanel' style='padding:10px; width:250px'>
This accordion content has a custom full width of 250px. Note where the two inline CSS are added within the markup.
</div>
</li>
<li style='border-right-width:0'>
<div class='hpanel' style='padding:10px; width:180px'>
This accordion content has a custom full width of 180px. Note where the two inline CSS are added within the markup.
</div>
</li>
<li style='border-right-width:0'>
<div class='hpanel' style='padding:10px; width:350px'>
This accordion content has a custom full width of 350px. Note where the two inline CSS are added within the markup.
</div>
</li>
<li>
<div class='hpanel' style='padding:10px; width:550px'>
This accordion content has a custom full width of 550px. Note where the two inline CSS are added within the markup.
</div>
</li>
</ul>
</div>";
Wg. mnie bardzo ładny efekt :) Demo: http://www.hiro.u...
Edit: Kod panela uaktualniony.
Reyn dodał/a następującą plik:
Edytowane przez Pieka dnia 31.12.2009 16:21:27
|
v7.02.07
Od teraz będę starał się robić w OH 
