05.07.09
very simple js tab script
Moin Moin,
actually I needed a simple tab script for a page with tabbed navigation. Because coding is fun I decided to write my own, very simple tab script. In this case I used prototype. The whole thing is for a little picture gallery which you can see here: http://www.woodheads.de/docs/picsframe.html. This is a page from my friends of my hometown in southern Germany. My job is to extend the existing code.
There are two div areas marked with a id. The name of the id starts with page_ as an identifier. prototype has a nice method to get all elements with a special attribute. In this case I grab the div elements having a id with $$('div[id]'). That makes it possible to iterate over the grabed div's and handle only the needed objects - choosen with a simple regex.
This is the basic HTML structure:
Code:
<span onclick="Pics.change_page('lutterhaus')">Lutterhaus</span> | | |
<span onclick="Pics.change_page('plankstadt')">Plankstadt</span> | |
| |
<div id="page_plankstadt" style="display:none"> | |
<div id="pic_gallery"> | |
<div class="pics"> | |
<img id="1" onclick="Pics.show_pic(this.id,'pla');" src="/img/1_th.jpg" alt="#" /><br /> | |
<img id="2" onclick="Pics.show_pic(this.id,'pla');" src="/img/2_th.jpg" alt="#" /><br /> | |
</div> | |
<div style="float:left;" id="pla" class="big_pic"><img src="/images/1.jpg" /></div> | |
<div class="pics"> | |
<img id="3" onclick="Pics.show_pic(this.id,'pla');"src="/img/5_th.jpg" alt="#" /><br /> | |
<img id="4" onclick="Pics.show_pic(this.id,'pla');"src="/img/6_th.jpg" alt="#" /><br /> | |
</div> | |
<div style="clear:both"></div> | |
</div> | |
</div> | |
| |
<div id="page_lutterhaus" style="display:none"> | |
<div id="pic_gallery"> | |
<div class="pics"> | |
<img id="5" onclick="Pics.show_pic(this.id,'pla');" src="/img/5_th.jpg" alt="#" /><br /> | |
<img id="6" onclick="Pics.show_pic(this.id,'pla');" src="/img/6_th.jpg" alt="#" /><br /> | |
</div> | |
<div style="float:left;" id="lutt" class="big_pic"><img src="/images/1.jpg" /></div> | |
<div class="pics"> | |
<img id="7" onclick="Pics.show_pic(this.id,'pla');"src="/img/7_th.jpg" alt="#" /><br /> | |
<img id="8" onclick="Pics.show_pic(this.id,'pla');"src="/img/8_th.jpg" alt="#" /><br /> | |
</div> | |
<div style="clear:both"></div> | |
</div> | |
</div> |
And here the JavaScript code:
Code:
<script language="javascript"> | |
var Pics = { | |
show_pic: function(id,area) { | |
$(area).innerHTML = '<img src="/images/' + id + '.jpg" />'; | |
}, | |
change_page: function(show) { | |
// get the div elements with attribute id | |
var elem = $$('div[id]'); | |
| |
// iterate over the div elements | |
for(i = 0; i < elem.length; i++) { | |
// id does not match page_ | |
if(!elem[i].id.match(/^page_/)) continue; | |
// we ignore the page to be choosen | |
if(elem[i].id == 'page_' + show) continue; | |
| |
// all matched elements will be hidden | |
elem[i].style.display = 'none'; | |
} | |
| |
// only the page we want to see is set to display | |
$('page_' + show).style.display = 'block'; | |
} | |
} | |
</script> |
I think this is quiet simple and very lightweight. For sure scriptaculous and jQuery (yes - and many other librarys) offer ready to go solutions for tabbed pages. But sometimes you just need a minimum of what these librarys can do and it's faster to write it by yourself.
Extending this for your needs hould be more than simple.
Andreas
No feedback yet
Comment feed for this postHinterlasse einen Kommentar
WIKI
Bookmark
Blog Verzeichnis
