• 选择珠宝js业务逻辑源码


    //珠宝定制类->珠宝选择控件
    	function Custom(customContent){
    			this.CustomObjection=customContent;//保存定制弹出层对象
    			this.tabMenu=$(".customTab li",this.CustomObjection);//保存选项卡列表
    			this.tabMenuActivesMain=$(".customBodyRightChangeContent>div",this.CustomObjection);//保存选项卡对应的切换内容区域列表
    			this.stoneOptions=$("#gemstoneClass .hd",this.CustomObjection);//保存石头选项的title
    			this.determineStoneBtnItems=$("#gemstoneClass .sure",this.CustomObjection);//保存石头选项内的确定按钮
    			
    			this.stoneButtons=$(".stoneButton",this.CustomObjection);//保存所有宝石按钮
    			this.materialButtons=$(".materialButton",this.CustomObjection);//保存所有材质按钮
    			this.preloadingImg=$("#preloading",this.CustomObjection);//保存预加载图标
    			this.customBigImage=$("#customBigImage",this.CustomObjection);//保存393大图
    			
    			this.zuheCodeInput=$("#zuheCode",this.CustomObjection);//保存组合编码
    			
    			this.customPrice=$("#customPrice",this.CustomObjection);//保存价格
    			this.closebutton=$("#customCloseBtn",this.CustomObjection);//保存关闭按钮
    			
    			this.customFingers=$("#custom1 li",this.CustomObjection);//保存每一个之选序列
    
    			this.selectedStoneInfoDivs=$("#selectedStoneInfo>div",this.CustomObjection);//保存综述下的石头列表
    			this.selectedMaterialInfoDiv=$("#selectedMaterialInfo",this.CustomObjection);//保存唯一的综述下材质对象
    			this.closebutton.click(function(){//关闭弹出层
    											$("#customPop").hide();
    											});
    			this.tabMenuChange();//初始化选项卡效果
    			this.selectStoneMain();//初始化选择石头区域选项卡
    			this.determineStoneBtnClick();//初始化化确定按钮的单击事件
    			var _this_=this;
    			this.stonesTime=null;//石头按钮上的mouseout指针
    			this.materialsTime=null;//材质按钮上的mouseout指针
    			this.stoneButtons.mouseover(function(){
    												window.clearTimeout(_this_.stonesTime);
    												_this_.stoneButtonMouseover(this);											
    												 }).mouseout(function(e){
    													 var $this=this;
    													 //如果移出去的时候relatedTarget是img或者自身处于选中状态就取消
    													 if(e.relatedTarget.tagName=="IMG"||$(this).is(".selected")){
    														 return true;
    														 }else{
    															 _this_.stonesTime=window.setTimeout(function(){
    																						 _this_.stoneButtonMouseout($this);				  
    																			},500);
    															 };
    													 }).click(function(){													 
    														 _this_.stoneButtonChangeStyle(this);
    														 _this_.sendData(this);
    														 });
    			this.materialButtons.mouseover(function(){
    													window.clearTimeout(_this_.materialsTime);
    													_this_.materialButtonMouseover(this);
    													}).mouseout(function(e){
    														var $this=this;
    														//如果移出去的时候relatedTarget是img或者自身处于选中状态就取消
    														 if(e.relatedTarget.tagName=="IMG"||$(this).is(".selected")){
    															 return true;
    															 }else{
    																 _this_.materialsTime=window.setTimeout(function(){
    																							 _this_.materialButtonMouseout($this);				  
    																				},500);
    																 };
    														}).click(function(){
    															_this_.materialButtonChangeStyle(this);
    															_this_.sendData(this);
    															});
    			this.customFingers.click(function(){
    			_this_.changeFingerSetPrice(this);
    			
    			});
    		};
    	Custom.prototype={
    		preLoadImg:function(url,preCallBack,loadedCallBack){//预先载入图片
    				preCallBack();
    				var img=new Image();
    				if(!!window.ActiveXObject){
    					img.onreadystatechange=function(){
    						if(this.readyState=="complete"){
    									loadedCallBack();
    									img=null;
    								};
    						};
    					}else{
    						img.onload=function(){
    							loadedCallBack();
    							img=null;
    							};	
    					};
    				img.src=url;
    			},
    		tabMenuChange:function(){//实现选项卡切换
    			var _this=this;
    			this.tabMenu.click(function(){
    										var i=$(this).index();
    										$(this).addClass("actived").siblings().removeClass("actived");
    										_this.tabMenuActivesMain.eq(i).addClass("show").siblings().removeClass("show");
    										});
    			},
    		selectStoneMain:function(){//实现石头选项卡选择效果
    			this.stoneOptions.click(function(){
    											 $(this).next().show();
    											 $(this).parent().siblings().hide();
    											 });
    			},
    		determineStoneBtnClick:function(){//每一个石头选择区域下的确定按钮单击时要执行的函数内容
    			var _this=this;
    			this.determineStoneBtnItems.click(function(){
    													   _this.determineStoneBtnClick_showOrhide(this);//执行返回默认选择石头选项
    													   });
    			},
    		determineStoneBtnClick_showOrhide:function(thisObj){//每一个石头选择区域下的确定按钮单击时返回石头默认选择列表
    				//单纯的执行隐藏并返回默认石头选择状态
    				$(thisObj).parent().parent().parent().hide().parent().show().siblings().show();
    			},
    		stoneButtonMouseover:function(thisObj){//所有石头按钮鼠标移动上去执行的函数
    				$(thisObj).parent().next().find(".stoneNameText").text($(thisObj).attr("stone-name"));//设置对应的宝石名称
    				$(thisObj).parent().next().find(".stoneDisc").text($(thisObj).attr("stone-disc"));//设置对应的宝石描述
    			},
    		stoneButtonMouseout:function(thisObj){//当鼠标移出去一段时间后检索自己和其他按钮的选中状态,并且设置选中的按钮值到宝石名称和描述
    				$(thisObj).parent().children().each(function(){
    															 	if($(this).is(".selected")){
    																	$(this).parent().next().find("p").hide();
    																	$(this).parent().next().find(".stoneNameText").text($(this).attr("stone-name"));
    																	$(this).parent().next().find(".stoneDisc").text($(this).attr("stone-disc"));
    																	$(this).parent().next().find("p").fadeIn(1000);
    																	}
    															 });
    			},
    		materialButtonMouseover:function(thisObj){//材质按钮移动上去执行替换工作
    				$(thisObj).parent().parent().next().find("strong").text($(thisObj).attr("material-name"));
    				$(thisObj).parent().parent().next().find(".text").text($(thisObj).attr("material-disc"));
    			},
    		materialButtonMouseout:function(thisObj){
    			$(thisObj).parent().parent().children().each(function(){
    													if($(this).find(".materialButton").is(".selected")){
    														$(this).parent().next().find("p").hide();
    														$(this).parent().next().find("strong").text($(this).find(".materialButton").attr("material-name"));
    														$(this).parent().next().find(".text").text($(this).find(".materialButton").attr("material-disc"));
    														$(this).parent().next().find("p").fadeIn(1000);
    														}			  		  
    													});
    			},
    		stoneButtonChangeStyle:function(thisObj){
    			$(thisObj).addClass("selected").siblings().removeClass("selected");//改变样式
    			$(thisObj).parent().parent().prev().find("img").attr("src",$(thisObj).find("img").attr("src"));//设置石头地址
    			$(thisObj).parent().parent().prev().find("em").text($(thisObj).attr("stone-name"));//设置石头名称
    			//获取到当前的石头类型的索引值并且吧值设置到综述对应的石头信息上
    			this.selectedStoneInfoDivs.eq($(thisObj).parent().parent().parent().index()).find(".stonename").text($(thisObj).attr("stone-name"));
    			this.selectedStoneInfoDivs.eq($(thisObj).parent().parent().parent().index()).find("img").attr({
    																										  		"src":$(thisObj).find("img").attr("src"),
    																												"alt":$(thisObj).attr("stone-name"),
    																												"title":$(thisObj).attr("stone-name")
    																												});
    			},
    		materialButtonChangeStyle:function(thisObj){
    			$(thisObj).addClass("selected").parent().siblings().find(".materialButton").removeClass("selected");
    			$(thisObj).parent().parent().parent().prev().find("img").attr("src",$(thisObj).find("img").attr("src"));
    			$(thisObj).parent().parent().parent().prev().find("em").text($(thisObj).attr("material-name"));
    			//设置材质信息到综述下
    			this.selectedMaterialInfoDiv.find(".stonename").text($(thisObj).attr("material-name"));
    			this.selectedMaterialInfoDiv.find("img").attr({
    														    "src":$(thisObj).find("img").attr("src"),
    															"alt":$(thisObj).attr("material-name"),
    															"title":$(thisObj).attr("material-name")
    															});
    			},
    		sendData:function(thisObj){
    			/*
    				{
    					combineCode=DO120901_W18_PM0010301_RM0020102,
    					code=BM001,
    					num=2,
    				}
    			*/
    			var _this_=this;
    			this.preloadingImg.show();//数据返回前执行显示loading图片
    			var data={
    						"combineCode":this.zuheCodeInput.val(),
    						"code":$(thisObj).attr("code"),
    						"num":$(thisObj).attr("num")
    					};
    				$.post("/gemCustomLastManagerDingZhiAction.do?param=loadCombineInfo",data,function(result){	
    									if(result.isNo!="no"){
    										_this_.setValue(result);									};																																							   
    								},"json");			
    			},
    		setValue:function(result){
    				/**
    				{"peiStoragenum":1,
    				"combineCode":"DO120901_Y18_YM0010301_GM0020102",
    				"materiaCode":"Y18",
    				"combinePicPath":"userfiles/custommade/do120901/y18/393/DO120901_Y18_YM0010301_GM0020102_F.jpg",
    				"peiStoragecode":["GM002"],
    				"mainStoneCode":"YM001",
    				"totalMoney":680}
    				*/
    				this.preloadingImg.hide();
    				this.zuheCodeInput.val(result.combineCode);
    				this.customBigImage.attr("src","/"+result.combinePicPath);
    			    this.customPrice.text(result.totalMoney);
    			},
    		changeFingerSetPrice:function(thisObj){
    					/**
    					combineCode:this.customBigImage.attr("zuhe-code")
    					fingerCode:$(thisObj).attr("val")
    					*/
    				var $this=this;
    				var v={
    						"combineCode":this.zuheCodeInput.val(),
    						"fingerCode":$(thisObj).attr("val")
    						};
    				//发送值去请求返回价格值
    				$.post("/gemCustomLastManagerDingZhiAction.do?param=getCombineMoneyByCombineCodeAndFingerCode",v,function(result){
    						$this.customPrice.text(result.combineMoney);	
    				},"json");
    		}
    		};
    //珠宝定制类->珠宝选择控件end
    

      

  • 相关阅读:
    云原生时代已来,计算机教育如何因「云」而变?
    征文投稿丨在轻量应用服务器上部署SpringBoot项目
    无影云电脑支持企业快速实现居家办公
    投稿开奖丨轻量应用服务器征文活动(2月)奖励公布
    使用云服务器ECS搭建DoH服务的开发实践
    深度解读「无影云电脑远程办公解决方案」
    三步搞定android应用底部导航栏
    问题总结211118至220208
    在centos5中配置yum源
    Android开发环境搭建(各种问题,各种解决)
  • 原文地址:https://www.cnblogs.com/yangliulang/p/2745015.html
Copyright © 2020-2023  润新知