jQuery分页弹出层式选择器
分页选择器的弹出层设计,用 jQuery 做起来还是挺顺手的。不是那种常规的页码导航,而是点击一下像下拉框那样弹出一个层,里面是页码,点了就切页。UI 清爽,操作也直观,比较适合那种数据量不小但又不想一下子铺满整页的场景。像后台表格、评论列表这种地方就挺合适的。
分页弹出层的核心是用jQuery动态生成页码,配合 要是你不想一次把所有数据塞出来,可以用Ajax异步拉数据,点了页码之后再加载。用 UI 这块,弹出层其实可以稍微美化一下,像给 如果你在做那种分页又不想太跳页面的场景,可以试试这个思路。用 jQuery 写起来比较轻松,逻辑也不复杂。想要再酷一点的 UI?你也可以参考这两个插件,select 美化和左右切换选择器,结合一下搞出点新玩法也不错。.click()
和.show()
/.hide()
控制弹出行为。基础结构你可以用个作为触发器,再配一个
.page-layer
的弹出层。选中页码之后再更新内容就行。
$.ajax()
或者.load()
都可以,响应也快,用户体验还不错。还可以加点小细节,比如预加载前后页的内容、记住当前页状态啥的,效果会更顺滑。box-shadow
、border-radius
、加个小三角箭头啥的,整体看起来会更像个下拉选择器,用户一看就懂。样式你可以丢进个texiao909_1560680931
文件里统一管理,省得散着写不好维护。
下载地址
用户评论