选择珠宝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

  

原文地址:https://www.cnblogs.com/yangliulang/p/2745015.html