jQuery 插件写作实例一 pagination

这次根据设计做一个分页的插件。

分页栏的UI设计如图：

步骤:

1、写界面的HTML实现

2、鼠标的视觉效果

3、动作、事件

4、转作js生成

步骤一：

方便使用与嵌入任何位置，使用div做容器，分页栏也属于列表的结构，主体使用li来实现。

	<div class="pagination">
		<ul>
			<li><a>«</a></li>
			<li><a>1</a></li>
			<li><a>2</a></li>
			<li><a>3</a></li>
			<li><a>4</a></li>
			<li><a>5</a></li>
			<li><a>»</a></li>
		</ul>
	</div>

初步实现css

	.pagination{
		border:0px solid black;
		display:inline-block;
		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
		font-size:14px;
		
	}
	.pagination ul{
		border:0px solid red;
		display:inline-block;
		margin:0px;
		list-style:none;
		padding:0px;
	}
	.pagination ul li{
		border:0px solid green;
		display:inline;
		line-height:20px;
	}
	.pagination ul li a{
		padding: 4px 12px;
		line-height: 20px;
		background-color: #1d1d1d;
		text-decoration: none;
		color: #fff;
		float: left;
		margin: 0px 5px;
		border-radius: 4px;
		cursor: pointer;
	}

效果如图：

步骤二：

添加鼠标hover的效果：

        .pagination ul li a:hover{
		background-color: #d3d3d3;
		color:#1d1d1d;
	}

效果如图：

接着实现current和disabled，完整css如下：

	.pagination ul li a:hover,
	.pagination .current a,
	.pagination .current a:hover{
		background-color: #d3d3d3;
		color:#1d1d1d;
	}
	.pagination .disabled a,
	.pagination .disabled a:hover{
		cursor: default;
		background-image: none;
		opacity: .65;
		filter: alpha(opacity=65);
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		background-color:#1d1d1d;
		color: #fff;
	}

步骤三：

分页栏的每个按钮，设置onclick事件：

function(pageIndex_){...}

输入参数为选择的页码，中间处理过程交给用户自定义，一般写跳转如：

window.location.href = '...' + pageIndex_;

步骤四：

着手编码插件，步骤有4：

1、定义输入、默认值

2、处理输入、生成代码执行所需参数

3、生成html元素

4、绑定事件

5、打包

第一步，定义输入、默认值：

当前页码(index)、总页数(total)、显示的页码数(displayNum)、点击分页栏触发的事件接口(onChange)

	jQuery.fn.pagination = function(settings_){
		var _defaults = {
			index:1,
			total:0,
			displayNum:5,
			onChange:null
		};

		var _settings = $.extend({}, _defaults, settings_);

               //...
        }

第二步，处理输入、生成代码执行所需参数。

		if(_settings.total <= 0) {return;}
		if(_settings.index > _settings.total) {return;}

		var _startIndex = parseInt((_settings.index - 1) / _settings.displayNum) * _settings.displayNum + 1;
		var _endIndex = _startIndex + _settings.displayNum - 1;
		if(_endIndex > _settings.total) {_endIndex = _settings.total;}
		if(typeof(_settings.onChange) != 'function'){
			_settings.onChange = function(pageIndex_){}
		}

_startIndex: 页码起算位置

_endIndex：页码截止位置

第三步，生成html元素，按照html写js：

		var obj = this;
		obj.attr('class', 'pagination');

		var oUl = $('<ul></ul>');
		var oBtnPrev = $('<li><a class="btn-prev">«</a></li>');
		var oBtnNext = $('<li><a>»</a></li>');
		oUl.append(oBtnPrev);
		for(var i=_startIndex; i<=_endIndex; i++){
			var oLi = $('<li><a>' + i + '</a></li>');
			oUl.append(oLi);
			if(i == _settings.index) {oLi.addClass('current');continue;}
		}
		oUl.append(oBtnNext);
		obj.append(oUl);

		if(_settings.index == 1){
			oBtnPrev.addClass('disabled');
		}
		if(_settings.index >= _endIndex){
			oBtnNext.addClass('disabled');
		}

第四步，绑定事件

给页码的事件绑定：

		for(var i=_startIndex; i<=_endIndex; i++){
			var oLi = $('<li><a>' + i + '</a></li>');
			oUl.append(oLi);
			if(i == _settings.index) {oLi.addClass('current');continue;}
			//step 4
			oLi.click(function(){
				//console.log($(this).text())
				//alert($(this).text())
				_settings.onChange.apply(this, [parseInt($(this).text())]);
			});
		}

给上下页的事件绑定：

		//step 4
		oBtnPrev.click(function(){
			var _i = _settings.index - 1;
			if (_i <= 0) {return;}
			_settings.onChange.apply(this, [_i]);
		});

		oBtnNext.click(function(){
			var _i = _settings.index + 1;
			if(_i > _settings.total){return;}
			_settings.onChange.apply(this, [_i]);
		});

第五步，打包成js包

(function(){
	jQuery.fn.pagination = function(settings_){
		//step 1
		var _defaults = {
			index:1,
			total:0,
			displayNum:5,
			onChange:null
		};

		//step 2
		var _settings = $.extend({}, _defaults, settings_);
		
		if(_settings.total <= 0) {return;}
		if(_settings.index > _settings.total) {return;}

		var _startIndex = parseInt((_settings.index - 1) / _settings.displayNum) * _settings.displayNum + 1;
		var _endIndex = _startIndex + _settings.displayNum - 1;
		if(_endIndex > _settings.total) {_endIndex = _settings.total;}
		if(typeof(_settings.onChange) != 'function'){
			_settings.onChange = function(pageIndex_){}
		}

		//step 3
		var obj = this;
		obj.attr('class', 'pagination');

		var oUl = $('<ul></ul>');
		var oBtnPrev = $('<li><a class="btn-prev">«</a></li>');
		var oBtnNext = $('<li><a>»</a></li>');
		oUl.append(oBtnPrev);
		for(var i=_startIndex; i<=_endIndex; i++){
			var oLi = $('<li><a>' + i + '</a></li>');
			oUl.append(oLi);
			if(i == _settings.index) {oLi.addClass('current');continue;}
			//step 4
			oLi.click(function(){
				//console.log($(this).text())
				//alert($(this).text())
				_settings.onChange.apply(this, [parseInt($(this).text())]);
			});
		}
		oUl.append(oBtnNext);
		obj.append(oUl);

		if(_settings.index == 1){
			oBtnPrev.addClass('disabled');
		}
		if(_settings.index >= _endIndex){
			oBtnNext.addClass('disabled');
		}

		//step 4
		oBtnPrev.click(function(){
			var _i = _settings.index - 1;
			if (_i <= 0) {return;}
			_settings.onChange.apply(this, [_i]);
		});

		oBtnNext.click(function(){
			var _i = _settings.index + 1;
			if(_i > _settings.total){return;}
			_settings.onChange.apply(this, [_i]);
		});

		
	}
})();

调用方法：

html：

<body>
	<div id='pagination'></div>
</body>

js:

<script>
$('#pagination').pagination({
	index:6,
	total:7,
	onChange:function(pageIndex_){
		alert(pageIndex_);
	}
});

</script>