MyWidget

/** 
* 文件 MyWidget.js
* Version: 0.1.3beta
* 自定义控件相关 基于MyJs
* 备注：
*   0.1.2beta 实现滚动条控件鼠标滚动 兼容火狐、谷歌和ie 
*   0.1.3 添加touch控件 
*/
/**
* 弹出框js封装
* 参数说明：
* MyJs.MessageBox({
     title : '站内公告',           //对话框名称
     msg : '对话框内容',           //对话框内容 (msg,innerID,framesrc 必须三选一)
     innerID : 'divID',            //DOM ID,不为空时 将指定dom填充到弹出框内容区域
     framesrc: 'http://baidu.com', //ifram地址,不为空时 将连接地址页面填充到弹出框内容区域
     height:'220',			       //[可选]对话框高度  默认自适应
     width:'500',			       //[可选]对话框宽度  默认500
     top : '',                     //[可选]对话框顶部距离 默认页面居中
     left : '',                    //[可选]对话框左侧距离 默认页面居中
     titleheight : '',             //[可选]提示窗口标题高度 默认21
     bordercolor : '',             //[可选]提示窗口的边框颜色 默认#666699
     titlecolor : '',              //[可选]提示窗口的标题颜色 默认#1259a4
     titlebgcolor : '',            //[可选]提示窗口的标题背景色 默认#e4f1fb
     bgcolor : '',                 //[可选]提示内容的背景色 默认#FFFFFF"
* });
* 例如: 
*    var msgbox1=new $.MessageBox({"title":"站内公告","innerID":"testDiv","top":"0","left":"0"});
*    var msgbox2=new $.MessageBox({"title":"站内公告","msg":"你好"});
*    var msgbox3=new $.MessageBox({"title":"站内公告","framesrc":"test.aspx"});
* 
*/
MyJs.MessageBox = function(config){
    this._config=["title","msg","framesrc","width","height","titleheight","bordercolor","titlecolor","titlebgcolor","bgcolor","MsgAlign","innerID","top","left"];
    this.titleheight = "21"; // 提示窗口标题高度      
    this.bordercolor = "#666699"; // 提示窗口的边框颜色      
    this.titlecolor = "#1259a4"; // 提示窗口的标题颜色      
    this.titlebgcolor = "#e4f1fb"; // 提示窗口的标题背景色      
    this.bgcolor = "#FFFFFF"; // 提示内容的背景色    
    this.MsgAlign="left";
    this.title="";
    this.msg="";
    this.framesrc="";//fram地址
    this.innerID="";//嵌入DOM ID
    this.width=500;
    this.height;
    this.top=-1;
    this.left=-1;
    this.id="__msgbox_"+ Math.random();
    var c = this._config;
	for(var i = 0;i < c.length;i++) {
		if(config[c[i]] && typeof(config[c[i]]) != 'undefined'){
			this[c[i]] = config[c[i]];
		}
	}
    this.close=function(){
        document.body.removeChild(document.getElementById(this.id));
    };
    this.open=function(){
        var iWidth = document.documentElement.clientWidth;      
        var iHeight = document.documentElement.clientHeight+document.documentElement.scrollTop*2;
        if(this.top=="-1"){this.top=(iHeight-this.height)/2;}
        if(this.left=="-1"){this.left=(iWidth-this.width)/2;}
        var _msgbox = document.createElement("div");
        _msgbox.id=this.id;
        document.body.appendChild(_msgbox);
        var bgObj = document.createElement("div"); 
        bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;";
        _msgbox.appendChild(bgObj);     
        var msgObj=document.createElement("div");  
        msgObj.style.cssText = "position:absolute;font:11px '宋体';top:"+this.top+"px;left:"+this.left+"px;width:"+this.width+"px;height:"+this.height+"px;border:1px solid "+this.bordercolor+";background-color:"+this.bgcolor+";padding:1px;line-height:22px;z-index:102;";      
        _msgbox.appendChild(msgObj);     
        var table = document.createElement("table");      
        msgObj.appendChild(table);      
        table.style.cssText = "margin:0px;border:0px;padding:0px;";
        table.cellSpacing = 0;
        var tr = table.insertRow(-1);
        var titleBar = tr.insertCell(-1);
        titleBar.style.cssText = "width:"+(this.width-84)+"px;height:"+this.titleheight+"px;text-align:left;padding:3px;margin:0px;font:bold 13px '宋体';color:"+this.titlecolor+";cursor:move;background-color:" + this.titlebgcolor;      
        titleBar.style.paddingLeft = "10px";      
        titleBar.innerHTML = this.title;      
        var moveX = 0;      
        var moveY = 0;      
        var moveTop = 0;      
        var moveLeft = 0;      
        var moveable = false;      
        var docMouseMoveEvent = document.onmousemove;      
        var docMouseUpEvent = document.onmouseup;      
        var _width=this.width;
        var _height=this.height;
        titleBar.onmousedown = function(){      
            var evt = getEvent();      
            moveable = true;      
            moveX = evt.clientX;      
            moveY = evt.clientY;      
            moveTop = parseInt(msgObj.style.top);      
            moveLeft = parseInt(msgObj.style.left);     
            document.onmousemove = function(){
                if (moveable){      
                    var evt = getEvent();      
                    var x = moveLeft + evt.clientX - moveX;      
                    var y = moveTop + evt.clientY - moveY;      
                    if ( x > 0 &&( x + _width < iWidth-10) && y > 0 && (y + _height < iHeight-10) ){  
                        msgObj.style.left = x + "px";      
                        msgObj.style.top = y + "px";      
                    }
                }      
            };      
            document.onmouseup = function (){      
                moveable = false;   
            };
        };
        var closeBtn = tr.insertCell(-1);      
        closeBtn.style.cssText = "cursor:pointer; padding:2px;background-color:" + this.titlebgcolor;      
        closeBtn.innerHTML = "<span style=\"font-size:10pt;color:"+this.titlecolor+";\" mce_style=\"font-size:10pt;color:"+this.titlecolor+";\" id=\"closeBtn\">×关闭窗口";      
        closeBtn.onclick = function(){document.body.removeChild(_msgbox);};
        var msgBox = table.insertRow(-1).insertCell(-1);
        msgBox.style.cssText = "font:10pt '宋体';";
        msgBox.colSpan = 2;
        if(this.framesrc != ""){
            this.msg = "<iframe name=\"frmAlertWin"+this.id+"\" id=\"frmAlertWin"+this.id+"\" src=\"about:blank\" mce_src=\"about:blank\" frameborder=0 marginwidth=0 marginheight=0 style=\"height:"+(this.height-this.titleheight-10)+"px;width:100%;\"></iframe>";     
        }
        if(this.innerID!=""){
            msgObj.appendChild(document.getElementById(this.innerID));
        }  
        msgBox.innerHTML = "<div mce_style=\"text-align:"+this.MsgAlign+";\">"+this.msg+"</div>";             
        if(document.getElementById("frmAlertWin"+this.id) != null){
            document.getElementById("frmAlertWin"+this.id).src = this.framesrc += (this.framesrc.indexOf('?') == -1 ? '?' : '&') + "__msgbox_id="+this.id;
        }     
        getEvent=function(){      
            return window.event || arguments.callee.caller.arguments[0];
        };
    };
	this.open();
};
// 在ifram中关闭弹出框的一种封装方法  静态方法
MyJs.MessageBox.closeForFrame=function(){
    var __msgbox_id=MyJs.Url.getParaValue("__msgbox_id");
    var obj = window.parent.document.getElementById(__msgbox_id);
    window.parent.document.body.removeChild(obj);
};
/**
 * 自定义滚动条控件
 * id为div的id
*/
MyJs.ScrollDiv=function(id){
    var div2=$(id);
    var div_show=$.createElement("div",{"style":"overflow:hidden;"});
    var div1=$.createElement("div",{"style":"position:relative;word-break:break-all;float:left;overflow:hidden;"});
    var img1=$.createElement("div",{"style":"position:relative;background:url(images/pic_lg1.gif) repeat-y;width:9px;height:35px;background-color:#000;"});
    div_show.width(div2.width()).height(div2.height()).html(div2.html());
    div2.html("").append(div_show);
    div1.html(div_show.html());
    div_show.html("");
    div_show.append(div1,img1);
    
    var rePrint=function(){
        if(div1.height()>div_show.height()){
            div1.width(div_show.width()-10);
            img1.left(div_show.width()-10);
            div_show.css("background","url(images/pic_lgb.gif) repeat-y right");
            img1.show();
        }else{
            div1.width(div_show.width());
            img1.left(div_show.width());
            div_show.css("background","");
            img1.hide();
        }
    };
    var iL =1;
    var maxL=1;
    var disHeiht=1;
    rePrint();
    maxL = div_show.height() - img1.height();
	disHeiht=div_show.height()-div1.height();
    img1[0].onmousedown = function (event){
	    var event = event || window.event;
	    var disY = event.clientY - img1.top()+ div_show.top();
	    document.onmousemove = function (event){
		    var event = event || window.event;
		    iL = event.clientY - disY;			
            doMove();
	    };		
	    document.onmouseup = function(){
		    document.onmousemove = null;
		    document.onmouseup = null;
	    };
    };
    div1.on('click',function(){
        rePrint();
	    disHeiht=div_show.height()-div1.height();
	    if(iL!=0&&maxL!=0){
	        if(disHeiht*iL/maxL<0){
	            div1.top(disHeiht*iL/maxL);
	        }else{
	            div1.top(0);
	        }
	    }
    });
    div2[0].onselectstart=function(){return false;};//禁止选中文本
    div2.on($.Browser.firefox ? "DOMMouseScroll" : "mousewheel",function(e){
        e=e || window.event;
        var wheelDelta = e.wheelDelta?e.wheelDelta/120:-(e.detail%3==0?e.detail:e.detail/3);
        if(div1.height()>div_show.height()){
            if(wheelDelta<0){
                iL+=5;
            }else{
                iL-=5;
            }
            doMove();
        }
    });
    var doMove=function(){
        if(iL <= 0){iL = 0;}
        if(iL >= maxL){iL = maxL};
        img1.top(iL);
        div1.top(disHeiht*iL/maxL);
    };   
}
/**
 * 自定义滚动条控件
 * id为div的id
*/
MyJs.TouchDiv=function(id,_Touch){
    _Touch=_Touch||false;
    var div2=$(id);
    var div_show=$.createElement("div",{"style":"overflow:hidden;"});
    var div1=$.createElement("div",{"style":"position:relative;word-break:break-all;float:left;overflow:hidden;"});
    var img1=$.createElement("div",{"style":"display:none;position:relative;background:url(images/overflow.png) repeat-y;width:19px;height:187px;"});
    div_show.width(div2.width()).height(div2.height()).html(div2.html());
    div1.html(div2.html());
    div2.html("").append(div_show);
    div_show.html("").append(div1,img1);
    var rePrint=function(){
        if(div1.height()>div_show.height()){
            div1.width(div_show.width()-20);
            img1.left(div_show.width()-20);
        }else{
            div1.width(div_show.width());
            img1.left(div_show.width());
            img1.hide();
        }
    };
    rePrint();
    var mouseDown=false;
    var isTouch = false;
    var tmpPointY=0,disY=0;
    var bl=1;//拖动比例
    div1[0].onmousedown = function(event){
        if(!_Touch){return;}
        var event = event || window.event;
        mouseDown = true;
        isTouch = false;
        _listHeight = (div1.height()-div_show.height())*-1;
        disY = event.clientY - div1.top();
        document.onmousemove = function (event){
            tmpPointY = event.clientY - disY;
            bl=tmpPointY/_listHeight;
            img1.show();
            div_test.html("tmpPointY:"+tmpPointY);
            var event = event || window.event;
            if(tmpPointY>0){
                div1.top(0);
                return;
            }else if(tmpPointY<_listHeight){
                div1.top(_listHeight);
                return;
            }
            img1.top(bl*(div_show.height()-img1.height()));
            div1.top(tmpPointY);
        }
        document.onmouseup =  function (){
            img1.hide();
            document.onmousemove = null;
            document.onmouseup = null
            mouseDown = false;
            tmpPointY=0;
        };
        return false;
    };
    div2[0].onselectstart=function(){return false;};//禁止选中文本
}