本文實(shí)例為大家分享了jQuery Pagination分頁(yè)插件的具體代碼，供大家參考，具體內(nèi)容如下
成都創(chuàng)新互聯(lián)長(zhǎng)期為數(shù)千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為瑪沁企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站建設(shè)，瑪沁網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
一、引用CSS和JS：
link href="/Content/Plugins/jQuery.Pagination_v2.2/pagination.css" rel="external nofollow" rel="stylesheet" type="text/css" / script src="/Content/Plugins/jQuery.Pagination_v2.2/jquery.pagination.js" type="text/javascript"/script
二、HTML：
div id="Pagination" class="flickr" style="margin-top: 10px; margin-left: 10px;" /div
三、JS：
$(function () { var total = parseInt("@(ViewBag.total)"); var page = parseInt("@(ViewBag.page)") - 1; var pageSize = parseInt("@(ViewBag.pageSize)"); $("#Pagination").pagination(total, { callback: function (page_id) { window.location = "BoardList?page=" + page_id + "pageSize=" + this.items_per_page; }, //PageCallback() 為翻頁(yè)調(diào)用次函數(shù)。 prev_text: " 上一頁(yè)", next_text: "下一頁(yè) ", items_per_page: 10, //每頁(yè)的數(shù)據(jù)個(gè)數(shù) num_display_entries: 1, //兩側(cè)首尾分頁(yè)條目數(shù) current_page: page, //當(dāng)前頁(yè)碼 num_edge_entries: 11 //連續(xù)分頁(yè)主體部分分頁(yè)條目數(shù) }); });
四、后臺(tái)代碼：
public ActionResult BoardList() { PagerModel pager = new PagerModel(); if (Request["page"] == null) { pager.page = 1; pager.rows = 10; pager.sort = "Id"; pager.order = "desc"; } else { pager.page = int.Parse(Request["page"]) + 1; pager.rows = int.Parse(Request["pageSize"]); pager.sort = "Id"; pager.order = "desc"; } boardManageService.GetList(ref pager); ListBoardModel boardList = pager.result as ListBoardModel; ViewData["BoardModelList"] = boardList; ViewBag.page = pager.page; ViewBag.total = pager.totalRows; ViewBag.pageSize = pager.rows; return View(); } #endregion
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
jQuery 如何寫插件 -
jQuery插件的開發(fā)包括兩種：
一種是類級(jí)別的插件開發(fā)，即給jQuery添加新的全局函數(shù)，相當(dāng)于給jQuery類本身添加方法。jQuery的全局函數(shù)就是屬于jQuery命名空間的函數(shù)，另一種是對(duì)象級(jí)別的插件開發(fā)，即給jQuery對(duì)象添加方法。下面就兩種函數(shù)的開發(fā)做詳細(xì)的說明。
1、類級(jí)別的插件開發(fā)
類級(jí)別的插件開發(fā)最直接的理解就是給jQuery類添加類方法，可以理解為添加靜態(tài)方法。典型的例子就是$.AJAX()這個(gè)函數(shù)，將函數(shù)定義于jQuery的命名空間中。關(guān)于類級(jí)別的插件開發(fā)可以采用如下幾種形式進(jìn)行擴(kuò)展：
1.1?
添加一個(gè)新的全局函數(shù)
添加一個(gè)全局函數(shù)，我們只需如下定義：
jQuery.foo =?
function() {?
alert('This is a test. This is only a?
test.');?
};?
1.2?
增加多個(gè)全局函數(shù)
添加多個(gè)全局函數(shù)，可采用如下定義：
Java代碼 收藏代碼
jQuery.foo = function() {?
alert('This is a test. This is?
only a test.');?
};?
jQuery.bar =?
function(param) {?
alert('This function takes a?
parameter, which is "' + param + '".');?
};?
調(diào)用時(shí)和一個(gè)函數(shù)的一樣的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');
1.3?
使用jQuery.extend(object);
jQuery.extend({?
foo:?
function() {?
alert('This is a test. This is?
only a test.');?
},?
bar: function(param)?
{?
alert('This function takes a?
parameter, which is "' + param +'".');?
}?
});
jquery插件開發(fā)模式
jquery插件一般有三種開發(fā)方式：
通過$.extend()來擴(kuò)展jQuery
通過$.fn 向jQuery添加新的方法
通過$.widget()應(yīng)用jQuery UI的部件工廠方式創(chuàng)建
第一種$.extend()相對(duì)簡(jiǎn)單，一般很少能夠獨(dú)立開發(fā)復(fù)雜插件，第三種是一種高級(jí)的開發(fā)模式，本文也不做介紹。第二種則是一般插件開發(fā)用到的方式，本文著重講講第二種。
插件開發(fā)
第二種插件開發(fā)方式一般是如下定義
$.fn.pluginName = function() {
//your code here
}
插件開發(fā)，我們一般運(yùn)用面向?qū)ο蟮乃季S方式
例如定義一個(gè)對(duì)象
var Haorooms= function(el, opt) {
this.$element = el,
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration':'none'
},
this.options = $.extend({}, this.defaults, opt)
}
//定義haorooms的方法
haorooms.prototype = {
changecss: function() {
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize,
'textDecoration': this.options.textDecoration
});
}
}
$.extend({}, this.defaults, opt)有{}主要是為了創(chuàng)建一個(gè)新對(duì)象，保留對(duì)象的默認(rèn)值。
$.fn.myPlugin = function(options) {
//創(chuàng)建haorooms的實(shí)體
var haorooms= new Haorooms(this, options);
//調(diào)用其方法
return Haorooms.changecss();
}
調(diào)用這個(gè)插件直接如下就可以
$(function() {
$('a').myPlugin({
'color': '#2C9929',
'fontSize': '20px'
});
})
上述開發(fā)方法的問題
上面的開發(fā)方法存在一個(gè)嚴(yán)重的問題，就是定義了一個(gè)全局的Haorooms，這樣對(duì)于插件的兼容等等各個(gè)方面都不好。萬一別的地方用到了Haorooms，那么你的代碼就悲催了！現(xiàn)在我們把上面的代碼包裝起來，用一個(gè)自調(diào)用匿名函數(shù)(有時(shí)又叫塊級(jí)作用域或者私有作用域)包裹，就不會(huì)出現(xiàn)這個(gè)問題了！包括js插件的開發(fā)，也是一樣的，我們用一個(gè)自調(diào)用匿名函數(shù)把自己寫的代碼包裹起來，就可以了！包裹方法如下：
(function(){
})()
用上面的這個(gè)包裹起來，就可以了。
但是還有一個(gè)問題，當(dāng)我們研究大牛的代碼的時(shí)候，前面經(jīng)?？吹接小埃弧?，那是為了避免代碼合并等不必要的錯(cuò)誤。
例如，我們隨便定義一個(gè)函數(shù)：
var haoroomsblog=function(){
}
(function(){
})()
由于haoroomsblog這個(gè)函數(shù)后面沒有加分號(hào)，導(dǎo)致代碼出錯(cuò)，為了避免這類情況的發(fā)生，通常這么寫！
；(function(){
})()
把你的插件代碼包裹在上面里面，就是一個(gè)簡(jiǎn)單的插件了。（注js插件和jquery插件都是如此）
還有一個(gè)問題
把你的插件包裹在
；(function(){
})()
基本上可以說是完美了。但是為了讓你開發(fā)的插件應(yīng)用更加廣泛，兼容性更加好，還要考慮到用插件的人的一些特殊的做法，例如，有些朋友為了避免jquery和zeptojs沖突，將jquery的前綴“$”,修改為“jQuery”，還有些朋友將默認(rèn)的document等方法修改。為了讓你的插件在這些東西修了了的情況下照常運(yùn)行，那么我們的做法是，把代碼包裹在如下里面：
;(function($,window,document,undefined){
//我們的代碼。。
})(jQuery,window,document);
就可以避免上面的一些情況了！
至此，你開發(fā)的插件就算完美了！
jQuery插件 要使用它的話 通常插件中都有demo或者api可以查閱
通常jQuery插件為了減小體積 會(huì)發(fā)布兩個(gè)版本 XXX.js和XXX.min.js
如果你要修改插件需要使用XXX.js文件
首先 你要知道它怎么用,先有一個(gè)可用的demo(沒有demo就自己寫一個(gè)),然后用webkit內(nèi)核或firefox進(jìn)行斷點(diǎn)查看,這主要是為了找插件入口點(diǎn),當(dāng)然 你也可以直接查看js代碼 這需要一定的底子
最后 就是慢慢查看他的代碼的實(shí)現(xiàn)功能了,先得看懂他是怎么實(shí)現(xiàn)的,然后你才會(huì)知道怎么改.
jQuery插件我也寫的不少 像 模擬alert/confirm/prompt 錯(cuò)誤信息提示框 模擬彈出窗體 無縫marquee滾動(dòng) 分頁(yè)控件 拖拽控件等等
jQuery插件的框架寫法通常是
(function($){
$.fn.extend({
fnKey:function(){}
})
//或者
$.fn.fnKey=function(){}
})(jQuery)
上面的兩種寫法的調(diào)用 方式 是
$("XXX").fnKey()進(jìn)行調(diào)用的
還有一種寫法:
var fnClass = function(){
this.fnKey=function(){
}
this.props="";
}
這種寫法是的調(diào)用 方式是
fnClass obj = new fnClass();
obj.fnKey();
第二種寫法是js的面向?qū)ο缶幊?得自己慢慢的理解哈
為了方便用戶創(chuàng)建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法。
1.?jQuery.extend()?方法有一個(gè)重載。
?jQuery.extend(object)?,一個(gè)參數(shù)的用于擴(kuò)展jQuery類本身，也就是用來在jQuery類/命名空間上增加新函數(shù)，或者叫靜態(tài)方法，例如jQuery內(nèi)置的?ajax方法都是用jQuery.ajax()這樣調(diào)用的，有點(diǎn)像?“類名.方法名”?靜態(tài)方法的調(diào)用方式。下面我們也來寫個(gè)jQuery.extend(object)的例子：
//擴(kuò)展jQuery對(duì)象本身
jQuery.extend(｛
"minValue":?function?(a,?b)?｛
///《summary
///?比較兩個(gè)值，返回最小值
///《/summary
return?a?《?b???a?:?b;
},
"maxValue":?function?(a,?b)?｛
///《summary
///?比較兩個(gè)值，返回最大值
///《/summary
return?a??b???a?:?b;
}
});
//調(diào)用
var?i?=?100;?j?=?101;
var?min_v?=?$.minValue(i,?j);?//?min_v?等于?100
var?max_v?=?$.maxValue(i,?j);?//?max_v?等于?101
重載版本：jQuery.extend([deep],?target,?object1,?[objectN])
用一個(gè)或多個(gè)其他對(duì)象來擴(kuò)展一個(gè)對(duì)象，返回被擴(kuò)展的對(duì)象。
如果不指定target，則給jQuery命名空間本身進(jìn)行擴(kuò)展。這有助于插件作者為jQuery增加新方法。
如果第一個(gè)參數(shù)設(shè)置為true，則jQuery返回一個(gè)深層次的副本，遞歸地復(fù)制找到的任何對(duì)象。否則的話，副本會(huì)與原對(duì)象共享結(jié)構(gòu)。
未定義的屬性將不會(huì)被復(fù)制，然而從對(duì)象的原型繼承的屬性將會(huì)被復(fù)制。
參數(shù)
deep:???????可選。如果設(shè)為true，則遞歸合并。
target:?????待修改對(duì)象。
object1:???待合并到第一個(gè)對(duì)象的對(duì)象。
objectN:???可選。待合并到第一個(gè)對(duì)象的對(duì)象。
示例1：
合并?settings?和?options，修改并返回?settings。
var?settings?=?｛?validate:?false,?limit:?5,?name:?"foo"?};
var?options?=?｛?validate:?true,?name:?"bar"?};
jQuery.extend(settings,?options);
結(jié)果：
settings?==?｛?validate:?true,?limit:?5,?name:?"bar"?}
示例2：
合并?defaults?和?options,?不修改?defaults。
var?empty?=?｛};
var?defaults?=?｛?validate:?false,?limit:?5,?name:?"foo"?};
var?options?=?｛?validate:?true,?name:?"bar"?};
var?settings?=?jQuery.extend(empty,?defaults,?options);
結(jié)果：
settings?==?｛?validate:?true,?limit:?5,?name:?"bar"?}
empty?==?｛?validate:?true,?limit:?5,?name:?"bar"?}
這個(gè)重載的方法，我們一般用來在編寫插件時(shí)用自定義插件參數(shù)去覆蓋插件的默認(rèn)參數(shù)。
jQuery.fn.extend(object)擴(kuò)展?jQuery?元素集來提供新的方法（通常用來制作插件）。
首先我們來看fn?是什么東西呢。查看jQuery代碼，就不難發(fā)現(xiàn)。
jQuery.fn?=?jQuery.prototype?=?｛
init:?function(?selector,?context?)?｛.....};
};
原來?jQuery.fn?=?jQuery.prototype，也就是jQuery對(duì)象的原型。那jQuery.fn.extend()方法就是擴(kuò)展jQuery對(duì)象的原型方法。我?們知道擴(kuò)展原型上的方法，就相當(dāng)于為對(duì)象添加”成員方法“，類的”成員方法“要類的對(duì)象才能調(diào)用，所以使用?jQuery.fn.extend(object)擴(kuò)展的方法，?jQuery類的實(shí)例可以使用這個(gè)“成員函數(shù)”。jQuery.fn.extend(object)和jQuery.extend(object)方法一?定要區(qū)分開來。
重慶分公司
重慶分公司
