页码部分的js-白红宇

页码部分的js

阅读量：5756 次

发布时间：2019-06-18

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

<?php

for($j=1;$j<=$totalpage;$j++){

echo '<li><a id="page'.$j.'" class="vpage" href="javascript:void(0)">'.$j.'</a></li>';

}

if($totalpage>5)

echo '<li><a href="javascript:void(0)" style="display:none">......</a></li>';

</ul>

<tr>

</tr>

</table>

</div>

$(function(){

//取总页数

var sump=$('#sump').text();

//页面左侧按钮

$('#public_ym_left').live('click',function(){

//<符号的右侧的第一个号

var sibQ=$('#public_ym_left').next().text();

//定起始位置，滑动页码

if(sibQ>=1&&sibQ<=5) var start=1;

if(sibQ>5)

var start=parseInt(sibQ)-4;

start=start<0?0:start;

$("#upage").children().remove();

var childQ=$('<li id="public_ym_left"><a href="javascript:void(0)"></a></li>');

var childH=$('<li id="public_ym_right"><a href="javascript:void(0)"></a></li>');

if(parseInt(end)>5)

var loage=$('<li><a href="javascript:void(0)">......</a></li>');

else

var loage=$('<li><a href="javascript:void(0)" style="display:none">......</a></li>');

//链接左滑动按钮

$("#upage").append(childQ);

var end=(start+5>parseInt(sump))?parseInt(sump):(start+5);

for(var i=start;i<=end;i++)

{

var son=$('<li><a class="vpage" id="page'+i+'" href="javascript:void(0)">'+i+'</a></li>');

$("#upage").append(son);

}

//链接省略号

$("#upage").append(loage);

//链接右滑动按钮

$("#upage").append(childH);

$('#public_ym_left').unbind();

});

//页码右侧按钮

$('#public_ym_right').live('click',function(){

var sibH=$('#public_ym_right').prev().prev().text();

//定起始位置，滑动页码

var start=parseInt(sibH);

$("#upage").children().remove();

var childQ=$('<li id="public_ym_left"><a href="javascript:void(0)"></a></li>');

var childH=$('<li id="public_ym_right"><a href="javascript:void(0)"></a></li>');

if(parseInt(end)>5)

var loage=$('<li><a href="javascript:void(0)">......</a></li>');

else

var loage=$('<li><a href="javascript:void(0)" style="display:none">......</a></li>');

$("#upage").append(childQ);

var end=(start+5>parseInt(sump))?parseInt(sump):(start+5);

for(var i=start;i<=end;i++)

{

var son=$('<li><a class="vpage" id="page'+i+'" href="javascript:void(0)">'+i+'</a></li>');

$("#upage").append(son);

}

$("#upage").append(loage);

$("#upage").append(childH);

$('#public_ym_right').unbind();

});

//页面跳转输入框控制

$('.ym_tzys').bind('blur',function(){

var p=$('.ym_tzys').val();

if(p>sump) $('.ym_tzys').val(sump);

});

//点击具体页码或是页面跳转按钮，跳转页面

$('.vpage').live('click',function(){

var p=$('.ym_tzys').val();

var pgNum=(!p||p<sump)?($(this).text()):p;

//alert(pgNum);

$.post('__URL__/turnpage',{page:pgNum},function(data){

//alert(data['gd'][1]['goodsURL']);

if($('#bfcontent').children().length==5)

$('.title_more').css('display','block');

$.each($('.vpage'),function(i,val){

$('.vpage').css('background-p_w_picpath','url(__PUBLIC__/Home/img/ym_link.png)');

});

$(this).css('background-p_w_picpath','url(__PUBLIC__/Home/img/ym_hover.png)');//所点击的页为粉色背景

$(this).css('color','#fff');//所点击的页为粉色背景

//$("#button1").after("<span>内容</span>") $("<span>内容</span>").insertAfter("#button1")

start=parseInt(pgNum);

$("#upage").children().remove();

var childQ=$('<li id="public_ym_left"><a href="javascript:void(0)"></a></li>');

var childH=$('<li id="public_ym_right"><a href="javascript:void(0)"></a></li>');

if(parseInt(end)>5)

var loage=$('<li><a href="javascript:void(0)">......</a></li>');

else

var loage=$('<li><a href="javascript:void(0)" style="display:none">......</a></li>');

$("#upage").append(childQ);

var end=(start+5>parseInt(sump))?parseInt(sump):(start+5);

for(var i=start;i<=end;i++)

{

var son=$('<li><a class="vpage" id="page'+i+'" href="javascript:void(0)">'+i+'</a></li>');

$("#upage").append(son);

}

$("#upage").append(loage);

$("#upage").append(childH);

$('#page'+start).css('background-p_w_picpath','url(__PUBLIC__/Home/img/ym_hover.png)');

$('#page'+start).css('color','#fff');

// 清空页面内容，重新链接新页面的数据节点

$('#cttwhl').children().remove();

for(var j=0;j<2;j++)

{//alert(data['curpage']);

var k=(data['curpage']-1)*2+j;

var bfcont=$('<div class="zy_scj_box" id="wc'+k+'"></div>');

$('#cttwhl').append(bfcont);

for(var i=0;i<6;i++){

var m=k*6+i;

var son1=$('<div class="zy_scj_box_wai" id="divbx'+m+'"></div>');

$('#wc'+k).append(son1);

var hson=$('<h1><a href="__APP__/Goods/dpxq/goodsID/'+data['gd'][m]['goodsID']+'" target="_parent"><img src="'+data['gd'][m]['goodsURL']+'" /></a></h1>');

$('#divbx'+m).append(hson);

var sons=$('<div class=""><table width="150" border="0" cellspacing="0" cellpadding="0"><tr><td><table width="150" border="0" cellspacing="0" cellpadding="0"><tr><td width="20"><input name="suoyou" type="checkbox" value="" /></td><td width="130"> '+data['gd'][m]['goodsName']+'</td></tr></table></td></tr><tr><td class="zy_cont_size">￥：'+data['gd'][m]['goodsPrice']+'</td></tr><tr><td><table width="150" height="26" border="0" cellspacing="0" cellpadding="0"><tr><td width="24" class="zy_tb_jrdp"><a href="#"> </a></td><td width="24" class="zy_wdfx_02" un="kkkk'+data['gd'][m]['goodsID']+'"><a href="#"> </a></td><td width="32"> </td></tr></table></td></tr></table></div>');

$('#divbx'+m).append(sons);

}

},'json');

});

</script>

/*--页码数--*/

.public_ym{ margin:0 auto; width:570px; height:50px; padding-top:50px; clear:both;}

.public_ym ul{ float:left;}

.public_ym ul li{ display:block; text-align:center; f; height:39px; line-height:32px; background:url(../img/ym_link.png); font-size:14px; font-family:"微软雅黑";}loat:left; padding-left:10px;}

.public_ym ul li a{ display:block;width:38px

.public_ym ul li a:hover{ display:block; background:url(../img/ym_hover.png) no-repeat; color:#FFF;}

#public_ym_left a{ background:url(../img/ym_link_left.png);width:38px; height:39px; display:block;}

#public_ym_left a:hover{ background:url(../img/ym_hover_left.png);width:38px; height:39px; display:block;}

#public_ym_right a{ background:url(../img/ym_link_right.png);width:38px; height:39px; display:block;}

#public_ym_right a:hover{ background:url(../img/ym_hover_right.png);width:38px; height:39px; display:block;}

.public_tzy{ float:left; width:180px; line-height:30px;}

.ym_tzys{ width:40px; border:1px solid #c2c2c2; height:20px; text-align:center;}

/*--页码数--*/

转载于:https://blog.51cto.com/8335914/1392373

你可能感兴趣的文章

文章“关于架构优化和设计，架构师必须知道的事情”