Hi all,
I have written a small extension for the window.js (
http://prototype-window.xilinus.com/ version 1.3).
*What does it do?*
It adds an optional hover-function for the minimize, maximize and close
buttons. Backward-compatibility is guaranteed.
*How do I add this feature for my windows or dialog?*
1. apply the diff to the window.js v1.3
2. Add styles-tags for your active and blurred windows ending in
_close_hover, maximize_hover and minimize_hover to define the style of your
buttons while the mouse hovers over them.
3. Add the option "buttonHoverStyles:true," when initializing your window.
*What does the .diff do in detail?*
It adds the option-default for buttonHoverStyles as false in the
initialize-method to guarantee backward-compatibility.
In _createWindow() it checkes buttonHoverStyles and accordingly adds in-tag
event-handlers for onmouseover and onmouseoutto the button-divs. These in
turn change the classname of the div to realise the hover-effect.
Have fun!
Henning.
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/prototype-scriptaculous/-/hv8N4Fq76GUJ.
To post to this group, send email to prototype-scriptaculous@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
67
> buttonHoverStyles: false,
599,601c600,620
< var closeDiv = this.options.closable ? "<div class='"+ className +"_close' id='"+ id +"_close' onclick='Windows.close(\""+ id +"\", event)'> </div>" : "";
< var minDiv = this.options.minimizable ? "<div class='"+ className + "_minimize' id='"+ id +"_minimize' onclick='Windows.minimize(\""+ id +"\", event)'> </div>" : "";
< var maxDiv = this.options.maximizable ? "<div class='"+ className + "_maximize' id='"+ id +"_maximize' onclick='Windows.maximize(\""+ id +"\", event)'> </div>" : "";
---
> var closeDiv = "";
> var minDiv = "";
> var maxDiv = "";
> if(this.options.buttonHoverStyles) {
> closeDiv = this.options.closable ? "<div class='"+ className +"_close' id='"+ id +"_close' onclick='Windows.close(\""+ id +"\", event)' "
> +"onmouseover=\"$('" + id + "_close').className = $('" + id + "_close').className + '_hover';\" "
> +"onmouseout=\"$('" + id + "_close').className = $('" + id + "_close').className.sub('_hover','');\"> </div>"
> : "";
> minDiv = this.options.minimizable ? "<div class='"+ className + "_minimize' id='"+ id +"_minimize' onclick='Windows.minimize(\""+ id +"\", event)' "
> +"onmouseover=\"$('" + id + "_minimize').className = $('" + id + "_minimize').className + '_hover';\" "
> +"onmouseout=\"$('" + id + "_minimize').className = $('" + id + "_minimize').className.sub('_hover','');\"> </div>"
> : "";
> maxDiv = this.options.maximizable ? "<div class='"+ className + "_maximize' id='"+ id +"_maximize' onclick='Windows.maximize(\""+ id +"\", event)' "
> +"onmouseover=\"$('" + id + "_maximize').className = $('" + id + "_maximize').className + '_hover';\" "
> +"onmouseout=\"$('" + id + "_maximize').className = $('" + id + "_maximize').className.sub('_hover','');\"> </div>"
> : "";
> } else {
> closeDiv = this.options.closable ? "<div class='"+ className +"_close' id='"+ id +"_close' onclick='Windows.close(\""+ id +"\", event)'> </div>" : "";
> minDiv = this.options.minimizable ? "<div class='"+ className + "_minimize' id='"+ id +"_minimize' onclick='Windows.minimize(\""+ id +"\", event)'> </div>" : "";
> maxDiv = this.options.maximizable ? "<div class='"+ className + "_maximize' id='"+ id +"_maximize' onclick='Windows.maximize(\""+ id +"\", event)'> </div>" : "";
> }
