页码部分的js

原创

魔法猫 2014-04-08 17:08:37 博主文章分类：javascript ©著作权

©著作权归作者所有：来自51CTO博客作者魔法猫的原创作品，请联系作者获取转载授权，否则将追究法律责任

<div class="public_ym" style="display:none">
<ul id="upage">
<li id="public_ym_left"><a href="javascript:void(0)" ></a></li>
<?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>';
?>
<li id="public_ym_right"><a href="javascript:void(0)"></a></li>
</ul>
<table border="0" cellpadding="0" cellspacing="0" class="public_tzy">
<tr>

<td width="59"> 共<span id="sump"><{$totalpage}></span>页<span>
<td width="64" align="right">到第</td>
<td width="57" align="center"><input name="" type="text" class="ym_tzys" /></td>
<td><input type="button" id="jump" name="" value="跳"/></span></td>
</tr>
</table>
</div>


<script>
$(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;}
/*--页码数--*/