這樣的一個通用窗口..
代碼如下
construct(){
setting={
ID:'window ID',
TitleText:'',
Content:'content Text', //
Parent:null, //窗口的父句柄 默認是加到 body裡
boxCss:'class03_tank ',
TitleCss:'class03_tank_top', //標題CSS
ContentCss:'padtb10', //內容CSS
width:280,
height:'auto',
button:'submit,cancel', //按鈕類型,submit:提交,cancel:取消
submitcall:null,//點擊確定按鈕的CALLBACK
cancelcall:null//點擊取消按鈕的CALLBACK
}
function _createWindow(opt){
var windowID=opt.ID,top,left;
if(windowID==null)
return null;
if($('#'+opt.ID).length>0) {
$('#'+opt.ID).remove();
}
if(!opt.left)
opt.left=($(window).width()-opt.width)/2;
if(!opt.top)
opt.top =($(window).height())/3+$(document).scrollTop()
var parent=(opt.Parent==null || opt.parent.length==0)?$('body'):$(opt.Parent);
var box=$('<div>').attr('id',windowID).addClass(opt.boxCss).width(opt.width).height(opt.height).css({'left':opt.left,'top':opt.top,'z-index':1111,'position':'absolute'});
parent.append(box)
return $('#'+opt.ID);
}
function _setWindowConstruct(w,opt){ //創建窗體內部結構
w.subobj=w.obj;
//創建標題
w.subobj.append($('<div>').addClass('class03_tank_top').append(
$('<div>').addClass('class03_tank_topc').append(
w.close=$('<a>').attr('title','關閉').addClass('btnax fr bgcfff mart04').html('×')
).append(
$('<span>').addClass('disin_bl lineh30 marl10').html(opt.TitleText)
)
)
)
//創建內容
w.subobj.append(
$('<div>').addClass('class03_tank_con bgcfff').css({'text-align':'center'}).append(
$('<div>').attr('id','content_ui_'+opt.ID).addClass(opt.ContentCss)
)
);
//創建底部
w.subobj.append('<div class="" style="margin-top:0;"><b class="yz_b01 "></b><b class="yz_b02 "></b><b class=" yz_b03 yz_b00"></b></div>')
return w;
}
function _setWindowSubmitButton(w,opt){ //設置按鈕
var p=$('<p>').addClass('class03_tank_p');
var submit=$('<a>'),cancel=$('<a>');
btn=opt.button.split(',');
if(ST.Base.inArray(btn,'submit')>-1){
p.append(submit.addClass('btnqx01').html('確定').bind('click',function(){
if((opt.submitcall&&opt.submitcall()!==false)||opt.submitcall==null){
$('#'+opt.ID).remove();
$('#MW_BACKOVER').hide();
}
if(ST.UI.timeId!=null)
window.clearTimeout(ST.UI.timeId);
}))
}
if(ST.Base.inArray(btn,'cancel')>-1){
p.append(cancel.addClass('btnqx01 marlr06').html('關閉').bind('click',function(){
if((opt.cancelcall&&opt.cancelcall()!==false)||opt.cancelcall==null){
$('#'+opt.ID).remove();
$('#MW_BACKOVER').hide();
}
if(ST.UI.timeId!=null)
window.clearTimeout(ST.UI.timeId);
}))
}
w.close.bind('click',function(){
$('#'+opt.ID).remove();
$('#MW_BACKOVER').hide();
})
w.obj.children('.class03_tank_con').append(p)
}
function _setBackover(w){ //創建遮蓋層
if($('#MW_BACKOVER').length>0){
$('#MW_BACKOVER').show();
return;
}
$("body").append(
$("<div>")
.attr("id", "MW_BACKOVER")
.css({
"background-color": "#ddd",
"position": "fixed",
"top": "0",
"left": "0",
"width": "100%",
"height": "100%",
"display": "block",
"opacity": 0.5,
'z-index':10
})
);
}
return function(opt){
opt=ST.extend(setting,opt);
//創建窗體容器對象
var w=_createWindow(opt);
if(!w){
return false;
}
windowObj={'obj':w,'subobj':null};
windowObj=_setWindowConstruct(windowObj,opt);
_setBackover(windowObj,opt)
_setWindowSubmitButton(windowObj,opt);
return {
getObject:function(){
return windowObj;
},
close:function(){
$(windowObj['obj']).remove();
$('#MW_BACKOVER').hide();
return this;
},
setContent:function(content){
$('#content_ui_'+opt.ID).html(content);
return this;
},
load:function(url,callback){
$('#content_ui_'+opt.ID).load(url+'&r='+Math.random(),callback);
return this;
}
}
}
}
return function(option){
Controller=construct();
return Controller(option)
}
})(),
//靜態對話框
StaticWindow:(function(){
var Controller=null;
function _construct(opt){
setting={
ID:'',
left:0,
top:0,
width:200,
height:100,
css:'bgcfff',
parent:'',
buttonCss:'class03_tank_p',
buttonCssRep:null, //按鈕附加參數
button:'sure,cancle',
buttonText:null, //按鈕附加文本
layer:null
}
function _createWindow(opt){
if($('#'+opt.ID).length>0)
$('#'+opt.ID).remove();
if(opt.layer!=null){
opt.left=(opt.layer.pageX);
opt.top=(opt.layer.pageY+$(opt.layer.target).height());
}
var box=$('<div>').addClass(opt.css).css({'position':'absolute','height':opt.height,'width':opt.width,'border':'1px solid #ccc','z-index':100,'left':opt.left,'top':opt.top}).attr('id',opt.ID),
parent=opt.parent!=''?$(opt.parent):$('body');
parent.append(box);
return $('#'+opt.ID);
};
function _setWindowConstruct(obj,opt){
obj.html('')
obj.append($('<div>').attr('id','static_content_'+opt.ID))
}
function _setButton(obj,opt){
btn=opt.button.split(',');
p=$('<p>').addClass(opt.buttonCss).css({'position':'absolute','bottom':0,'width':(opt.width-13)})
if(opt.buttonCssRep!=null)
p.css(opt.buttonCssRep);
if(ST.Base.inArray(btn,'sure')>-1){
var sure=$('<a>').addClass('btnqx01').html('確認').click(function(e){
if((opt.surebtn&&opt.surebtn(e)!==false)||opt.surebtn==null){
obj.remove();
}
})
p.append(sure)
}
if(ST.Base.inArray(btn,'cancle')>-1){
cancel=$('<a>').addClass('btnqx01 marlr06').html('取消').click(function(e){
if((opt.cancelbtn&&opt.cancelbtn(e)!==false)||opt.cancelbtn==null){
obj.remove();
}
})
p.append(cancel);
}
if(opt.buttonText!=null)
p.append(opt.buttonText)
obj.append(p)
}
return function(opt){
opt=ST.extend(setting,opt);
var w=_createWindow(opt);
if(!w) return false;
_setWindowConstruct(w,opt);
_setButton(w,opt);
return{
close:function(){
w.remove()
},
setContent:function(content){
$('#static_content_'+opt.ID).html(content);
},
append:function(obj){
$('#static_content_'+opt.ID).append(obj);
},
load:function(url,callback){
$('#static_content_'+opt.ID).load(url,callback)
}
}
}
}
return function(option){
Controller=_construct();
return Controller(option);
}
})()
}
}
我這裡寫了兩種..還有一種是 沒有 標題..只有內容的對話框.
使用方法
代碼如下
var w=ST.UI.ModeWindow({
‘ID’:'窗口ID’,
‘TitleText’:'標題’,
‘submitcall’:function(){
//確認按鈕執行的方法
},
‘cancelcall’:function(){
//取消按鈕執行的方法
},
‘width’:'寬’,
‘height’:'高’,
‘boxCss’:'窗體樣式’,//
‘TitleCss’:'標題樣式’,
‘ContentCss’:'內容樣式’,
‘button’:'submit,cancel’,//默認兩個按鈕..可以單獨設置其中的一個
});
參數都可選.
w就是窗體的對象.
w.close();//關閉窗體
w.setContent(‘內容’);//設置內容
w.getObject();//獲取窗體對象
w.load(‘加載連接’,'回調函數’);//加載一個url
靜態對話框與模態對話框使用方法相同.