这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了原生 javascript 实现分页效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
随着近几年前端行业的迅猛发展,各种层出不穷的新框架,新方法让我们有点眼花缭乱。
最近刚好比较清闲,所以没事准备撸撸前端的根基 javascript, 纯属练练手,写个分页,顺便跟大家分享一下
- function pageFunc(conf){
- this.myFunc = conf.click //用户点击要执行的方法
- this.total = conf.total; //总页数
- this.currentPage = 1; //当前页码
- this.init() //初始化
- }
- pageFunc.prototype.init = function(){
- var total = this.total,
- currentPage = this.currentPage,
- _this = this;
- listeners = {
- 'setWhat' : function(opts) {
- _this.aClick(opts.src)
- return false;
- }
- };
- listenersPre = {
- 'lmw-pre' : function(opts) {
- _this.prevClick()
- return false;
- }
- };
- listenersAdd = {
- 'lmw-add' : function(opts) {
- _this.addClick()
- return false;
- }
- };
- var rootele = this.createPage(1,total);
- document.getElementById('page-coat').innerhtml = rootele
- $on(document.getElementById('page-coat'), ['click'], listeners);//点击a标签
- $on(document.getElementById('page-coat'), ['click'], listenersPre);//点击上一页
- $on(document.getElementById('page-coat'), ['click'], listenersAdd);//点击下一页
- }
- //创建HTML分页结构字符串
- pageFunc.prototype.createPage = function(page,total){
- var str = `<a class="lmw-current" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >${page}</a>`
- for(var i=1;i<=3;i++){
- if(page-i>1){
- str = `<a attr-action="setWhat" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >${page-i}</a>`+str
- }
- if(page+i<total){
- str = str+`<a attr-action="setWhat" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >${(page+i)}</a>`
- }
- };
- if(page-4>1){
- str = '<span>...</span>'+str
- };
- if(page+4<total){
- str = str+'<span>...</span>'
- };
- if(page>1){
- str = `<a class="lmw-pre" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上一页</a><a attr-action="setWhat" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a>`+str
- };
- if(page<total){
- str = str+`<a attr-action="setWhat" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >${total}</a><a class="lmw-add" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一页</a>`
- };
- return str
- }
- //上一页方法
- pageFunc.prototype.prevClick = function(){
- var total = this.total
- var va = --this.currentPage
- var newret = this.createPage(va, total)
- document.getElementById('page-coat').innerHTML = newret
- this.myFunc(va)
- }
- //下一页方法
- pageFunc.prototype.addClick = function(){
- var total = this.total
- var va = ++this.currentPage
- var newret = this.createPage(va, total)
- document.getElementById('page-coat').innerHTML = newret
- this.myFunc(va)
- };
- //点击方法
- pageFunc.prototype.aClick = function(_this){
- var total = this.total
- var va = parseInt(_this.innerText);
- this.currentPage = va
- var rootele = this.createPage(va, total)
- document.getElementById('page-coat').innerHTML = rootele
- this.myFunc(va)
- };
- //二:封装事件代理方法
- function $on(dom, event, listeners) {
- $addEvent(dom, event, function(e) {
- var e = e || window.event,
- src = e.target || e.srcElement,
- action,
- returnVal;
- while (src && src !== dom) {
- action = src.getAttribute('attr-action') || src.getAttribute('class') ;
- if (listeners[action]) {
- returnVal = listeners[action]({
- src : src,
- e : e,
- action : action
- });
- if (returnVal === false) {
- break;
- }
- }
- src = src.parentNode;
- }
- });
- };
- //1、封装跨浏览器事件绑定方法
- function $addEvent(obj, type, handle) {
- if(!obj || !type || !handle) {
- return;
- }
- if( obj instanceof Array) {
- for(var i = 0, l = obj.length; i < l; i++) {
- $addEvent(obj[i], type, handle);
- }
- return;
- }
- if( type instanceof Array) {
- for(var i = 0, l = type.length; i < l; i++) {
- $addEvent(obj, type[i], handle);
- }
- return;
- }
- //2、解决IE中this指向window的问题
- function createDelegate(handle, context) {
- return function() {
- return handle.apply(context, arguments);
- };
- }
- if(window.addEventListener) {
- var wrapper = createDelegate(handle, obj);
- obj.addEventListener(type, wrapper, false);
- }
- else if(window.attachEvent) {
- var wrapper = createDelegate(handle, obj);
- obj.attachEvent("on" + type, wrapper);
- }
- else {
- obj["on" + type] = handle;
- }
- };
使用方法:
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>分页效果</title>
- <style type="text/CSS">
- #page-coat a{
- text-decoration:none;
- display: inline;
- float: left;
- padding: 3px 10px 3px 10px;
- overflow: hidden;
- border:1px solid #ccc;
- color:#999;
- margin-right: 5px;
- cursor: pointer;
- background: #fff;
- }
- #page-coat a:hover{
- border: 1px solid #FF6600;
- background-color: #FF6600;
- color: #fff;
- }
- #page-coat span{
- display: inline;
- float: left;
- color:#999;
- background: #fff;
- }
- #page-coat a.lmw-current{
- color: #FF6600;
- border: 1px solid #FF6600;
- background-color: #FFEEE5;
- }
- </style>
- </head>
- <body class="l-bg2">
- <div id="page-coat">
- </div>
- </body>
- <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
- <script type="text/javascript" src="js/public.js"></script>
- <script type="text/javascript">
- var conf = {
- 'total':100,
- 'click':function(e){ //e为当前页码
- /* $.get('/php',{"page":e},function(data){
- console.log('ok')
- })*/
- }
- }
- var page = new pageFunc(conf);
- </script>
- </html>
用原生还是比较麻烦的,为了实现业务,还得去封装一个模仿 JQ 的. on 事件绑定方法。写的比较简陋,一些配置接口没有暴露出来,还可以再抽象暴露。
来源: http://www.phperz.com/article/17/0511/333914.html