- $.fn.bootstrapPaginator.Constructor = BootstrapPaginator
我们在看JS插件的时候经常看到这样的,这个其实就是将这个类的放值在我们的JQuery的全局空间里面去。
var BootstrapPaginator = function (element, options) {
this.init(element, options)
}
我们书写的时候基本上都是选择元素id之后再执行函数就好了….. 一直搞不懂,没有自己写过插件~~太菜
$('#pagination').bootstrapPaginator(options);
我使用浏览器进入进来的时候,发现了
$ 中的变量的值,传入到了我们的elements中去了,options中的值,是我们配置的信息的!这个传递参数,估计是JQuery内部定好的信息把!这个可是我们如果想写插件的第一步。
- 我们进入的过程
这里调用我们的够造函数,进入之前我们看到的够造函数的信息。这里我们可以看到我们的Js之中的原型模式,节约空间,复用内存!进入
$('#pagination').bootstrapPaginator(options);
之前看过的高级程序设计JavaScript中有过这些的介绍,里面讲的非常的丰富,一本非常好的教程,需要细细的品味
BootstrapPaginator.prototype ={
这里就是我们的原型方法,使用对象的Init方法进行初始化工作
}
- 这里使用了一个插件中经常使用的方法,我们还是有必要知道一下
extend 方法进行一些默认函数配置的配置,有些进行一些简单的替换一下而已!
extend(dest,src1,src2,src3...); 将src1 src2 src3
它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构,可以如下使用:
var newSrc=$.extend({},src1,src2,src3...)
//也就是将"{}"作为dest参数。
二、省略dest参数
$.extend(src)
该方法就是将src合并到jquery的全局对象中去,如:
$.extend({
hello:function(){alert('hello');}
});
就是将hello方法合并到jquery的全局对象中。
这是在jquery全局对象中扩展一个net命名空间。
$.extend($.net,{
hello:function(){alert('hello');}
})
三、Jquery的extend方法还有一个重载原型:
extend(boolean,dest,src1,src2,src3...)
第一个参数boolean代表是否进行深度拷贝,其余参数和前面介绍的一致,什么叫深层拷贝,我们看一个例子:
var result=$.extend( true, {},
{ name: "John", location: {city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} } );
我们可以看出src1中嵌套子对象location:{city:"Boston"},src2中也嵌套子对象location:{state:"MA"},第一个深度拷贝参数为true,那么合并后的结果就是:
result={name:"John",last:"Resig",
location:{city:"Boston",state:"MA",county:"China"}}
也就是说它会将src中的嵌套子对象也进行合并,而如果第一个参数boolean为false,我们看看合并的结果是什么,如下:
result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}
也就是说,只要后面的location不会空就直接的覆盖了,不管内部的信息是怎么样处理的!
http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html 参考网址!
看看我们的插件中的调用更是厉害,不但设置了基本的配置信息,而且还对页面进行了渲染之内的工作
this.options = $.extend(
{},
this.options ||
$.fn.bootstrapPaginator.defaults, options),
this.totalPages = parseInt(this.options.totalPages, 10),
this.numberOfPages = parseInt(this.options.numberOfPages, 10),
options &&
"undefined" != typeof options.currentPage
&&
this.setCurrentPage(options.currentPage),
this.listen(),
this.render(),
this.initialized || this.lastPage === this.currentPage
||
this.$element.trigger("page-changed", [this.lastPage, this.currentPage])
},
init方法初始化,构造函数当即执行该方法,该方法内部调用setOptions调用配置项;
setOptions设置配置项,调用listen方法绑定事件、render方法渲染页面;
下面的这个是默认的配置,我们可以去覆盖这些属性!
$.fn.bootstrapPaginator.defaults = {
containerClass: "",
size: "normal",
alignment: "left",
bootstrapMajorVersion: 2,
listContainerClass: "",
itemContainerClass: function (type, page, current) {
return page === current ? "active" : ""
},
itemContentClass: function (type, page, current) {
return ""
},
currentPage: 1,
numberOfPages: 5,
totalPages: 1,
pageUrl: function (type, page, current) {
return null
},
onPageClicked: null,
onPageChanged: null,
useBootstrapTooltip: !1,
shouldShowPage: function (type, page, current) {
var result = !0;
switch (type) {
case"first":
result = 1 !== current;
break;
case"prev":
result = 1 !== current;
break;
case"next":
result = current !== this.totalPages;
break;
case"last":
result = current !== this.totalPages;
break;
case"page":
result = !0
}
return result
},
itemTexts: function (type, page, current) {
switch (type) {
case"first":
return "<<";
case"prev":
return "<";
case"next":
return ">";
case"last":
return ">>";
case"page":
return page
}
}
http://www.frontopen.com/846.html 这里有$.trigger 模拟点击事件,然后还可以传递参数,这个是它的优势所在!
这里初始化完了这个页面,我们就要模拟一下点击了第一个界面的效果是什么涩~!
- 我们再看看监听事件是怎么做的,做了什么?
off() 方法通常用于移除通过 on() 方法添加的事件处理程序。
自 jQuery 版本 1.7 起,off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。
注意:如需移除指定的事件处理程序,当事件处理程序被添加时,选择器字符串必须匹配 on() 方法传递的参数。
提示:如需添加只运行一次的事件然后移除,请使用 one() 方法。
这个下面我们自己定义了的通过bind绑定的事件内心以及对应的函数,看一下是否外界定义了这样的函数类型,然后删除之前已经存在的函数!
listen: function () {
this.$element.off("page-clicked"),
this.$element.off("page-changed"),
"function" == typeof this.options.onPageClicked
&& this.$element.bind("page-clicked", this.options.onPageClicked),
"function" == typeof this.options.onPageChanged &&
this.$element.on("page-changed", this.options.onPageChanged),
this.$element.bind("page-clicked", this.onPageClicked)
}
- 处理完事件的监听,我们开始渲染我们的界面。这里面就比较的复杂了….
render方法创建包裹元素ul,设置尺寸、对齐方式,调用builPageItem方法判断前一页、后一页、首页、尾页、页码的显示情况,创建对应li及a子元素;
buildPageItem方法创建li、a子元素,添加li、a的文本内容、提示层,a元素中绑定BootstrapPaginator类的onPageItemClicked方法,以此改变页面样式,或者通过跳链接的方式实现页面内容的切换,替代前后台数据交互;
对于界面上要怎么展示好看,这个得看你怎么去展示了………
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ include file="./common/common.jsp"%>
<script src="<%=baseUrl%>/libs/bootstrap-paginator/bootstrap-paginator.js"></script>
<div class="container">
<ul id="list">
</ul>
<ul id="pagination"></ul>
</div>
<script>
jQuery(document).ready(function() {
$.ajax({
url: basePath+"/dictionary/findPage",
data:{
pageSize:2,
pageNo:1
},
type: "Post",
success: function (data) {
if (data != null) {
var Rows = data.data.rows;
$("#list").append('<table>');
$.each(Rows, function (index, item) { //遍历返回的json
$("#list").append('<tr class="col-sm-12">');
$("#list").append('<td>' + item.id + '</td>');
$("#list").append('<td>' + item.name + '</td>');
$("#list").append('<td>备注</td>');
$("#list").append('<td>');
$("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">修改</button>');
$("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">删除</button>');
$("#list").append('</td>');
$("#list").append('</tr>');
});
$("#list").append('</table>');
var pageCount = data.data.totalPage; //取到pageCount的值(把返回数据转成object类型)
var currentPage =data.data.page //得到urrentPage
var options = {
bootstrapMajorVersion: 3, //版本
currentPage: currentPage, //当前页数
totalPages: pageCount, //总页数
itemTexts: function (type, page, current) {
switch (type) {
case "first":
return "首页";
case "prev":
return "上一页";
case "next":
return "下一页";
case "last":
return "末页";
case "page":
return page;
}
},//点击事件,用于通过Ajax来刷新整个list列表
onPageClicked: function (event, originalEvent, type, page) {
$.ajax({
url: basePath+"/dictionary/findPage",
type: "Post",
data: {
pageSize:2,
pageNo:page
},
success: function (dataAll) {
alert(111);
var rows = dataAll.data.rows;
$("#list").html("");
if (rows != null) {
$.each(rows, function (index, item) { //遍历返回的json
$("#list").append('<table width="100%">');
$("#list").append('<tr class="col-sm-12" >');
$("#list").append('<td>' + item.id + '</td>');
$("#list").append('<td>' + item.name + '</td>');
$("#list").append('<td>备注</td>');
$("#list").append('<td>');
$("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">修改</button>');
$("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">删除</button>');
$("#list").append('</td>');
$("#list").append('</tr>');
$("#list").append('</table>');
});
}
}
});
}
};
$('#pagination').bootstrapPaginator(options);
}
}
});
});
</script>