Horizontal Accordion script - Przegląd treści w formie horyzontalnego akordeonu

Skrypt zmiena zwykłe znaczniki <UL> w listę poziomego akordeonu. Po najechaniu na znacznik <LI> rozwija się zawartość treści. Znaczniki HTML czyli zawartość poszczególnych <LI> mogą być określone bezpośrednio w kodzie strony lub pliku zewnętrznym pobierane za pośrednictwem Ajax-a. Można odgórnie określić który znacznik ma być rozwinięty domyślnie, czy też ma zostać rozwinięty ostatnio otwarty znacznik. Wszystko ma ładny estetyczny wygląd i gładko przechodzącą animację na poziomym akordeonie.

Przykład TUTAJ na stronie autora

Oto zawartość sekcji HEAD:

<!--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>

Pliki do pobrania i umieszczenia w folderze strony:

haccordion.js
haccordion.css

Zawartość i wywołanie w sekcji BODY:

<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>

A oto przykładowa konfiguracja obejmująca definiowanie znaczników html na poziomym akordeonie, które powinny się składać z DIV-ów i UL-ów w środku listy:

<div id="hc1" class="haccordion">
<ul>

<li>
<div class="hpanel">
Accordion content 1 here
</div>
</li>

<li>
<div class="hpanel">
Accordion content 2 here
</div>
</li>

<li>
<div class="hpanel">
Accordion content 3 here
</div>
</li>

</ul>
</div>

Dodatkowo przykład zdefiniowania DIV-a i klasy. Proszę się przyjrzeć, które elementy podlegają korekcie:

haccordion.setup({
accordionid: 'hc1', //main accordion div id
paneldimensions: {peekw:'50px', fullw:'400px', h:'158px'},
selectedli: [0, true], //[selectedli_index, persiststate_bool]
collapsecurrent: false //collapse current expanded li when mouseout into general space?
})

 

Popularne Artykuly

Najnowsze Artykuły