本文共 28801 字，大约阅读时间需要 96 分钟。

主要程序如下

// 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了

如果你发现其中的不足，请批评指正！

转载地址：https://blog.csdn.net/iteye_6481/article/details/82308761 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！