var sc = null;function ScrollCtrl(){ //stores.jsp,store-details.jsp共用这份js,修改时需注意
};
ScrollCtrl.prototype = {
current_idx:0,
current_margin:0,
eachHeight:186,
scrollCount:4,
speed: 150,
buyListCss : ".store_list", //因购买首页和“专卖店详情页”,使用的样式不一样,故而需要判断
init:function(){
sc.current_margin = 0; $("#scrollup").bind("click", this.scrollUp);
$("#scrolldown").bind("click", this.scrollDown);
$("#scrollup").bind("mouseout", function(){
$("#scrollup")[0].className="buy_slider buy_down_empty";
});
$("#scrolldown").bind("mouseout", function(){
$("#scrolldown")[0].className="buy_slider buy_up_empty";
});
if(sc.getListCount()> sc.scrollCount) {
$("#scrollup").bind("mouseover", function(){
$("#scrollup")[0].className="buy_slider buy_down";
});
} },
scrollUp:function(){
var _this= $("#stores_list");
var _list = _this.find(sc.buyListCss);
if(_list.length-sc.current_idx<=sc.scrollCount){
return;
}
var count = 0;
var upHeight =0;
var i=0;
for(; i<sc.scrollCount && sc.current_idx+i+sc.scrollCount<_list.length;i++){
upHeight += sc.eachHeight;
count++;
}
sc.current_idx+=count;
sc.current_margin +=-upHeight;
_this.animate({marginTop:sc.current_margin}, sc.speed*count);
$("#scrolldown").bind("mouseover", function(){
$("#scrolldown")[0].className="buy_slider buy_up";
});
if(sc.current_idx+sc.scrollCount < _list.length) {
$("#scrollup").bind("mouseover", function(){
$("#scrollup")[0].className="buy_slider buy_down";
});
}
else {
$("#scrollup")[0].className="buy_slider buy_down_empty";
$("#scrollup").bind("mouseover", function(){
$("#scrollup")[0].className="buy_slider buy_down_empty";
});
}
},
scrollDown:function(){ //向下翻页函数
if(sc.current_idx<=0){
return;
}
var _this= $("#stores_list");
var _list = _this.find(sc.buyListCss);
var _listSize=_list.length;
var downHeight = 0;
var count = 0;
var i=0;
for(; i<sc.scrollCount && sc.current_idx-1-i>=0;i++){
downHeight += sc.eachHeight;
count++;
}
sc.current_margin +=downHeight;
sc.current_idx-=count;
_this.animate({marginTop:sc.current_margin},sc.speed*count); if(sc.current_idx<=0) {
$("#scrolldown")[0].className="buy_slider buy_up_empty";
$("#scrolldown").bind("mouseover", function(){
$("#scrolldown")[0].className="buy_slider buy_up_empty";
});
}
else {
$("#scrolldown").bind("mouseover", function(){
$("#scrolldown")[0].className="buy_slider buy_up";
});
}
$("#scrollup").bind("mouseover", function(){
$("#scrollup")[0].className="buy_slider buy_down";
});
},
getListCount : function(){
var _this= $("#stores_list");
var _list = _this.find(sc.buyListCss);
return _list.length;
}
};function Stores(){
this.regionCache = new Object;
};Stores.prototype = {
storesList:{},
eachPage: 100, //每页显示几个专卖店
currentPage:1,
totalPage:1,
selectedStore:0,
selectedCity:0,
isInit:true,
initData : function(){
this.loadRegions(initProvince,provIndex);
},
showoutEachStore : function(json,start) {
var fulltext="";
var i=start;
var eachCount=0;
for( ; i < json.length && eachCount< stores.eachPage; i++,eachCount++){
fulltext += '<div class="store_content">';
fulltext += '<div class="store_left"><a href="/storelist/store_detail/'+json[i].actid+'.html" target="stores_window"><img src="'+picPath+json[i].showimage+'" /></a></div>';
fulltext += '<div class="store_right"><ul>';
fulltext += ' <li style="padding-top:0px;"><a class="title" target="stores_window" href="/storelist/store_detail/'+json[i].actid+'.html">'+json[i].zmdname+'</a>';
fulltext += ' <a class="title" target="stores_window" href="/storelist/store_detail/'+json[i].actid+'.html#map_canvas"><img src="resources/www/images/default/buy/store_map.jpg" style="width:24px;height:18px;vertical-align: middle;"/></a></li>';
fulltext += ' <li><span class="star" title='+ stores.makeScore(json[i].showscore).toFixed(2) +storesRes.fen /*分 */ +'>'+stores.makeStars(json[i].showscore)+'</span></li>';
fulltext += ' <li><span>'+json[i].acttel+'</span></li>';
fulltext += ' <li><span>'+json[i].zmdaddress +'</span></li>';
fulltext += '</ul></div></div>';
}
$('#list_stores').html(fulltext);
},
storesReset : function() {
$("#table_tbody_stores").html("");
},
makeSelectedCss : function(id,index) { //区分两个字,三个字,四个字
$("#"+id+index)[0].className='checkArea';
},
showRegion : function(province, region, index){
if(index==undefined) {
index=0;
}
if( $("#storescity"+stores.selectedCity)[0] ) {
$("#storescity"+stores.selectedCity)[0].className="";
}
if( $("#storescity"+index)[0] ) {
stores.makeSelectedCss('storescity',index);
stores.selectedCity=index;
}
$.getJSON($.getUrl('www_storesAct/getRegionStores.jsonp?p0='+encodeURIComponent(province)+'&p1='+encodeURIComponent(region)), function(json){
if(json.error){
fulltext = storesRes.getDataError; /*获取数据错误*/
} else {
var fulltext = '';
var table_html = [];
if(!json || json.length==0){
fulltext = "NULL";
}else{
stores.storesList=json; //记录专卖店数据
for(i = 0, size = json.length; i < size && i< stores.eachPage; i++){
if(i==0){
table_html.push('<tr>');
}
if(i==(json.length-1) && (i%2==0)){ //处理单数个td border-bottom 的情况
table_html.push( '<td colspan="2">');
}else{
table_html.push( '<td>');
}
table_html.push( '<div><ul>');
table_html.push( '<li><a style="color:#27B3EF;" target="stores_window" href="/storelist/store_detail/'+json[i].actid+'.html">'+json[i].zmdname+'</a>');
table_html.push( '<li><span>'+json[i].zmdaddress_real +'</span></li>');
if(json[i].zmdaddress_refer!=null){
table_html.push( '<li><span>'+json[i].zmdaddress_refer +'</span></li>');
}
table_html.push( '<li><span>'+json[i].acttel+'</span></li>');
table_html.push( '</ul></div>');
table_html.push( '</td>');
if(i==(json.length-1)){
table_html.push("</tr>");
}else if(i>0 && (i+1)%2==0){
table_html.push("</tr>");
table_html.push("<tr>");
}
}
}
}
if(table_html.join("")!=""){
$("#table_tbody_stores").empty().html(table_html.join(""));
//去掉重叠分割线
$("#table_tbody_stores tr:last").find("td").css("border-bottom","none");
}else{
return;
}
});
},
makeScore : function(score){
if(score==0 || score>=5){
return 5;
}
return score;
},
makeStars : function(score){
var txt = "";
var score = score*10;
for(var s=10; s<=50;s+=10){
var st = 1;
if(score==0){ //无人评分时显示5颗星
st = 1;
}else{
if(s<=score){
st = 1;
}else if(s<=score+5){
st = 3;
}else{
st = 2;
}
}
txt+= ("<img src='"+MZEnv.contextPath+"resources/www/images/default/buy/star"+st+".png'>");
}
return txt;
},
loadRegions : function(province,index) {
if('香港' == province){
$('#hk_Deail_inf').show();
} else {
$('#hk_Deail_inf').hide();
}
$("#province"+stores.selectedStore)[0].className=""; //省份选择样式
stores.selectedStore=index;
stores.makeSelectedCss('province',index);
if(this.regionCache[province]){
stores.renderRegions(province,this.regionCache[province]);
}else{
$('#regions').html( storesRes.loadingData /*正在装载数据... */);
$.getJSON($.getUrl('www_storesAct/getRegion.jsonp?p0='+encodeURIComponent(province)), function(json){
stores.renderRegions(province,json);
stores.regionCache[province]=json;
});
}
},
inArray:function(item,arr)
{
for ( var i = 0; i < arr.length; i++) {
if(item==arr[i])
{
return true;
}
}
return false;
},
fiterRegions:function(regions)
{ var arr=[];
var arr2=[];
for ( var i = 0; i < regions.length; i++) {
if(!stores.inArray(regions[i]['region'],arr))
{
arr.push(regions[i]['region']);
arr2.push(regions[i]);
}
}
return arr2;
},
renderRegions:function(province, json){
var isRight=false;
var fulltext = '';
var regions = json.regions;
regions=stores.fiterRegions(regions);
var midx = 0;
if(json.error){
fulltext = storesRes.getDataError; /*获取数据错误*/
} else {
if(!regions || regions.length==0){
fulltext = storesRes.noData; /*暂无数据*/
}else{
var rendered = new Object;
for(i = 0, size = regions.length; i < size; i++){
var city=regions[i].region;
var city_show=regions[i].region_show;
if(rendered[city]){
continue;
}else{
rendered[city] = i;
}
if(city == curCity){
midx=i;
}
fulltext += '<a href="javascript:void(0);" onclick="javascript:stores.showRegion(\''+province+'\',\''+city+'\','+ i +');">'+
'<span id="storescity'+ i +'">'+city_show+'</span>'+
'</a>';
}
isRight=true;
}
}
if(isRight){
$('#regions').html(fulltext);
}else{
$('#regions').html('<div style="margin-left:10px;">'+fulltext+'</div>');
}
if(isRight) {
if(stores.isInit){
stores.showRegion(province, regions[midx].region, midx);
stores.isInit = false;
}else{
stores.showRegion(province, regions[0].region, 0);
}
} else {
stores.storesReset();
}
}, gotoBuy : function(index) {
window.open(urlList[index],'_self');
},
makeProPage :function(index) {
if(index==curPro)
return ;
$("#stores_list").html(proStrList[parseInt(index-1)]);
$("#propage"+curPro)[0].className="";
$("#propage"+index)[0].className="selected";
curPro=index;
}
};把里面一些重点的注释就可以了。AjaxJSON函数javascript
};
ScrollCtrl.prototype = {
current_idx:0,
current_margin:0,
eachHeight:186,
scrollCount:4,
speed: 150,
buyListCss : ".store_list", //因购买首页和“专卖店详情页”,使用的样式不一样,故而需要判断
init:function(){
sc.current_margin = 0; $("#scrollup").bind("click", this.scrollUp);
$("#scrolldown").bind("click", this.scrollDown);
$("#scrollup").bind("mouseout", function(){
$("#scrollup")[0].className="buy_slider buy_down_empty";
});
$("#scrolldown").bind("mouseout", function(){
$("#scrolldown")[0].className="buy_slider buy_up_empty";
});
if(sc.getListCount()> sc.scrollCount) {
$("#scrollup").bind("mouseover", function(){
$("#scrollup")[0].className="buy_slider buy_down";
});
} },
scrollUp:function(){
var _this= $("#stores_list");
var _list = _this.find(sc.buyListCss);
if(_list.length-sc.current_idx<=sc.scrollCount){
return;
}
var count = 0;
var upHeight =0;
var i=0;
for(; i<sc.scrollCount && sc.current_idx+i+sc.scrollCount<_list.length;i++){
upHeight += sc.eachHeight;
count++;
}
sc.current_idx+=count;
sc.current_margin +=-upHeight;
_this.animate({marginTop:sc.current_margin}, sc.speed*count);
$("#scrolldown").bind("mouseover", function(){
$("#scrolldown")[0].className="buy_slider buy_up";
});
if(sc.current_idx+sc.scrollCount < _list.length) {
$("#scrollup").bind("mouseover", function(){
$("#scrollup")[0].className="buy_slider buy_down";
});
}
else {
$("#scrollup")[0].className="buy_slider buy_down_empty";
$("#scrollup").bind("mouseover", function(){
$("#scrollup")[0].className="buy_slider buy_down_empty";
});
}
},
scrollDown:function(){ //向下翻页函数
if(sc.current_idx<=0){
return;
}
var _this= $("#stores_list");
var _list = _this.find(sc.buyListCss);
var _listSize=_list.length;
var downHeight = 0;
var count = 0;
var i=0;
for(; i<sc.scrollCount && sc.current_idx-1-i>=0;i++){
downHeight += sc.eachHeight;
count++;
}
sc.current_margin +=downHeight;
sc.current_idx-=count;
_this.animate({marginTop:sc.current_margin},sc.speed*count); if(sc.current_idx<=0) {
$("#scrolldown")[0].className="buy_slider buy_up_empty";
$("#scrolldown").bind("mouseover", function(){
$("#scrolldown")[0].className="buy_slider buy_up_empty";
});
}
else {
$("#scrolldown").bind("mouseover", function(){
$("#scrolldown")[0].className="buy_slider buy_up";
});
}
$("#scrollup").bind("mouseover", function(){
$("#scrollup")[0].className="buy_slider buy_down";
});
},
getListCount : function(){
var _this= $("#stores_list");
var _list = _this.find(sc.buyListCss);
return _list.length;
}
};function Stores(){
this.regionCache = new Object;
};Stores.prototype = {
storesList:{},
eachPage: 100, //每页显示几个专卖店
currentPage:1,
totalPage:1,
selectedStore:0,
selectedCity:0,
isInit:true,
initData : function(){
this.loadRegions(initProvince,provIndex);
},
showoutEachStore : function(json,start) {
var fulltext="";
var i=start;
var eachCount=0;
for( ; i < json.length && eachCount< stores.eachPage; i++,eachCount++){
fulltext += '<div class="store_content">';
fulltext += '<div class="store_left"><a href="/storelist/store_detail/'+json[i].actid+'.html" target="stores_window"><img src="'+picPath+json[i].showimage+'" /></a></div>';
fulltext += '<div class="store_right"><ul>';
fulltext += ' <li style="padding-top:0px;"><a class="title" target="stores_window" href="/storelist/store_detail/'+json[i].actid+'.html">'+json[i].zmdname+'</a>';
fulltext += ' <a class="title" target="stores_window" href="/storelist/store_detail/'+json[i].actid+'.html#map_canvas"><img src="resources/www/images/default/buy/store_map.jpg" style="width:24px;height:18px;vertical-align: middle;"/></a></li>';
fulltext += ' <li><span class="star" title='+ stores.makeScore(json[i].showscore).toFixed(2) +storesRes.fen /*分 */ +'>'+stores.makeStars(json[i].showscore)+'</span></li>';
fulltext += ' <li><span>'+json[i].acttel+'</span></li>';
fulltext += ' <li><span>'+json[i].zmdaddress +'</span></li>';
fulltext += '</ul></div></div>';
}
$('#list_stores').html(fulltext);
},
storesReset : function() {
$("#table_tbody_stores").html("");
},
makeSelectedCss : function(id,index) { //区分两个字,三个字,四个字
$("#"+id+index)[0].className='checkArea';
},
showRegion : function(province, region, index){
if(index==undefined) {
index=0;
}
if( $("#storescity"+stores.selectedCity)[0] ) {
$("#storescity"+stores.selectedCity)[0].className="";
}
if( $("#storescity"+index)[0] ) {
stores.makeSelectedCss('storescity',index);
stores.selectedCity=index;
}
$.getJSON($.getUrl('www_storesAct/getRegionStores.jsonp?p0='+encodeURIComponent(province)+'&p1='+encodeURIComponent(region)), function(json){
if(json.error){
fulltext = storesRes.getDataError; /*获取数据错误*/
} else {
var fulltext = '';
var table_html = [];
if(!json || json.length==0){
fulltext = "NULL";
}else{
stores.storesList=json; //记录专卖店数据
for(i = 0, size = json.length; i < size && i< stores.eachPage; i++){
if(i==0){
table_html.push('<tr>');
}
if(i==(json.length-1) && (i%2==0)){ //处理单数个td border-bottom 的情况
table_html.push( '<td colspan="2">');
}else{
table_html.push( '<td>');
}
table_html.push( '<div><ul>');
table_html.push( '<li><a style="color:#27B3EF;" target="stores_window" href="/storelist/store_detail/'+json[i].actid+'.html">'+json[i].zmdname+'</a>');
table_html.push( '<li><span>'+json[i].zmdaddress_real +'</span></li>');
if(json[i].zmdaddress_refer!=null){
table_html.push( '<li><span>'+json[i].zmdaddress_refer +'</span></li>');
}
table_html.push( '<li><span>'+json[i].acttel+'</span></li>');
table_html.push( '</ul></div>');
table_html.push( '</td>');
if(i==(json.length-1)){
table_html.push("</tr>");
}else if(i>0 && (i+1)%2==0){
table_html.push("</tr>");
table_html.push("<tr>");
}
}
}
}
if(table_html.join("")!=""){
$("#table_tbody_stores").empty().html(table_html.join(""));
//去掉重叠分割线
$("#table_tbody_stores tr:last").find("td").css("border-bottom","none");
}else{
return;
}
});
},
makeScore : function(score){
if(score==0 || score>=5){
return 5;
}
return score;
},
makeStars : function(score){
var txt = "";
var score = score*10;
for(var s=10; s<=50;s+=10){
var st = 1;
if(score==0){ //无人评分时显示5颗星
st = 1;
}else{
if(s<=score){
st = 1;
}else if(s<=score+5){
st = 3;
}else{
st = 2;
}
}
txt+= ("<img src='"+MZEnv.contextPath+"resources/www/images/default/buy/star"+st+".png'>");
}
return txt;
},
loadRegions : function(province,index) {
if('香港' == province){
$('#hk_Deail_inf').show();
} else {
$('#hk_Deail_inf').hide();
}
$("#province"+stores.selectedStore)[0].className=""; //省份选择样式
stores.selectedStore=index;
stores.makeSelectedCss('province',index);
if(this.regionCache[province]){
stores.renderRegions(province,this.regionCache[province]);
}else{
$('#regions').html( storesRes.loadingData /*正在装载数据... */);
$.getJSON($.getUrl('www_storesAct/getRegion.jsonp?p0='+encodeURIComponent(province)), function(json){
stores.renderRegions(province,json);
stores.regionCache[province]=json;
});
}
},
inArray:function(item,arr)
{
for ( var i = 0; i < arr.length; i++) {
if(item==arr[i])
{
return true;
}
}
return false;
},
fiterRegions:function(regions)
{ var arr=[];
var arr2=[];
for ( var i = 0; i < regions.length; i++) {
if(!stores.inArray(regions[i]['region'],arr))
{
arr.push(regions[i]['region']);
arr2.push(regions[i]);
}
}
return arr2;
},
renderRegions:function(province, json){
var isRight=false;
var fulltext = '';
var regions = json.regions;
regions=stores.fiterRegions(regions);
var midx = 0;
if(json.error){
fulltext = storesRes.getDataError; /*获取数据错误*/
} else {
if(!regions || regions.length==0){
fulltext = storesRes.noData; /*暂无数据*/
}else{
var rendered = new Object;
for(i = 0, size = regions.length; i < size; i++){
var city=regions[i].region;
var city_show=regions[i].region_show;
if(rendered[city]){
continue;
}else{
rendered[city] = i;
}
if(city == curCity){
midx=i;
}
fulltext += '<a href="javascript:void(0);" onclick="javascript:stores.showRegion(\''+province+'\',\''+city+'\','+ i +');">'+
'<span id="storescity'+ i +'">'+city_show+'</span>'+
'</a>';
}
isRight=true;
}
}
if(isRight){
$('#regions').html(fulltext);
}else{
$('#regions').html('<div style="margin-left:10px;">'+fulltext+'</div>');
}
if(isRight) {
if(stores.isInit){
stores.showRegion(province, regions[midx].region, midx);
stores.isInit = false;
}else{
stores.showRegion(province, regions[0].region, 0);
}
} else {
stores.storesReset();
}
}, gotoBuy : function(index) {
window.open(urlList[index],'_self');
},
makeProPage :function(index) {
if(index==curPro)
return ;
$("#stores_list").html(proStrList[parseInt(index-1)]);
$("#propage"+curPro)[0].className="";
$("#propage"+index)[0].className="selected";
curPro=index;
}
};把里面一些重点的注释就可以了。AjaxJSON函数javascript
var request=new XMLHttpRequest();
request.open("METHOD",URL);//METHOD为GET或POST
request.onreadystatechanged=function(){//callback};
request.send(data);//GET方法data为null,POST为参数;
其他的都是与Ajax无关的。