这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了 js CSS 自定义分页效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
网上看了好多分页插件都不太满意,所以根据网上的一些东西自己做了一个,可以搭配 mvc 和数据库
效果图片
先来 css(样式不喜欢的话可以不用这个)
- .pagelist {
- padding: 10px 0;
- text - align: center;
- }.pagelist span,
- .pagelist a {
- border - radius: 3px;
- border: 1px solid#dfdfdf;
- display: inline - block;
- padding: 5px 12px;
- }.pagelist a {
- margin: 0 3px;
- }.pagelist span.current {
- background: #09F;
- color: #FFF;
- border - color: #09F;
- margin: 0 2px;
- }.pagelist a: hover {
- background: #09F;
- color: #FFF;
- border - color: #09F;
- }.pagelist label {
- padding - left: 15px;
- color: #999;
- }.pagelist label b {
- color: red;
- font - weight: normal;
- margin: 0 3px;
- }.popup {
- display: none;
- list - style - type: none;
- overflow: hidden;
- position: absolute;
- }
- /*显示弹出菜单*/
- .popupmenu li: hover ul {
- display: block;
- z - index: 2;
- /*left:840px;*/
- }.popupmenu li ul: hover {
- display: block;
- z - index: 2;
- /*left:840px;*/
- }
html 需要引用 jquary
- <div class="pagelist" style="margin-top:500px">
- <ul class="popupmenu">
- <li>
- <a href="p.url?page=1" rel="external nofollow">
- 首页
- </a>
- <a href="p.url?page=p.up" rel="external nofollow">
- 上一页
- </a>
- <a id="pop" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow"
- onclick="popup()">
- 1/2
- </a>
- <ul id="popup" class="popup">
- <li>
- <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow">
- 1/2
- </a>
- </li>
- <li>
- <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow">
- 2/2
- </a>
- </li>
- </ul>
- <a href="p.url?page=p.next" rel="external nofollow">
- 下一页
- </a>
- <a href="p.url?page=p.sum" rel="external nofollow">
- 尾页
- </a>
- </li>
- </ul>
- </div>
js
- <script type="text/javascript">
- // 获取id为pop的元素的位置
- var popX = $('#pop').offset().left;
- // alert($('#pop').height());
- var popY = $('#pop').offset().top;
- var lineheight = $('#pop').height();
- var linumber = $('#popup li').length;
- // alert(lineheight);
- // 设置id为popup元素的位置
- $("#popup").css({
- "position": "fixed",
- "top": (popY - (linumber * 27.5)) + "px",
- "left": (popX - 23) + "px",
- "line-height": lineheight + "px"
- });
- </script>
分页的类
- public partial class page {
- // 当前页
- public int pagenow {
- get;
- set;
- }
- // 总页数
- public int sum {
- get;
- set;
- }
- // 地址
- public string url {
- get;
- set;
- }
- // 上一页
- public int up {
- get;
- set;
- }
- // 下一页
- public int next {
- get;
- set;
- }
- }
想要使用的话,在控制器获取数据,替换掉 html 上的相应位置就行了。
来源: http://www.phperz.com/article/17/0703/327305.html