jquery插件教程,jquery 插件写法

jQuery分页插件pagination具体怎么用？求详细教程

本文实例为大家分享了jQuery Pagination分页插件的具体代码，供大家参考，具体内容如下

成都创新互联长期为数千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为玛沁企业提供专业的成都做网站、网站建设，玛沁网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。

一、引用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() 为翻页调用次函数。 prev_text: " 上一页", next_text: "下一页 ", items_per_page: 10, //每页的数据个数 num_display_entries: 1, //两侧首尾分页条目数 current_page: page, //当前页码 num_edge_entries: 11 //连续分页主体部分分页条目数 }); });

四、后台代码：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

如何编写JQuery 插件详解

jQuery 如何写插件 -

jQuery插件的开发包括两种：

一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。

1、类级别的插件开发

类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展：

1.1 

添加一个新的全局函数

添加一个全局函数，我们只需如下定义：

jQuery.foo = 

function() { 

alert('This is a test. This is only a 

test.'); 

}; 

1.2 

增加多个全局函数

添加多个全局函数，可采用如下定义：

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 + '".'); 

}; 

调用时和一个函数的一样的: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 插件

jquery插件开发模式

jquery插件一般有三种开发方式：

通过$.extend()来扩展jQuery

通过$.fn 向jQuery添加新的方法

通过$.widget()应用jQuery UI的部件工厂方式创建

第一种$.extend()相对简单，一般很少能够独立开发复杂插件，第三种是一种高级的开发模式，本文也不做介绍。第二种则是一般插件开发用到的方式，本文着重讲讲第二种。

插件开发

第二种插件开发方式一般是如下定义

$.fn.pluginName = function() {

//your code here

}

插件开发，我们一般运用面向对象的思维方式

例如定义一个对象

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)有{}主要是为了创建一个新对象，保留对象的默认值。

$.fn.myPlugin = function(options) {

//创建haorooms的实体

var haorooms= new Haorooms(this, options);

//调用其方法

return Haorooms.changecss();

}

调用这个插件直接如下就可以

$(function() {

$('a').myPlugin({

'color': '#2C9929',

'fontSize': '20px'

});

})

上述开发方法的问题

上面的开发方法存在一个严重的问题，就是定义了一个全局的Haorooms，这样对于插件的兼容等等各个方面都不好。万一别的地方用到了Haorooms，那么你的代码就悲催了！现在我们把上面的代码包装起来，用一个自调用匿名函数(有时又叫块级作用域或者私有作用域)包裹，就不会出现这个问题了！包括js插件的开发，也是一样的，我们用一个自调用匿名函数把自己写的代码包裹起来，就可以了！包裹方法如下：

(function(){

})()

用上面的这个包裹起来，就可以了。

但是还有一个问题，当我们研究大牛的代码的时候，前面经常看到有“；”，那是为了避免代码合并等不必要的错误。

例如，我们随便定义一个函数：

var haoroomsblog=function(){

}

(function(){

})()

由于haoroomsblog这个函数后面没有加分号，导致代码出错，为了避免这类情况的发生，通常这么写！

；(function(){

})()

把你的插件代码包裹在上面里面，就是一个简单的插件了。（注js插件和jquery插件都是如此）

还有一个问题

把你的插件包裹在

；(function(){

})()

基本上可以说是完美了。但是为了让你开发的插件应用更加广泛，兼容性更加好，还要考虑到用插件的人的一些特殊的做法，例如，有些朋友为了避免jquery和zeptojs冲突，将jquery的前缀“$”,修改为“jQuery”，还有些朋友将默认的document等方法修改。为了让你的插件在这些东西修了了的情况下照常运行，那么我们的做法是，把代码包裹在如下里面：

;(function($,window,document,undefined){

//我们的代码。。

})(jQuery,window,document);

就可以避免上面的一些情况了！

至此，你开发的插件就算完美了！

jquery插件怎样使用和修改?

jQuery插件 要使用它的话 通常插件中都有demo或者api可以查阅

通常jQuery插件为了减小体积 会发布两个版本 XXX.js和XXX.min.js

如果你要修改插件需要使用XXX.js文件

首先 你要知道它怎么用,先有一个可用的demo(没有demo就自己写一个),然后用webkit内核或firefox进行断点查看,这主要是为了找插件入口点,当然 你也可以直接查看js代码 这需要一定的底子

最后 就是慢慢查看他的代码的实现功能了,先得看懂他是怎么实现的,然后你才会知道怎么改.

jQuery插件我也写的不少 像 模拟alert/confirm/prompt 错误信息提示框 模拟弹出窗体 无缝marquee滚动 分页控件 拖拽控件等等

jQuery插件的框架写法通常是

(function($){

$.fn.extend({

fnKey:function(){}

})

//或者

$.fn.fnKey=function(){}

})(jQuery)

上面的两种写法的调用 方式 是

$("XXX").fnKey()进行调用的

还有一种写法:

var fnClass = function(){

this.fnKey=function(){

}

this.props="";

}

这种写法是的调用 方式是

fnClass obj = new fnClass();

obj.fnKey();

第二种写法是js的面向对象编程 得自己慢慢的理解哈

怎样编写一个jQuery插件

为了方便用户创建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法。

1. jQuery.extend() 方法有一个重载。

　 jQuery.extend(object) ,一个参数的用于扩展jQuery类本身，也就是用来在jQuery类/命名空间上增加新函数，或者叫静态方法，例如jQuery内置的 ajax方法都是用jQuery.ajax()这样调用的，有点像 “类名.方法名” 静态方法的调用方式。下面我们也来写个jQuery.extend(object)的例子：

//扩展jQuery对象本身

jQuery.extend(｛

"minValue": function (a, b) ｛

///《summary

/// 比较两个值，返回最小值

///《/summary

return a 《 b ? a : b;

},

"maxValue": function (a, b) ｛

///《summary

/// 比较两个值，返回最大值

///《/summary

return a  b ? a : b;

}

});

//调用

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])

用一个或多个其他对象来扩展一个对象，返回被扩展的对象。

如果不指定target，则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。

如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会与原对象共享结构。

未定义的属性将不会被复制，然而从对象的原型继承的属性将会被复制。

参数

deep:       可选。如果设为true，则递归合并。

target:     待修改对象。

object1:   待合并到第一个对象的对象。

objectN:   可选。待合并到第一个对象的对象。

示例1：

合并 settings 和 options，修改并返回 settings。

var settings = ｛ validate: false, limit: 5, name: "foo" };

var options = ｛ validate: true, name: "bar" };

jQuery.extend(settings, options);

结果：

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);

结果：

settings == ｛ validate: true, limit: 5, name: "bar" }

empty == ｛ validate: true, limit: 5, name: "bar" }

这个重载的方法，我们一般用来在编写插件时用自定义插件参数去覆盖插件的默认参数。

jQuery.fn.extend(object)扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。

首先我们来看fn 是什么东西呢。查看jQuery代码，就不难发现。

jQuery.fn = jQuery.prototype = ｛

　init: function( selector, context ) ｛.....};

};

原来 jQuery.fn = jQuery.prototype，也就是jQuery对象的原型。那jQuery.fn.extend()方法就是扩展jQuery对象的原型方法。我 们知道扩展原型上的方法，就相当于为对象添加”成员方法“，类的”成员方法“要类的对象才能调用，所以使用 jQuery.fn.extend(object)扩展的方法， jQuery类的实例可以使用这个“成员函数”。jQuery.fn.extend(object)和jQuery.extend(object)方法一 定要区分开来。