索引:前几天看电视,使用遥控器的时候突然想到,我们的数据分页也可以用这种模式。于是敲出来一个类似于遥控器控制电视原理的分页。
现在详细介绍下上图中按钮的作用:
清除按钮:当按下0-9这个几个按钮时,如果有按错在指定时间内可以单击清除来清除按下的所以按键。
0-9按扭,类似遥控器上的0-9按钮,没点击一个数字,后台都有一个变量记录,并以字符串的方式累加。在指定时间内会跳转到累加的数字上。比如点击1和4则会跳转到第14页,如果没有那么多页,则会跳转到最后一页。
To按钮:这是除了程序自动跳转外,点击To按钮可以立即跳转,不用等进度条读完。
To下的进度条:显示自动跳转的进度。
下一批:功能同正常分页的下一页一样
上一批:功能同正常分页的上一页一样。
优点:可以免去正常分页的繁琐,用户体验好。
缺点:要自己点击,或者等指定的时间。
html代码:
<div id="wp_cp">@if (pi > 1) {<div id="wp_prev" οnclick="Javascript:location.href='/Wall/WallNote?height=@clientY&width=@clientX&pi=@(pi-1)'">上一批</div> } <font id="wp_cm">清除</font><br/><span>1</span><span>2</span><br/><span>3</span><span>4</span><br /><span>5</span><span>6</span><br /><span>7</span><span>8</span><br /><span>9</span><span>0</span><br /><div id="ws_tiao">To</div><div style="height:10px;background-color:#4cff00;width:0px;display:none;"></div>@if(pi<mcount){<div id="wp_next" οnclick="Javascript:location.href='/Wall/WallNote?height=@clientY&width=@clientX&pi=@(pi+1)'">下一批</div>}共<font>@pi/<a href="/Wall/WallNote?height=@clientY&width=@clientX&pi=@mcount">@mcount</a>页</font><br/><br/>
这个写起来也不麻烦,就不上全部代码了。