mui.boxes.js

一套基于开源javascript framework mootools的UI

/*
Script: mui.boxes.js
	MUI - Mootools UI project

License:
	MIT-style license.

MUI Copyright:
	copyright (c) 2007 Nir Tayeb, <[e-mail]>

MUI Credits:
	- MooTools Rocks!


MooTools Depedencies:
    Core.js,
    Class.js, Class.Extras.js,
    Array.js, String.js, Function.js, Number.js,Element.js
    Element.Event.js, Element.Dimensions.js
    
    *Optional:*
	Drag.Base.js, Drag.Move.js

*/

if(!window["MUI"]) window["MUI"]={};
MUI.BaseBox = new Class({
    options:{
	    draggable: false,
	    position: null,
	    className:"mui-box"
    },
    initialize:function(options){
	this.setOptions(options);
	this.el = new Element("div").addClass(this.options.className);
    },
    
    _initElement:function(){
	if(!!Element.prototype.makeDraggable && this.options.draggable){
	    this.el.makeDraggable();
	}
	
	if(!this.options.position){
	    this.options.position = MUI.BaseBox.CenterMiddle();
	}
	
	var self = this;
	this.el.setStyles({
	    position:"absolute",
	    top:(self.options.position['y']<1)?([self.options.position['y']*100, "%"].join("")):[self.options.position['y'],"px"].join(""),
	    left:(self.options.position['x']<1)?([self.options.position['x']*100, "%"].join("")):[self.options.position['x'],"px"].join(""),
	    "z-index":150,
	    "display":"block",
	    "visibility":"visible"
	});
	
    },
    
    show:function(){
	this.el.setStyle("visibility","hidden");
	if(this.el.parentNode==null){
	    this.el.injectInside(document.body);
	}
	this._initElement();
    },
    
    hide:function(){
	var tmp = this.el.remove();
	this.el = tmp;
    }
});
MUI.BaseBox.implement(new Options);

MUI.BaseBox.CenterMiddle = function(){
    var sW = screen.availWidth,
	sH = screen.availHeight;
    
    return {
	x: Math.floor(sW*0.27),
	y: Math.floor(sH*0.27)
    };
}; 

MUI.Dialog = MUI.BaseBox.extend({
    initialize:function(content, buttons, options){
	this.parent(options);
	this.content = content;
	this.buttons = buttons || [];
    },
    
    show:function(){
	new Element("p").appendText(this.content).injectInside(this.el);
	this.buttons.each(function(button){
	    var btn = new Element("input");
	    btn.setProperty("type","button").appendText(button[0]);
	    btn.addEvent("click", button[1].bind(this) || this.hide.bind(this));
	    btn.injectInside(this.el);
	}.bind(this));
	this.parent();
    }
});

MUI.Modal = {
    
    show:function(){
	this.screen = new Element("div").addClass("mui-box-screen");
	this.screen.setStyles({
	    "height":screen.availHeight+"px",
	    "width":screen.availWidth+"px",
	    "display":"block"
	});
	var fncStop = function(e){ new Event(e).stop(); }
	this.screen.addEvent("mousedown", fncStop).addEvent("keydown", fncStop);
	this.parent();
	this.screen.injectInside(document.body);
    },
    
    hide:function(){
	this.screen.remove();
	this.parent();
    }
    
};

MUI.ModalDialog = MUI.Dialog.extend(MUI.Modal);

MUI.ElementBox = MUI.BaseBox.extend({
    options:{
	draggable: false,
	position: null,
	className:"mui-box",
	effectOptions:{}
    },
    initialize:function(el, options){
	this.setOptions(options);
	this.el = el;
	this.el.setStyle("display", "none");
	
    },
    show:function(){
	this.parent();
	this.el.setStyles({
	    opacity:0,
	    display:"block"
	});
	
	this.el.effects(this.options.effectOptions).start({opacity:1});
	
    },
    hide:function(){
	this.el.effects(this.options.effectOptions)
		.addEvent("onComplete", function(){
		    this.el.setStyle("display","nonde");
		}.bind(this))
		.start({opacity:0});
    }
});

MUI.ModalElementBox = MUI.ElementBox.extend(MUI.Modal);

Element.extend({
    asBox:function(modal, options){
	return new MUI[modal?"ModalElementBox":"ElementBox"](this, options);
    }
});