Tersembunyi dengan Switch Content Script

|
JavaScript membuat konten menyatu dan tersembunyi. Jika anda klik judulnya maka konten yang ada didalamnya akan terlihat. Untuk membuat rapi juga.



Demo :

Contoh Pertama

Contoh Kedua

Contoh Ketiga

Hanya sekedar contoh...

[open] Contoh Pertama

Hanya sekedar contoh...

[open] Contoh Kedua

Hanya sekedar contoh...

[closed] Contoh Ketiga




Cara membuatnya

Dari Dashboard >> Design >> Edit HTML.

Langkah pertama > Penempatan kode CSS dan URL JavaScript
dibawah ]]></b:skin>
........
diatas </head>
<style type='text/css'>
.handcursor{cursor:hand;cursor:pointer;}
</style>
<script type="text/javascript" src="http://pagenano.googlecode.com/files/Tesembunyi%20dengan%20Switch%20Content%20Script.js" ></script>

Langkah kedua > Penempatan kode HTML dan JavaScript
dibawah <body>
........
diatas </body>

Contoh yang pertama :
<h3 id='bobcontent1-title' class='handcursor'>Contoh Pertama</h3>
<div id='bobcontent1' class='switchgroup1'>
Hanya sekedar contoh...
</div>

<h3 id='bobcontent2-title' class='handcursor'>Contoh Kedua</h3>
<div id='bobcontent2' class='switchgroup1'>
Hanya sekedar contoh...
</div>

<h3 id='bobcontent3-title' class='handcursor'>Contoh Ketiga</h3>
<div id='bobcontent3' class='switchgroup1'>
Hanya sekedar contoh...
</div>

<script type='text/javascript'>
//<![CDATA[

// MAIN FUNCTION: new switchcontent("class name", "[optional_element_type_to_scan_for]") REQUIRED
// Call Instance.init() at the very end. REQUIRED

var bobexample=new switchcontent("switchgroup1", "div") //Limit scanning of switch contents to just "div" elements
bobexample.setStatus('<img src="http://img242.imageshack.us/img242/5553/opencq8.png" /> ', '<img src="http://img167.imageshack.us/img167/7718/closedy2.png" /> ')
bobexample.setColor('darkred', 'black')
bobexample.setPersist(true)
bobexample.collapsePrevious(true) //Only one content open at any given time
bobexample.init()

//]]>
</script>

Contoh yang kedua :
<h3 id='joecontent1-title' class='handcursor'>Contoh Pertama</h3>
<p id='joecontent1' class='switchgroup2'>
Hanya sekedar contoh...
</p>

<h3 id='joecontent2-title' class='handcursor'>Contoh Kedua</h3>
<p id='joecontent2' class='switchgroup2'>
Hanya sekedar contoh...
</p>

<h3 id='joecontent3-title' class='handcursor'>Contoh Ketiga</h3>
<p id='joecontent3' class='switchgroup2'>
Hanya sekedar contoh...
</p>

<script type='text/javascript'>
//<![CDATA[

var joeexample=new switchcontent("switchgroup2", "p") //Limit scanning of switch contents to just "p" elements
joeexample.setStatus('[open] ', '[closed] ')
joeexample.setColor('green', 'red')
joeexample.collapsePrevious(false)
joeexample.setPersist(false)
joeexample.defaultExpanded(0,1)
joeexample.init()

//]]>
</script>

0 komentar:

Posting Komentar

Next Prev
▲Top▲