主要程序如下
// JavaScript Document
$(document).ready(function(){
/************公用************/
$('.products_list').html('');
runNav();
displayType1(2);
$("ul.fatherNav li").hover(function(){
$(this).addClass("hover");
$('ul:first',this).slideDown('fast').css('visibility', 'visible');
}, function(){
$(this).removeClass("hover");
$('ul:first',this).slideUp(100).css('visibility', 'hidden');
});
$("ul.fatherNav li ul li:has(ul)").find("a:first").append(" » ");
/************公用****************/
/**********************订购**********************************/
/**********************************购物车类***************************************/
/*****************************************************/
var decodeUrl=function(){//解析URL获得文章ID
var url=document.location.href;
var urlArray=url.split('/');
var aID='';
for(var i=0;i<urlArray.length;i++){
var nowUrl=new Array();
if(urlArray[i].indexOf('.html')!=-1){//搜索该数组是否含有.html字符
nowUrl=urlArray[i].split('.');
}
}
aID=nowUrl[0];
return aID;//返回文章ID
}//decodeUrl()
//alert(decodeUrl());
/************************************************/
/*****这个类可以根据需要改变setter和getter***********/
var product=function(productArr){/*商品类基类productArr=>array;productArr['ID'],productArr['name'],productArr['pic'],=productArr['lvs'],productArr['width']，productArr['thickness '],productArr['length'],productArr['open'],productArr['capacity']*/
var _ID=productArr['ID'],_name=productArr['name'],_lvs=productArr['lvs'],_pic=productArr['pic'],_width=productArr['width'],
_thickness=productArr['thickness '],_len=productArr['len'],_freeOpen=productArr['freeOpen'],_capacity=productArr['capacity'],_this=this;
this.num=productArr['num'];
this.getName=function(){
return _name;
}
this.getID=function(){
return _ID;
}
this.getLvs=function(){
return _lvs;
}
this.getPic=function(){
return _pic;
}
this.getWidth=function(){
return _width;
}
this.getThickness=function(){
return _thickness;
}
this.getLen=function(){
return _len;
}
this.getFreeOpen=function(){
return _freeOpen;
}
this.getCapacity=function(){
return _capacity;
}
this.setNum=function(newNum){
_this.num=newNum;
}
}
var makeProductObj=function(gID,pID,num){//制造product对象函数,返回制造的product对象,gID=>数据组ID，pID=>商品ID(工厂模式，根据需要可以改变)
/*********制造代码*********/
var pData=[];
(function(gID,pID){
$.ajax({
url:'/module/data/default.php?action=dataDetail&groupID='+gID+'&ID='+pID+'&r='+new Date(),
type:'post',
dataType:'xml',
async:false,
/**工厂方法***/
success:function(dataXML){
pData.lvs=$(dataXML).children('root').children('extend10').text();
pData.width=$(dataXML).children('root').children('extend11').text();
pData.thickness=$(dataXML).children('root').children('extend12').text();
pData.len=$(dataXML).children('root').children('extend13').text();
pData.freeOpen=$(dataXML).children('root').children('extend14').text();
pData.capacity=$(dataXML).children('root').children('extend15').text();
pData.name=$(dataXML).children('root').children('name').text();
pData.pic=$(dataXML).children('root').children('extend18').text();
}
});
})(gID,pID);
return new product({
num:num,
name:pData.name,
ID:pID,
pic:pData.pic,
lvs:pData.lvs,
width:pData.width,
thickness:pData.thickness,
len:pData.len,
freeOpen:pData.freeOpen,
capacity:pData.capacity
});
}
var mockCookie=$.cookies.get('pItem');//cookie的全局变量=>'商品ID|数量,商品ID|数量'
//alert(mockCookie);
var productCollection=function(){//商品搜集类
var products=[];
var hasOne=function(productObj){
var isOne=0;
for(var i=0;i<products.length;i++){
if(products[i].getID()==productObj.getID()){
isOne=1;
break;
}
}
return isOne;
}
var initProduct
/********初始哈products数组代码********/
//alert(mockCookie);
if(mockCookie){
initProduct=mockCookie.split(',');
for(var i=0;i<initProduct.length;i++){
var _productTemp=initProduct[i].split('|');
products.push(new makeProductObj(5,parseInt(_productTemp[0]),parseInt(_productTemp[1])));
}
}
/*******初始哈products数组代码*********/
this.addProduct=function(productObj){//添加商品
if(hasOne(productObj)!=1){
products.push(productObj);
}
}
this.delProduct=function(productObj){//删除商品
for(var i=0;i<products.length;i++){
if(products[i]===productObj){
products.splice(i,1);
}
}
}//del
this.setNumByPid=function(pID,newNum){//设置商品数量
for(var k=0;k<products.length;k++){
if(products[k].getID()==pID){
products[k].setNum(newNum);
break;
}
}
}
this.getProductById=function(pID){//pID为商品的ID，获得商品对象
for(var j=0;j<products.length;j++){
if(products[j].getID()==pID){
return products[j];
break;
}
}
return false;
}
this.getProducts=function(){//获得商品对象数组
return products;
}
}
var cart=function(){//购物车类
var _productCollection='';
var _nowCollection='';
var _this=this;
this.setCollection=function(collection){//设置collection
_productCollection=collection;
_nowCollection=_productCollection;//动态collection对象
_this.setTemp();
}
this.temp=[];//初始化collection对象
this.setTemp=function(){
if(!_productCollection){
throw new Error('请先指定collection对象!');
}
var listProduct=_productCollection.getProducts();
for(var i=0;i<listProduct.length;i++){
_this.temp[i]=[];
_this.temp[i]=listProduct[i];
}
};
this.delProduct=function(pID){//删除单个商品pID->商品的ID号
var needProduct=_nowCollection.getProductById(pID);
if(needProduct!=false){
_nowCollection.delProduct(needProduct);
}
}
this.setNumByPid=function(pID,newNum){//设置某个商品的数量,pID->商品ID
_nowCollection.setNumByPid(pID,newNum);
}
this.getCurrentNumByPid=function(pID){//获得某个商品的数量，pID->商品ID
var productObj=_nowCollection.getProductById(pID);
return productObj.num;
}
this.renderCart=function(){//渲染函数
throw new Error('错误，该方法必须在子类中实现');
}
this.bindEvent=function(){//绑定事件函数
throw new Error('错误，该方法必须在子类中实现');
}
//this.renderCart();
this.touchOff=function(){//触发
_this.renderCart();
_this.bindEvent();
}
this.getNewCollection=function(){//获得新的collection对象
return _nowCollection;
}
}
/********************************购物车类****************************************/
var cartBox=function(pid){
//alert('cartBox');
/***************实例化*****************/
if(pid==''||pid==undefined){
throw new Error('请指定pid');
}
/***************实例化***************/
var win1=new popBox({//这是一个弹窗类，稍后贴出代码
ID:'productBox',
bgColor:'#e6e6e6',
width:726,
moveHandle:false,
closeButton:false,
height:'auto',
times:200,
lock:true,
content:$('.dingg').html(),
shadow:true,
position:'center',
displayCallBack:function(){
//alert('弹框');
cartTest.renderCart=function(){//子渲染
var _content='';
var _content='';
//alert(this.temp.length);
for(var i=0;i<this.temp.length;i++){
//alert(this.temp[i].getID());
_content+='<table class="cartList" width="690" cellspacing="0" cellpadding="0" border="0" style="background:url(/template/27/images/dingg_topbg.jpg) repeat-x top center; height:120px;"><tr><td align="right" valign="middle" height="20" colspan="11"><a href="#"><img src="/template/27/images/dingg_x.jpg"></a> </td></tr><tr><td align="center" valign="middle" class="dingg_img"><input type="hidden" value="'+this.temp[i].getID()+'"/><img width="86" height="78" src="'+this.temp[i].getPic()+'"></td><td align="center" width="90" valign="middle" height="50">'+this.temp[i].getName()+'</td><td align="center" width="70" valign="middle" height="50">'+this.temp[i].getLvs()+'</td><td align="center" width="70" valign="middle" height="50">'+this.temp[i].getWidth()+'</td><td align="center" width="70" valign="middle" height="50">'+this.temp[i].getThickness()+'</td><td align="center" width="70" valign="middle" height="50">'+this.temp[i].getLen()+'</td><td align="center" width="70" valign="middle" height="50">'+this.temp[i].getFreeOpen()+'</td><td align="center" width="70" valign="middle" height="50">'+this.temp[i].getCapacity()+'</td><td class="numJian" align="center" width="21" valign="middle" height="50"><a href="#"><img style="float:left; margin:0px; padding:0px;" class="jian" src="/template/27/images/dingg_-.jpg"></a></td><td class="nowNum" align="center" width="28" valign="middle" height="50"><input type="text" value="'+this.temp[i].num+'" class="dingg_input" name="textfield"></td><td align="center" class="numJia" width="21" valign="middle" height="50"><a href="#"><img class="jia" src="/template/27/images/dingg_+.jpg"></a></td></tr></table>';
}
$('#'+win1.ID).find('.dingg_content').find('form').find('table').eq(0).after(_content);//渲染面板
/**popBoxCount**/
}//renderCart
cartTest.bindEvent=function(){
var _this=this;
//alert($('#'+win1.ID).find('.cartList').eq(0).html());
$('#'+win1.ID).find('.cartList').each(function(index){
var _each=$(this);
_each.find('tr').eq(0).children('td').find('img').click(function(){
//alert('删除');
_this.delProduct($(this).parents('tr').parents('table').find('input[type=hidden]').val());
$(this).parents('tr').parents('table').remove();
});//click删除商品
_each.find('tr').eq(1).children('td:last').find('img').click(function(){
var _jiaThis=$(this);
//alert($(this).parents('tr').parents('table').find('input[type=hidden]').val());
_this.setNumByPid($(this).parents('tr').parents('table').find('input[type=hidden]').val(),_this.getCurrentNumByPid($(this).parents('tr').parents('table').find('input[type=hidden]').val())+1);
//alert(_jiaThis.parents('td').siblings('td[class=nowNum]').children('input').val());
_jiaThis.parents('td').siblings('td[class=nowNum]').children('input').val(
_this.getCurrentNumByPid(_jiaThis.parents('tr').parents('table').find('input[type=hidden]').val())
);
});//click增加商品数量
_each.find('tr').eq(1).children('td[class=numJian]').find('img').click(function(){
var _jianThis=$(this);
if(_this.getCurrentNumByPid($(this).parents('tr').parents('table').find('input[type=hidden]').val())>1){
_this.setNumByPid($(this).parents('tr').parents('table').find('input[type=hidden]').val(),_this.getCurrentNumByPid($(this).parents('tr').parents('table').find('input[type=hidden]').val())-1);
_jianThis.parents('td').siblings('td[class=nowNum]').children('input').val(
_this.getCurrentNumByPid(_jianThis.parents('tr').parents('table').find('input[type=hidden]').val())
);
}//如果当前商品数量大于1
});//click减少商品数量
_each.find('tr').eq(1).children('td[class=nowNum]').focusout(function(){
});//自定义数量
});//each
/*$('#'+win1.ID).find('.cartList').find('tr').eq(1).children('td:last').find('img').click(function(){
//alert('增加');
_this.setNumByPid($(this).parents('tr').parents('table').find('input[type=hidden]').val(),_this.getCurrentNumByPid($(this).parents('tr').parents('table').find('input[type=hidden]').val())+1);
$(this).parents('tr').parents('table').find('input[type=hidden]').val(_this.getCurrentNumByPid($(this).parents('tr').parents('table').find('input[type=hidden]').val()));
$('#'+win1.ID).find('.dingg_content').find('form').find('table:gt(0)').children('tr:eq(1)').children('td[class=nowNum]').children('input').val(_this.getCurrentNumByPid($(this).parents('tr').parents('table').find('input[type=hidden]').val()));
});//增加数量按钮*/
$('#'+win1.ID).find('.dingg_content').find('form').find('table:gt(0)').children('tr:eq(1)').children('td[class=jia]').find('img').click(function(){
if(_this.getCurrentNumByPid($(this).parents('tr').parents('table').find('input[type=hidden]').val())>1){
_this.setNumByPid($(this).parents('tr').parents('table').find('input[type=hidden]').val(),_this.getCurrentNumByPid($(this).parents('tr').parents('table').find('input[type=hidden]').val())-1);
$('#'+win1.ID).find('.dingg_content').find('form').find('table:gt(0)').children('tr:eq(1)').children('td[class=nowNum]').children('input').val(_this.getCurrentNumByPid($(this).parents('tr').parents('table').find('input[type=hidden]').val()));
}
});//减少按钮
}//bindEvent
cartTest.touchOff();
/******初始化用户表单*****/
var dgUser=$.cookies.get('dgUser');
var dgTel=$.cookies.get('dgTel');
var dgEmail=$.cookies.get('dgEmail');
var dgFax=$.cookies.get('dgFax');
var dgAddress=$.cookies.get('dgAddress');
var dgMessage=$.cookies.get('dgMessage');
$('#'+win1.ID).children('.dingg_content').find('form').children('table:last').find('input[name=userName]').val(dgUser);
$('#'+win1.ID).children('.dingg_content').find('form').children('table:last').find('input[name=tel]').val(dgTel);
$('#'+win1.ID).children('.dingg_content').find('form').children('table:last').find('input[name=email]').val(dgEmail);
$('#'+win1.ID).children('.dingg_content').find('form').children('table:last').find('input[name=fax]').val(dgFax);
$('#'+win1.ID).children('.dingg_content').find('form').children('table:last').find('input[name=address]').val(dgAddress);
$('#'+win1.ID).children('.dingg_content').find('form').children('table:last').find('textarea[name=message]').val(dgMessage);
/******初始化用户表单*****/
/***********submit按钮*************/
$('#'+win1.ID).find('.dingg_content').find('form').find('table:last').find('tr:last').find('input[type=button]').click(function(){
var _tijiao=$(this);
/********验证用户表单*******/
var dgUser=_tijiao.parent().parent().parents('table').parent().find('input[name=userName]').val();
var dgTel=_tijiao.parent().parent().parents('table').parent().find('input[name=tel]').val();
var dgEmail=_tijiao.parent().parent().parents('table').parent().find('input[name=email]').val();
var dgFax=_tijiao.parent().parent().parents('table').parent().find('input[name=fax]').val();
var dgAddress=_tijiao.parent().parent().parents('table').parent().find('input[name=address]').val()
var dgMessage=_tijiao.parent().parent().parents('table').parent().find('textarea[name=message]').val()
if(checkObj.checkEmpty(dgUser)==0){
alert('Please input your name!');
return;
}
if(checkObj.checkEmpty(dgEmail)==0){
alert('Please input your email!');
return;
}
if(checkObj.checkEmail(dgEmail)==0){
alert('Please input true email!');
return;
}
if(checkObj.checkEmpty(dgAddress)==0){
alert('Please input your address!');
return;
}
//alert(dgAddress);
/********验证用户表单*******/
/******写入数据并清除cookie同时转向*******/
$.cookies.set('pItem','');
alert('订购成功！');
//下一步你可以干自己的事情，比如使用ajax请求写入数据
/******写入数据并清除cookie同时转向*******/
});
//alert(mockCookie);
//alert(win1.status);
//win1.status='display';
$('#'+win1.ID).find('.dingg_toplx').css('cursor','pointer').click(function(){
win1.kill();
//alert(win1.status);
//win1=null;
});
},
unDisplayCallBack:function(){
},
beforeKillCallBack:function(){//kill之前的回调函数，保存cookie
/*alert($('#'+win1.ID).children('.dingg_content').find('form').children('table:last').find('input[name=userName]').val());*/
$.cookies.set('dgUser',$('#'+win1.ID).children('.dingg_content').find('form').children('table:last').find('input[name=userName]').val());
$.cookies.set('dgTel',$('#'+win1.ID).children('.dingg_content').find('form').children('table:last').find('input[name=tel]').val());
$.cookies.set('dgEmail',$('#'+win1.ID).children('.dingg_content').find('form').children('table:last').find('input[name=email]').val());
$.cookies.set('dgFax',$('#'+win1.ID).children('.dingg_content').find('form').children('table:last').find('input[name=fax]').val());
$.cookies.set('dgAddress',$('#'+win1.ID).children('.dingg_content').find('form').children('table:last').find('input[name=address]').val());
$.cookies.set('dgMessage',$('#'+win1.ID).children('.dingg_content').find('form').children('table:last').find('textarea[name=message]').val());
},
killCallBack:function(){//kill之后的操作
var lastCollection=cartTest.getNewCollection();
var _products=lastCollection.getProducts();
//console.log(_products.length);
var _mockCookie='';
for(var i=0;i<_products.length;i++){
_mockCookie+=_products[i].getID()+'|'+_products[i].num+',';
}
_mockCookie=_mockCookie.substring(0,_mockCookie.length-1);
//alert(_mockCookie);
//alert(_mockCookie);
$.cookies.set('pItem',_mockCookie);//设置cookie
}
});
win1.display();
}//cartBox
var productCollections= new productCollection();
var cartTest=new cart();
/**********************订购**********************************/
$('.products_list').each(function(){
var _this=$(this);
_this.children('td:first').click(function(){
//alert('test');
var _that=$(this);
productCollections.addProduct(new makeProductObj(5,_that.children('a').attr('rel'),1));
cartTest.setCollection(productCollections);
//cartTest.setTemp();
new cartBox(_that.children('a').attr('rel'),productCollections);
});
});
});
/****文本框****/
function clearText(field)
{
if (field.defaultValue == field.value) field.value = '';
else if (field.value == '') field.value = field.defaultValue;
}
/****nav*****/
/**********************导航二级列表值******************************/
var getTidFromNodeName1=function(nodeName){
var tid1=nodeName.replace('p','');
return tid1;
}
var _son1='';
var displayType1=function(listIndex){
//alert($('.nav').html());
//alert($('.fatherNav').html());
$('.fatherNav').children('.fatherLi').eq(listIndex).find('.sonNav').remove();
var _url1='/module/data/default.php?action=dataPartition&groupID=5&r='+new Date();
$.ajax({
type:'get',
dataType:'xml',
async:false,
url:_url1,
success:function(dataXML){
if($(dataXML).find('root').children().length!==0){
/**插入<ul class="sonNav"**/
$('.fatherNav').children('.fatherLi').eq(listIndex).append('<ul class="sonNav"></ul>');
$(dataXML).find('root').children().each(function(index){
if($(this).children('parentid').text()==0){
//var _son='';
$('.fatherNav').children('.fatherLi').eq(listIndex).children('.sonNav').append('<li class="sonLi" rel="'+getTidFromNodeName1($(this).context.nodeName)+'"><a href="#">'+$(this).children('name').text()+'</a></li>');
var _this=$(this);
_this.siblings().each(function(i){
var _that=$(this);
if(_that.children('parentid').text()==getTidFromNodeName1(_this.context.nodeName)){
_son1+='<li><a href="/products-list/index.html?tid='+getTidFromNodeName1(_that.context.nodeName)+'">'+_that.children('name').text()+'</a></li>';
}//如果该类是父类的子类
});//兄弟节点
if(_son1!=''){
$('.fatherNav').children('.fatherLi').eq(listIndex).children('.sonNav').children('li[rel='+getTidFromNodeName1(_this.context.nodeName)+']').append('<ul>'+_son1+'</ul>');
}//if _son!=''
}//如果是顶级分类
});//最外层each
}//如果有分类
}//success
});
}
/****************************分内 内容列表*****************************/
var dataBoxNav='';
var getDataNav=function(tid1){//tid分类ID，linkBox为存储文章链接的数组linkBox[aID]='link';->aID为文章ID,link是该ID文章对应的链接
if(tid1==''||tid1==undefined){
throw new Error('tid1 is empty!');
}
var ddsNav='';
var url='/module/data/default.php?action=data&pageSize=100&page=1&groupID=5&label=&extend=all&partition=5:'+tid1+'&r='+new Date();
$.ajax({
type:'get',
dataType:'xml',
url:url,
async:false,
success:function(dataXML){
$(dataXML).find('root').children().each(function(index){
var _this=$(this);
ddsNav+='<tr class="products_list"><td width="140" height="25" align="center" valign="middle"><a rel="'+_this.context.nodeName.replace('d','')+'" href="#">'+_this.children('Name').text()+'</a></td><td width="80" height="25" align="center" valign="middle">'+_this.children('extend10').text()+'</td><td width="80" height="25" align="center" valign="middle">'+_this.children('extend11').text()+'</td><td width="80" height="25" align="center" valign="middle">'+_this.children('extend12').text()+'</td><td width="80" height="25" align="center" valign="middle">'+_this.children('extend13').text()+'</td><td width="80" height="25" align="center" valign="middle">'+_this.children('extend14').text()+'</td><td width="80" height="25" align="center" valign="middle">'+_this.children('extend15').text()+'</td><td width="80" height="25" align="center" valign="middle">'+_this.children('extend16').text()+'</td><td width="260" height="25" align="left" valign="middle">'+_this.children('extend17').text()+'</td></tr>';
//alert(ddsNav);
});
dataBoxNav=ddsNav;
}
});//ajax
}//getData
var renderPageNav=function(dataNavObj){//dataObj.dlClass,dataObj.content
//alert(dataNavObj.class);
$(dataNavObj.class1).siblings('tr').remove();
//alert(dataNavObj.content);
$(dataNavObj.class1).after(dataNavObj.content);
}
var analyzeNavURL=function(){
var tid1='';
var _location=window.location.href;
var _temp=_location.split('?');
var _temp1=_temp[1].split('=');
tid1=_temp1[1];
return tid1;
}
var runNav=function(){
tid1=analyzeNavURL();
getDataNav(tid1);
dataNavObj={};
dataNavObj.content=dataBoxNav;
dataNavObj.class1='.products_list1';
renderPageNav(dataNavObj);
}
/*****************************user pannel****************************/
var userPannel=function(){
var email=$.cookies.get('email');
$('#email').html('');
$('#phone').html('');
$('#time').html('');
$('#head img').attr('src',' ');
if(email==''||email==0) {alert('Please login!'); return false;}
$.ajax({
url:'/module/member/?action=getUserInfo&webUser='+email+'&r='+ new Date(),
type:'GET',
dataType:'xml',
success:function(dataXML){
var phone=$(dataXML).find('root').children('phone').text();
var time=$(dataXML).find('root').children('time').text();
var head=$(dataXML).find('root').children('head').text();
//alert(time);
$('#phone').text(phone);
$('#email').text(email);
$('#time').text(time);
$('#head img').attr('src',head); //<img src="images/user_pic.jpg" />
}
});
}
var checkObj=[];
checkObj.checkZS=function(num){
var _reg=/^[1-9]+[0-9]*]*$/;
if(!_reg.test(num)){
return 0;
}
return 1;
}
checkObj.checkEmpty=function(str){
if(str==''){
return 0;
}
return 1;
}
checkObj.checkEmail=function(email){
var _reg=/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
if(!_reg.test(email)){
return 0;
}
return 1;
}
以上是订购的，即不需要地区管理，也不需要付账，只有追踪客户即可
下面是popBox弹窗类代码
// JavaScript Document
//若使用移动功能，请先导入jQuery移动UI组件
var popBox=function(settings){//弹窗函数settings=[]
//alert(typeof settings['width']);
//alert(settings['displayCallBack']);
/************************本类私有变量*****************************/
/*******************默认值*****************/
var _shadow=true;//是否有遮罩true/false
var _closeButton=false;//关闭按钮false/dom元素
var _killButton=false;//kill按钮false/dom元素
var _moveHandle=false;//拖动手柄false/dom元素
var _width=650;//宽,
var _bgColor='#FFF';//背景样式
var _height='auto';//高
var _content='没有内容';//内容
var _position='center';/*位置topLeft,topCenter,topRight,center,bottomLeft,bottomRight,bottomCenter*/
var _lock=true;//是否锁定
var _times=500;//显示，隐藏的时间
var _displayCallBack=function(){//dispaly回调函数
alert('display');
}
var _unDisplayCallBack=function(){//unDispaly回调函数
alert('unDisplay');
}
var _beforeKillCallBack=function(){
alert('beforeKill');
}//kill之前的回调函数
var _killCallBack=function(){//kill回调函数
alert('kill');
}
/*******************默认值*****************/
if(settings['closeButton']!==undefined){
//alert('shadow');
_closeButton=settings['closeButton'];
}
if(settings['killButton']!==undefined){
//alert('shadow');
_killButton=settings['killButton'];
}
if(settings['moveHandle']!==undefined){
//alert('shadow');
_moveHandle=settings['moveHandle'];
}
/******************获得设置值********************/
/**settings['shadow']!=' ' && settings['shadow']!=undefined*/
if(settings['shadow']!==undefined){
//alert('shadow');
_shadow=settings['shadow'];
}
if(settings['bgColor']!==undefined){
//alert('shadow');
_bgColor=settings['bgColor'];
}
if( settings['width']!==undefined){
_width=settings['width'];
}
if( settings['height']!==undefined){
_height=settings['height'];
}
if(settings['content']!==undefined){
_content=settings['content'];
}
if(settings['position']!==undefined){
_position=settings['position'];
}
if( settings['times']!==undefined){
_times=settings['times'];
}
if(settings['lock']!==undefined){
_lock=settings['lock'];
}
if(settings['displayCallBack']!=undefined){
//alert('here');
_displayCallBack=settings['displayCallBack'];
}
if( settings['unDisplayCallBack']!==undefined){
_unDisplayCallBack=settings['unDisplayCallBack'];
}
if( settings['beforeKillCallBack']!==undefined){
_beforeKillCallBack=settings['beforeKillCallBack'];
}
if( settings['killCallBack']!==undefined){
_killCallBack=settings['killCallBack'];
}
//alert(settings['shadow']);
//alert(_shadow);
/************************本类私有变量******************************/
/*********************本类内部变量********************/
var _this=this;
var _baseZindex=10000;
var _domWidth=$(document).width();
var _domHeight=$(document).height();
/********************本类内部变量*******************/
/********************本类私有函数**********************/
var _getZindex=function(){/*获得z-index->首先遍历网页div元素ID中含有popBox的DOM,获得数量，然后本弹窗背景z-index=基数+当前数量+1,弹框z-index=基数+当前数量+2*/
var _len=$('body').children('div').length;
var _countDiv=0;
var _divObj=$('body').children('div');
var _reg=/^popBox_/;//正则表达式
for(var i=0;i<_len;i++){
if(_reg.test(_divObj.eq(i).attr('ID'))){
_countDiv+=1;
}
}
return _countDiv;//返回已有弹框的数量
}
var _getWinZindex=function(){//获得弹窗的z-index
var _winZindex=_baseZindex+_getZindex()+2;
return _winZindex;
}
var _geWinBgZindex=function(){//获得弹窗背景的z-index
var _winBgZindex=_baseZindex+_getZindex()+1;
return _winBgZindex;
}
var _renderBg=function(){//渲染背景
var _winBgZindex=_geWinBgZindex();
//alert($(document).height());
$('body').append('<div id="'+_this.ID+'_bg"></div>');//在body中插入一个半透明的背景
$('#'+_this.ID+'_bg').addClass('popBox_bg').css({height:_domHeight,width:_domWidth,opcity:0}).css('z-index',_winBgZindex).fadeTo(_times,0.7);
}
var _creatWin=function(){//创建窗体
$('body').append('<div id="'+_this.ID+'"></div>');
_renderContent(_content);//渲染弹窗主体
_initWin();//初始化窗体
}
var _initWin=function(){//初始化窗体
var _winZindex=_getWinZindex();
var _transHeight=0;
if(_height=='auto'){
_transHeight='auto';
}else{
_transHeight=parseInt(_height)+'px';
}
$('#'+_this.ID).css({width:parseInt(_width)+'px',height:_transHeight,position:'absolute',opticity:1.0,background:_bgColor}).css('z-index',_winZindex);
if(_lock==false){
if(_moveHandle!==undefined&&_moveHandle!==false&&_moveHandle!==' '){
$('#'+_this.ID).children(_moveHandle).css('cursor','move');
//alert(_moveHandle);
//alert($('#'+_this.ID).children(_moveHandle).html());
}
}
_locationWin();//为窗体定位
}
var _locationWin=function(){/*为窗体定位topLeft,topCenter,topRight,centerLeft,center,centerRight,bottomLeft,bottomCenter,bottomRight*/
var _windowHeight=parseInt($(window).height());
var _windowWidth=parseInt($(window).width());
//alert(_windowWidth+_height);
var _left=(_windowWidth-parseInt(_width))/2;
var _top=parseInt($(document).scrollTop())+parseInt(($(window).height()-$('#'+_this.ID).height())/2);
$('#'+_this.ID).css({top:_top+'px',left:_left+'px'});
}
var _renderContent=function(content){//渲染弹窗主体
$('#'+_this.ID).append(content);
}
var bindEvent=function(){//绑定事件
if(_this.status!=='kill'&&_this.status!=='init'){
if(_closeButton!==undefined&&_closeButton!==' '&&_closeButton!==false){
$('#'+_this.ID+' '+_closeButton).css('cursor','pointer').live('click',function(e){
_this.unDisplay();
});
}//若设置了关闭(close)按钮
if(_killButton!==undefined&&_killButton!==' '&&_killButton!==false){
$('#'+_this.ID+' '+_killButton).css('cursor','pointer').live('click',function(e){
_this.kill();
});
}//若设置了杀死(kill)按钮
}
if(_lock==false){
$('#'+_this.ID).draggable({cancel:''});
}
}
/*********************本类私有函数*****************/
/**********************本类公有函数******************/
this.status='init';//当前状态init->初始化状态,display->display状态,undisplay->undisplay状态,kill->kill状态
this.ID='';
var _ID=settings['ID'];
if(_ID==' '||(typeof _ID)==undefined){
throw new Error('ID不能为空');
}else{
this.ID='popBox_'+_ID;
}
this.display=function(){//显示函数,如果状态是init或者kill重新渲染页面
//alert(_this.status);
if(_this.status=='init'||_this.status=='kill'){
_creatWin();//创建窗体
//$('#'+_this.ID).css('height',_domHeight);
if(_shadow==true){//渲染遮罩
/*alert(_shadow);*/
_renderBg();
}
_this.status='display';
_displayCallBack();
}else{
$('#'+_this.ID).fadeIn(_times);
if(_shadow==true){
$('#'+_this.ID+'_bg').fadeIn(_times);
}
_this.status='display';
}
//alert(typeof _displayCallBack);
//alert(_this.status);
bindEvent();
}
this.kill=function(){//彻底移除
//alert(_this.status);
//alert(_this.status);
if(_this.status=='kill'||_this.status=='init'){
//alert(_this.status);
throw new Error('非法操作，当前状态不允许kill');
}
if(_beforeKillCallBack!=undefined){
_beforeKillCallBack();
}
$('#'+_this.ID).remove();
if(_shadow==true){
$('#'+_this.ID+'_bg').remove();
}
_this.status='kill';
if(_killCallBack!=undefined){
_killCallBack();
}
}
this.unDisplay=function(){//隐藏函数
if(_this.status=='init'||_this.status=='kill'){
throw new Error('非法操作，当前状态不允许undisplay');
}
if(_unDisplayCallBack!=undefined){
_unDisplayCallBack();
}
$('#'+_this.ID).fadeOut(_times);
$('#'+_this.ID+'_bg').fadeOut(_times);
_this.status='undisplay';
}
/**********************本类公有函数******************/
}//popBox网页弹窗
var errorBox=function(errorMsg){
//alert(typeof errorBox);
//alert(errorBox.length);
var errorObj=new popBox({
ID:'errorObj',
bgColor:'#FFF',
width:300,
moveHandle:false,
closeButton:false,
height:'auto',
times:200,
lock:true,
content:$('#errorBoxContent').html(),
shadow:true,
position:'center',
displayCallBack:function(){
$('#'+errorObj.ID).find('.errorMessage').html();
$('#'+errorObj.ID).find('.errorMessage').html(errorMsg);
$('#'+errorObj.ID).find('.errorConfirm input').click(function(){
//alert('here');
errorObj.kill();
});
},
unDisplayCallBack:function(){
throw new Error('错误不可以关闭，只可以Kill');//错误方法只能Kill，不能关闭
},
killCallBack:function(){
//errorBox=null;
}
});
errorObj.dispaly();
}//错误弹窗
效果图如下
可以看出弹窗类还有一个bug,即高度为height的时候，不能算出bg了
如果你发现其中的不足，请批评指正！