Show/hide glossary page in YUI
- by QLiu
Hello All,
I am trying to develop a toggle function like http://www.lutsr.nl/yui/toggle/
But it works a little different as them. When user enters the glossary page, he sees a full list of Alphabet with all the techical terms explaination
All — A | B | C | E | G | H | M | P | Q | R | S | T | U | Z |
ActiveSync®
Microsoft® ActiveSync est l’ application permettant à un pocket pc d’ échanger des informations avec un ordinateur . Le Pocket PC doit utiliser Microsoft Windows Mobile™ ou Windows CE.
Bluetooth®
Le Bluetooth permet aux informations d’ être transmises entre les appareils électroniques qui ont le Bluetooth. Si vous utilisez le Bluetooth, vous n'avez pas besoin de connecter les périphériques à l'aide de câbles.
.............................
If the user clicks B Alphabet, the rest of content will hide, except B.
and B will be move to top of the section.
If the user clicks All aplphabet, the whole list will be reset.
What I have now, it is able to show/hide and listen to click event. Here is my source code:
<a href="#A" class ="toggle" rel="A_section,fade,20"> A</a> |
<a href="#B" class ="toggle" rel="B_section,fade,20"> B</a> |
Script:
//Load JavaScript Ready event.
this.toggleLinks=YAHOO.util.Dom.getElementsByClassName("toggle");
for(var i=0; i<this.toggleLinks.length; i++) {
YAHOO.util.Event.addListener(this.toggleLinks[i], "click", this.animateElements,this);
}
toggleElements : function(e,controlNode,refEl) {
if(controlNode && refEl) {
if(YAHOO.util.Dom.hasClass(refEl,"show")) {
YAHOO.util.Dom.removeClass(controlNode,"selected");
YAHOO.util.Dom.removeClass(refEl,"show");
} else {
YAHOO.util.Dom.addClass(controlNode,"selected");
YAHOO.util.Dom.addClass(refEl,"show");
}
}
// to disable control node's default behaviour
return false;
},
animateElements : function(e,obj) {
// obj = javascript toggle object
// this = link clicked
YAHOO.util.Event.preventDefault(e);
if(this.rel) {
controlNode = this;
}
if(typeof(controlNode) == "string") {
controlNode = YAHOO.util.Dom.get(controlNode);
}
// objParameters
// [0] = object id
// [1] = animation type (fade, slide)
// [2] = animation duration (seconds)
var linkClicked = this;
var objParameters = controlNode.rel.split(",");
var refEl = YAHOO.util.Dom.get(objParameters[0]);
var objStatus = YAHOO.util.Dom.hasClass(refEl,"show"); // if true, object is shown
switchClasses = function() {
obj.toggleOtherElements(e,linkClicked,refEl);
obj.toggleElements(e,linkClicked,refEl);
}
if(objParameters[1] == "fade") {
if(objStatus == true) {
var attributes = {
opacity: {from: .999, to: 0}
}
var objAnim = new YAHOO.util.Anim(objParameters[0],attributes);
objAnim.useSeconds = false;
objAnim.duration = objParameters[2];
objAnim.onComplete.subscribe(switchClasses);
objAnim.animate();
} else {
YAHOO.util.Dom.setStyle(objParameters[0],"opacity",0);
switchClasses();
var attributes = {
opacity: {from: 0, to: .999}
}
var objAnim = new YAHOO.util.Anim(objParameters[0],attributes);
objAnim.useSeconds = false;
objAnim.duration = objParameters[2];
objAnim.animate();
}
} else if (objParameters[1] == "slide") {
// not implemented yet
} else {
// NO ANIMATION - switch classes
switchClasses();
}
},
toggleOtherElements : function(e,linkClicked,refEl) {
// toggle selected state of other elements pointing to the same source
for(var i=0; i<this.toggleLinks.length; i++) {
var objParameters = this.toggleLinks[i].rel.split(",");
var linkClickedParameters = linkClicked.rel.split(",");
if(objParameters[0] == linkClickedParameters[0]) {
if(YAHOO.util.Dom.hasClass(this.toggleLinks[i],"selected")) {
YAHOO.util.Dom.removeClass(this.toggleLinks[i],"selected");
} else {
YAHOO.util.Dom.addClass(this.toggleLinks[i],"selected");
}
}
}
}
