You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
343 lines
9.3 KiB
JavaScript
343 lines
9.3 KiB
JavaScript
|
|
//DIY China Tour
|
|
//2012-3-20 by shw
|
|
|
|
var uDays=0;
|
|
var uCities="";
|
|
var uCitiesId="";
|
|
var uCitiesNum=0;
|
|
|
|
var lsLeft=0;
|
|
var lsTop=new Array(4);
|
|
|
|
$(function(){
|
|
var selectDays=$("#selectDays ul li");
|
|
selectDays.click(function(){
|
|
$("#selectDays").css("border","2px solid #FFF");
|
|
$("#one").hide();
|
|
$("#cityIcon,#goNext,#goBack").show(300);
|
|
selectDays.attr("class","");
|
|
$(this).attr("class","select");
|
|
uDays=$(this).html();
|
|
$("#selectDays").hide();
|
|
$("#stepBox .steps").eq(1).addClass("on");
|
|
msg();
|
|
});
|
|
|
|
var cityIcon=$("#cityIcon li.ico");
|
|
|
|
cityIcon.hover(function(){
|
|
$(this).css("opacity","0.8");
|
|
},function(){$(this).css("opacity","1");});
|
|
|
|
cityIcon.toggle(function(){
|
|
if(uCitiesNum<uDays || 1==1){ //È¥³ýÌìÊýÏÞÖƳÇÊÐ
|
|
$(this).attr("class","select");
|
|
uCitiesNum++;
|
|
}
|
|
msg();
|
|
},function(){
|
|
var thisClass=$(this).attr("class");
|
|
if(uCitiesNum<=uDays && thisClass=="select"){
|
|
$(this).attr("class","");
|
|
uCitiesNum--;
|
|
}
|
|
msg();
|
|
});
|
|
|
|
$("#goBack").click(function(){
|
|
$("h1").text("DIY Your China Tours");
|
|
$("#cityIcon,#goNext,#goBack").hide();
|
|
$("#selectDays").show(300);
|
|
$("#stepBox .steps").eq(1).removeClass("on");
|
|
});
|
|
|
|
$("#goBackToCityIco,#goBackToCityIco_f").click(function(){
|
|
$("#goBackToCityIco,#goBackToCityIco_f,#goNextToForm,#goNextToForm_f,#msgBox,#attractions").hide();
|
|
$("#cityIcon li,#goNext,#goBack").show();
|
|
$("#selectCity li").remove();
|
|
$("#attractions div").remove();
|
|
$("#nowNum").text(0);
|
|
uCities="";
|
|
$("#stepBox .steps").eq(2).removeClass("on");
|
|
});
|
|
|
|
$("#goNext").click(function(){
|
|
|
|
//1
|
|
|
|
uCities="";
|
|
$("#selectCity li").remove();
|
|
|
|
$("#stepBox .steps").eq(2).addClass("on");
|
|
|
|
var selectCities=$("#cityIcon li.select");
|
|
var selectNum=selectCities.length;
|
|
for(var i=0;i<selectNum;i++){
|
|
var selectCityName=selectCities.eq(i).find(".cityName").html();
|
|
uCities+=selectCityName+" ";
|
|
var thisCityActs=$('<div class="cityActs" id="'+selectCityName+'"></div>');
|
|
$("#attractions").append(thisCityActs);
|
|
}
|
|
|
|
$("#goBack,#goNext").hide();
|
|
$("#goBackToCityIco,#goNextToForm,#goBackToCityIco_f,#goNextToForm_f").show();
|
|
|
|
selectCities.clone().prependTo("#selectCity");
|
|
$("#cityIcon li").hide();
|
|
$("#selectCity li").attr("class","");
|
|
$("#selectCity").show(500);
|
|
$("h1").append(" "+uCities+" DIY Tour");
|
|
|
|
$("#sNum").text(2*uDays);
|
|
$("#mNum").text(3*uDays);
|
|
$("#lNum").text(4*uDays);
|
|
$("#msgBox").show();
|
|
|
|
var maxNum=4*uDays;
|
|
|
|
var isLoad=0;
|
|
|
|
//2
|
|
var selectCity=$("#selectCity li");
|
|
|
|
selectCity.click(function(){
|
|
|
|
if(isLoad==0){
|
|
|
|
isLoad=1;
|
|
|
|
var thisId=$(this).find(".cityName").attr("id");
|
|
|
|
lsTop[0]=0;
|
|
lsTop[1]=0;
|
|
lsTop[2]=0;
|
|
lsTop[3]=0;
|
|
lsLeft=0;
|
|
|
|
//alert(thisId);
|
|
|
|
var thisNum=$(this).index();
|
|
selectCity.attr("class","");
|
|
$("#attractions .cityActs").hide();
|
|
$(this).attr("class","select");
|
|
|
|
var isOld=$("#attractions .cityActs").eq(thisNum).find("ul").length;
|
|
|
|
if(isOld==0){
|
|
|
|
var loadDom=$("<div id='loadBox'><img src='/pic/loadLine.gif' id='loadPic' /></div>");
|
|
var percentageDom=$("<p id='loadNum'>0 %<p>");
|
|
$("#attractions .cityActs").eq(thisNum).html(loadDom);
|
|
$("#attractions .cityActs").eq(thisNum).append(percentageDom);
|
|
$("#loadNum").css({"text-align":"center","color":"#999","font-weight":"bold"});
|
|
$("#attractions").show();
|
|
$("#attractions .cityActs").eq(thisNum).show();
|
|
|
|
$.post("/diy/attraction/",{pid:thisId},function(data){
|
|
|
|
$("#attractions .cityActs").eq(thisNum).append(data);
|
|
$("#attractions .cityActs").eq(thisNum).find("ul").hide();
|
|
var thisLiNum=$("#attractions .cityActs").eq(thisNum).find("li").length;
|
|
|
|
var thisDivImg=$("#attractions .cityActs").eq(thisNum).find("li").find("img");
|
|
var divImgNum=0;
|
|
var imgPercentage=0;
|
|
|
|
thisDivImg.load(function(){
|
|
|
|
divImgNum++;
|
|
imgPercentage=((divImgNum/thisLiNum)*100).toFixed(2);
|
|
|
|
$("#loadNum").html(imgPercentage+" %");
|
|
|
|
$("#loadPic").css({"width":imgPercentage+"%","height":"39px"});
|
|
|
|
if(divImgNum==thisLiNum){
|
|
|
|
isLoad=0;
|
|
|
|
var thisDivHeight=$("#attractions .cityActs").eq(thisNum).css("height");
|
|
$("#attractions .cityActs").eq(thisNum).find("li").css({"position":"absolute"});
|
|
loadDom.remove();
|
|
percentageDom.remove();
|
|
$("#attractions .cityActs").eq(thisNum).find("ul").show();
|
|
|
|
var lastTopPx=0;
|
|
|
|
for(var q=0;q<thisLiNum;q++){
|
|
|
|
var nowNum=q+1;
|
|
var nowTop=nowNum % 4;
|
|
var thisLi=$("#attractions .cityActs").eq(thisNum).find("li").eq(q);
|
|
var thisLiWidth=thisLi.css("width");
|
|
var thisLiHeight=thisLi.css("height");
|
|
|
|
thisLi.css({"left":lsLeft+"px","top":lsTop[3-nowTop]+"px"});
|
|
|
|
lsLeft=lsLeft+parseInt(thisLiWidth)+25;
|
|
lsTop[3-nowTop]=lsTop[3-nowTop]+parseInt(thisLiHeight)+26;
|
|
if(nowTop == 0){
|
|
lsLeft=0;
|
|
}
|
|
|
|
if(q==thisLiNum-1){
|
|
var maxTop=0;
|
|
for(var t=0;t<4;t++){
|
|
if(t==0){
|
|
maxTop=lsTop[t];
|
|
}else{
|
|
if(lsTop[t]>maxTop){maxTop=lsTop[t]}
|
|
}
|
|
}
|
|
lastTopPx=maxTop;
|
|
}
|
|
|
|
}
|
|
|
|
$("#attractions .cityActs").eq(thisNum).find("ul").css("height",lastTopPx+"px");
|
|
|
|
//¾°µã½»»¥
|
|
var attractionLi=$("#attractions .cityActs li img");
|
|
|
|
attractionLi.hover(function(){
|
|
$(this).css("opacity","0.9");
|
|
},function(){
|
|
$(this).css("opacity","1");
|
|
});
|
|
|
|
attractionLi.toggle(function(){
|
|
var nowANum=parseInt($("#nowNum").text());
|
|
nowANum++;
|
|
$("#nowNum").text(nowANum);
|
|
$(this).parent().parent().attr("class","select");
|
|
},function(){
|
|
var nowANum=parseInt($("#nowNum").text());
|
|
nowANum--;
|
|
$("#nowNum").text(nowANum);
|
|
$(this).parent().parent().attr("class","");
|
|
});
|
|
|
|
//²é¿´¾°µãÏêϸÐÅÏ¢
|
|
$(".attractionName").click(function(){
|
|
|
|
var urlStr=$(this).attr("name");
|
|
var thisActOBJ=$(this).parent();
|
|
var thisActOBJclass=thisActOBJ.attr("class");
|
|
|
|
var butStr="";
|
|
|
|
if(thisActOBJclass=="select"){
|
|
butStr="Cancel selection";
|
|
}else{
|
|
butStr="Choose this";
|
|
}
|
|
|
|
var actBox=art.dialog({okValue:butStr,ok:function() {
|
|
thisActOBJ.find("img").click();
|
|
}});
|
|
actBox.lock();
|
|
|
|
$.post("/diy/getdata/",{url:urlStr},function(data){
|
|
actBox.content("<div class='infoMsgBox'>"+data+"</div>");
|
|
});
|
|
|
|
});
|
|
|
|
$("#goNextToForm,#goNextToForm_f").click(function(){
|
|
|
|
$("#goBackToCityIco,#goNextToForm,#goBackToCityIco_f,#goNextToForm_f").hide();
|
|
|
|
$("#stepBox .steps").eq(3).addClass("on");
|
|
|
|
var allSelectAct=$("#attractions .cityActs li.select");
|
|
var allSelectNum=allSelectAct.length;
|
|
var userTour="";
|
|
for(var x=0;x<allSelectNum;x++){
|
|
var actCityName=allSelectAct.eq(x).parent().parent().attr("id");
|
|
var actName=allSelectAct.eq(x).text();
|
|
userTour+=actCityName+"---"+actName+"\n";
|
|
}
|
|
var tourTitle=$("h1").text();
|
|
var tourAllStr=tourTitle+"\n\n"+userTour;
|
|
|
|
$("#selectCity,#attractions,#msgBox").hide();
|
|
|
|
$("#userTourStr").val("Your China Tour:\n"+tourAllStr);
|
|
|
|
$("#uForm").show();
|
|
|
|
});
|
|
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
}else{ isLoad=0; $("#attractions .cityActs").eq(thisNum).show(); }
|
|
|
|
$(window).scroll(scrollAct);
|
|
|
|
}
|
|
});
|
|
|
|
selectCity.eq(0).click();
|
|
|
|
//over
|
|
});
|
|
|
|
//backNow
|
|
// $("#backBut2").click(function(){
|
|
// $("#stepBox .steps").eq(2).removeClass("on");
|
|
// $("#selectCity,#attractions .cityActs,#msgBox").hide();
|
|
// $("#cityIcon li,#goNext").show(300);
|
|
// });
|
|
|
|
|
|
});
|
|
|
|
function msg(){
|
|
$("h1").html(uDays+"-Day ");
|
|
}
|
|
|
|
function scrollAct(){
|
|
var msgTop=$("#msgBox").offset().top;
|
|
var msgHeight=parseInt($("#msgBox").css("height"));
|
|
if($(window).scrollTop() + msgHeight > msgTop){
|
|
$("#msgBox").css({"position":"fixed","top":"0","z-index":"99","width":"933px"});
|
|
}
|
|
if(msgTop<=320){
|
|
$("#msgBox").css({"position":""});
|
|
}
|
|
}
|
|
|
|
this.vtip = function() {
|
|
this.xOffset = 0; // x distance from mouse
|
|
this.yOffset = 10; // y distance from mouse
|
|
|
|
$(".vtip").unbind().hover(
|
|
function(e) {
|
|
this.t = this.title;
|
|
this.title = '';
|
|
this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset);
|
|
|
|
$('body').append( '<p id="vtip"><img id="vtipArrow" />' + this.t + '</p>' );
|
|
|
|
$('p#vtip #vtipArrow').attr("src", '/css/images/vtip_arrow.png');
|
|
$('p#vtip').css("top", this.top+"px").css("left", this.left+"px").fadeIn("slow");
|
|
|
|
},
|
|
function() {
|
|
this.title = this.t;
|
|
$("p#vtip").fadeOut("slow").remove();
|
|
}
|
|
).mousemove(
|
|
function(e) {
|
|
this.top = (e.pageY + yOffset);
|
|
this.left = (e.pageX + xOffset);
|
|
|
|
$("p#vtip").css("top", this.top+"px").css("left", this.left+"px");
|
|
}
|
|
);
|
|
|
|
};jQuery(document).ready(function($){vtip();})
|