分页插件
// JavaScript Document
//判断浏览器
window.browserInfo = {
ie: !-[1, ],
ieAll: /MSIE \d/.test(navigator.userAgent),
FF: !!navigator.userAgent.match(/firefox/i),
webkit: /WebKit\//.test(navigator.userAgent),
chrome: /Chrome\//.test(navigator.userAgent),
opera: /Opera\//.test(navigator.userAgent),
safari: /Apple Computer/.test(navigator.vendor),
mac_geLion: /Mac OS X 1\d\D([7-9]|\d\d)\D/.test(navigator.userAgent),
mac_geMountainLion: /Mac OS X 1\d\D([8-9]|\d\d)\D/.test(navigator.userAgent),
ios: /AppleWebKit/.test(navigator.userAgent) && /Mobile\/\w+/.test(navigator.userAgent),
mobile: this.ios || /Android|webOS|BlackBerry|Opera Mini|Opera Mobi|IEMobile/i.test(navigator.userAgent),
PC: !this.mobile,
mac: this.ios || /Mac/.test(navigator.platform),
windows: /windows/i.test(navigator.platform),
};
//节点加载完事件
$.fn.myinit = function(Fn) {
Fn.apply(this);
return this;
};
//input的val改变事件$('.text').input(function() {this})可以on绑定;
$.fn.input = function(Fn) {
if(window.browserInfo.ie) {
$(this).on('propertychange', function() {
Fn.apply(this);
})
} else {
$(this).on('input', function() {
Fn.apply(this);
})
}
};
//滚轮滚动事件$(document).mousewheel(function() {this.Down})可以on绑定;
$.fn.mousewheel = function(Fn) {
if(window.browserInfo.FF) {
$(this).on('DOMMouseScroll', function(ev) {
var oEvent = ev || event;
this.Down = (oEvent.originalEvent.detail > 0);
Fn.apply(this);
})
} else {
$(this).on('mousewheel', function(ev) {
var oEvent = ev || event;
this.Down = (oEvent.originalEvent.wheelDelta < 0);
Fn.apply(this);
})
}
};
//拖拽事件$('.move').move(function() { $(this).css({ 'left': '+=' + this.pageXc, 'top': '+=' + this.pageYc }); });
$.fn.move = function(Fn) {
$(this).on('mousedown', function(ev) {
this.pageXc = this.pageYc = 0;
var _this = this,
pvrPageX = ev.pageX,
pvrPageY = ev.pageY;
$(document).on('mousemove.thisMove', function(ev) {
ev.preventDefault();
_this.pageXc = ev.pageX - pvrPageX;
_this.pageYc = ev.pageY - pvrPageY;
Fn.apply(_this);
pvrPageX = ev.pageX;
pvrPageY = ev.pageY;
});
$(document).on('mouseup.thisMove', function(ev) {
$(this).off('mousemove.thisMove mouseup.thisMove');
});
//$(this).on('dragend', function(ev) {
// setTimeout(function() {
// $(document).mouseup();
// }, 10);
//});
});
};
//模拟input滑块事件$('#range .mea').move(rangeFn);
var rangeFn = function() {
var _thisParent = $(this).parent();
var _thisParentLeftMin = 0;
var _thisParentLeftMax = _thisParent.width();
var _thisStep = (_thisParentLeftMax - _thisParentLeftMin) * _thisParent.attr('step') / (_thisParent.attr('max') - _thisParent.attr('min'));
var _thisLeft = parseFloat($(this).css('left')) + this.pageXc;
if(_thisLeft >= _thisParentLeftMin && _thisLeft <= _thisParentLeftMax) {
$(this).css({
'left': _thisLeft,
});
$(this).attr('value', Math.round(_thisLeft / _thisStep) * _thisParent.attr('step'));
};
};
//模拟滚动条
var slimScrollFn = function() {
$('.MScroll').each(function() {
var _this = $(this);
_this.removeClass('MScroll');
_this.slimScroll({
height: _this.height(),
allowPageScroll: true,
disableFadeOut: true,
railVisible: true,
});
});
};
//模拟下拉框
var Mchecked = function() {
$(document).on('click', '.Mchecked', function() {
var _this = $(this);
_this.toggleClass('McheckedOn');
_this.siblings('.slimScrollDiv,.MScroll').slideToggle();
});
$(document).on('click', '.Moption', function() {
var _this = $(this);
var _parents = _this.parents('.Mselect');
_parents.children('.slimScrollDiv,.MScroll').slideUp();
_parents.children('.Mchecked').html(_this.html()).removeClass('McheckedOn');
_parents.children('input').val(_this.attr('value')).trigger("change");
});
$(document).on('mouseleave', '.Mselect', function() {
var _this = $(this);
_this.children('.slimScrollDiv,.MScroll').slideUp();
_this.children('.Mchecked').removeClass('McheckedOn');
});
};
/*! layPage-v1.3.0 分页组件 License MIT http://laypage.layui.com/*/
//分页PageFn('Mpage1','hrefPage');
var PageFn = function(opage, hrefPage) {
var MPage = $(opage);
var thisPages = MPage.attr('data-pages');
//分页主体插件调用
laypage({
cont: MPage,
pages: thisPages, //可以叫服务端把总页数放在某一个隐藏域,再获取。假设我们获取到的是18
skip: true, //是否开启跳页
last: thisPages, //用于控制尾页
prev: '上一页', //隐藏上一页按钮
next: '下一页', //隐藏下一页按钮
groups: 7, //连续显示分页数
curr: function() {
//通过url获取当前页,也可以同上(pages)方式获取
var str = "/" + hrefPage + "=(\\d+)/";
var reg = eval(str);
var page = location.search.match(reg);
return page ? page[1] : 1;
}(),
jump: function(e, first) { //触发分页后的回调
if(!first) { //一定要加此判断,否则初始时会无限刷新
var search = location.search;
var str = "/" + hrefPage + "=(\\d+)/";
var reg = eval(str);
var page = location.search.match(reg);
if(page) {
search = search.replace(reg, hrefPage + '=' + e.curr);
} else if(!search) {
search = search + '?' + hrefPage + '=' + e.curr;
} else {
search = search + '&' + hrefPage + '=' + e.curr;
}
location.href = search;
}
}
});
MPage.find('.laypage_skip').attr({
'max': thisPages,
'type': 'text'
});
//分页页码不存在时弹层
MPage.find('.laypage_skip').on('keyup', function() {
if(parseFloat(this.value) > parseFloat(this.max) || parseFloat(this.value) < parseFloat(this.min)) {
alert('页码不存在!');
this.value = this.min;
}
});
};
var PageFnAjax = function(opage, ObjFn) {
var MPage = $(opage);
var thisPages = MPage.attr('data-pages');
//分页主体插件调用
laypage({
cont: MPage,
pages: thisPages, //可以叫服务端把总页数放在某一个隐藏域,再获取。假设我们获取到的是18
skip: true, //是否开启跳页
last: thisPages, //用于控制尾页
prev: '上一页', //隐藏上一页按钮
next: '下一页', //隐藏下一页按钮
groups: 7, //连续显示分页数
curr: function() {
return MPage.attr('data-curr') ? MPage.attr('data-curr') : 1;
}(),
jump: function(e, first) { //触发分页后的回调
if(!first) { //一定要加此判断,否则初始时会无限刷新
MPage.attr('data-curr', e.curr);
ObjFn();
MPage.find('.laypage_skip').attr({
'max': thisPages,
'type': 'text'
});
}
}
});
MPage.find('.laypage_skip').attr({
'max': thisPages,
'type': 'text'
});
//分页页码不存在时弹层
MPage.find('.laypage_skip').on('keyup', function() {
if(parseFloat(this.value) > parseFloat(this.max) || parseFloat(this.value) < parseFloat(this.min)) {
alert('页码不存在!');
this.value = this.min;
}
});
};
//var ev=ev||event;ev.preventDefault();window.event.returnValue=false; return false;
$(function() {
//可聚焦元素
$('.canFocus').attr({
"tabindex": "0",
"hidefocus": "true"
});
//模拟滚动条调用
if(!window.browserInfo.webkit) {
slimScrollFn();
}
if(!window.browserInfo.webkit) {
$(document).on('DOMNodeInserted', function(ev) {
slimScrollFn();
});
}
//模拟下拉框调用
Mchecked();
});
分页插件源码
/*! layPage-v1.3.0 分页组件 License MIT http://laypage.layui.com/ By 贤心 */
! function() {
"use strict";
function a(d) {
var e = "laypagecss";
a.dir = "dir" in a ? a.dir : f.getpath + "/skin/laypage.css", new f(d), a.dir && !b[c](e) && f.use(a.dir, e)
}
a.v = "1.3";
var b = document,
c = "getElementById",
d = "getElementsByTagName",
e = 0,
f = function(a) {
var b = this,
c = b.config = a || {};
c.item = e++, b.render(!0)
};
f.on = function(a, b, c) {
return a.attachEvent ? a.attachEvent("on" + b, function() {
c.call(a, window.even)
}) : a.addEventListener(b, c, !1), f
}, f.getpath = function() {
var a = document.scripts,
b = a[a.length - 1].src;
return b.substring(0, b.lastIndexOf("/") + 1)
}(), f.use = function(c, e) {}, f.prototype.type = function() {
var a = this.config;
return "object" == typeof a.cont ? void 0 === a.cont.length ? 2 : 3 : void 0
}, f.prototype.view = function() {
var b = this,
c = b.config,
d = [],
e = {};
if(c.pages = 0 | c.pages, c.curr = 0 | c.curr || 1, c.groups = "groups" in c ? 0 | c.groups : 5, c.first = "first" in c ? c.first : "首页", c.last = "last" in c ? c.last : "尾页", c.prev = "prev" in c ? c.prev : "上一页", c.next = "next" in c ? c.next : "下一页", c.pages <= 1) {
return ""
}
for(c.groups > c.pages && (c.groups = c.pages), e.index = Math.ceil((c.curr + (c.groups > 1 && c.groups !== c.pages ? 1 : 0)) / (0 === c.groups ? 1 : c.groups)), c.curr > 1 && c.prev && d.push('<a href="javascript:;" class="laypage_prev" data-page="' + (c.curr - 1) + '">' + c.prev + "</a>"), e.index > 1 && c.first && 0 !== c.groups && d.push('<a href="javascript:;" class="laypage_first" data-page="1" title="首页">' + c.first + "</a><span>…</span>"), e.poor = Math.floor((c.groups - 1) / 2), e.start = e.index > 1 ? c.curr - e.poor : 1, e.end = e.index > 1 ? function() {
var a = c.curr + (c.groups - e.poor - 1);
return a > c.pages ? c.pages : a
}() : c.groups, e.end - e.start < c.groups - 1 && (e.start = e.end - c.groups + 1); e.start <= e.end; e.start++) {
e.start === c.curr ? d.push('<span class="laypage_curr" ' + (/^#/.test(c.skin) ? 'style="background-color:' + c.skin + '"' : "") + ">" + e.start + "</span>") : d.push('<a href="javascript:;" data-page="' + e.start + '">' + e.start + "</a>")
}
return c.pages > c.groups && e.end < c.pages && c.last && 0 !== c.groups && d.push('<span>…</span><a href="javascript:;" class="laypage_last" title="尾页" data-page="' + c.pages + '">' + c.last + "</a>"), e.flow = !c.prev && 0 === c.groups, (c.curr !== c.pages && c.next || e.flow) && d.push(function() {
return e.flow && c.curr === c.pages ? '<span class="page_nomore" title="已没有更多">' + c.next + "</span>" : '<a href="javascript:;" class="laypage_next" data-page="' + (c.curr + 1) + '">' + c.next + "</a>"
}()), '<div name="laypage' + a.v + '" class="laypage_main laypageskin_' + (c.skin ? function(a) {
return /^#/.test(a) ? "molv" : a
}(c.skin) : "default") + '" id="laypage_' + b.config.item + '">' + d.join("") + function() {
return c.skip ? '<span class="laypage_total"><label>跳转到:</label><input type="number" min="1" onkeyup="this.value=this.value.replace(/\\D/, \'\');" class="laypage_skip"><label> </label><button type="button" class="laypage_btn">Go</button></span>' : ""
}() + "</div>"
}, f.prototype.jump = function(a) {
if(a) {
for(var b = this, c = b.config, e = a.children, g = a[d]("button")[0], h = a[d]("input")[0], i = 0, j = e.length; j > i; i += 1) {
"a" === e[i].nodeName.toLowerCase() && f.on(e[i], "click", function() {
var a = 0 | this.getAttribute("data-page");
c.curr = a, b.render()
})
}
g && f.on(g, "click", function() {
var a = 0 | h.value.replace(/\s|\D/g, "");
a && a <= c.pages && (c.curr = a, b.render())
})
}
}, f.prototype.render = function(a) {
var d = this,
e = d.config,
f = d.type(),
g = d.view();
2 === f ? e.cont.innerHTML = g : 3 === f ? e.cont.html(g) : b[c](e.cont).innerHTML = g, e.jump && e.jump(e, a), d.jump(b[c]("laypage_" + e.item)), e.hash && !a && (location.hash = "!" + e.hash + "=" + e.curr)
}, "function" == typeof define ? define(function() {
return a
}) : "undefined" != typeof exports ? module.exports = a : window.laypage = a
}();
应用插件做分页
var PortAddress = "http://r.n.cc"; //端口地址
var tempList = {
pageTempNum: 12, //保存一屏模板数量
pageTotalNum: 1, //保存模板count总数
currPage: 1, //保存当前页码数
totalPages: 1, //保存翻页总数
currTempType: null, //保存当前模板类型
getTempClassify: function() { //渲染模板分类
$.ajax({
type: "post",
url: "/i/t",
data: {},
success: function(res) {
if(res.error == 0) {
var data = res.invitationTempletTyp;
var html = '';
if(data) {
for(var i = 0; i < data.length; i++) {
html += '<li data-id="' + data[i].id + '">';
html += '<span>' + data[i].name + '</span>';
html += '</li>';
}
}
$('.TempNav').append(html);
} else {
alert('网络故障,请稍后重试!');
}
}
});
},
initTempList: function(type) { //根据模板类型初始化模板列表
var pageNum = this.pageTempNum;
this.changePage(type, pageNum, 1);
},
changePage: function(type, pageSize, currPage) { //跳转页面
$.ajax({
type: "post",
url: "/i/t",
data: {
code: type,
pageSize: pageSize,
currentPage: currPage
},
success: function(res) {
if(res.error == 0) {
this.currPage = currPage;
this.pageTotalNum = res.count;
var pageNum = Math.ceil(res.count / pageSize);
$('#Mpage1').attr({
'data-pages': pageNum,
'data-curr': currPage
});
PageFnAjax('#Mpage1', function() {
var newCurrNum = $('#Mpage1').attr('data-curr');
this.currPage = newCurrNum;
tempList.changePage(type, pageSize, newCurrNum);
});
var html = '';
var price,
userCount;
console.log('当页数量:' + res.data.length,'返回数据总数:' + res.count);
var data = res.data;
if(data.length != 0) {
$('.blankImg').hide();
for(var i = 0; i < data.length; i++) {
price = data[i].free == 0 ? '免费' : data[i].price;
userCount = data[i].userCount == null ? 0 : data[i].userCount;
html += ' <li>';
html += ' <div>';
html += ' <img class="tempPoster" src="' + data[i].image_path + '" alt="">';
html += ' <div class="infoTop">';
html += ' <p class="infoTitle textOverflow">' + data[i].title + '</p>';
html += ' <p class="infoPrice">' + price + '</p>';
html += ' </div>';
html += ' <div class="infoBtm">';
html += ' <a href="/i/b?Id=' + data[i].id + '" class="btnBuild">制作</a>';
html += ' <div class="infoType">';
html += ' <p>类型:' + data[i].kind_name + '</p>';
html += ' <p>人气:' + userCount + '</p>';
html += ' </div>';
html += ' </div>';
html += ' </div>';
html += ' </li>';
}
}else{
$('.blankImg').show();
}
$('.TempList').html(html);
}
}
});
}.bind(this),
pageInit: function() { //整体页面初始化
this.getTempClassify();
this.initTempList();
},
startBuild: function(id){ //点击开始制作
var url = '';
window.location.href = url + '?templetId=' + id;
}
}
tempList.pageInit();
$(function(){
//点击模板分类
$('.TempNav').on('click','li',function(){
var that = this;
var id;
$(that).addClass('active').siblings().removeClass('active');
if($(that).index() == 0){
tempList.initTempList();
}else{
id = parseInt($(that).attr('data-id'));
tempList.initTempList(id);
}
});
})