首页 > Web开发 > 详细

基于Jquery、JqueryUI插件编写

时间:2014-01-25 10:41:17      阅读:428      评论:0      收藏:0      [点我收藏+]

刚开始编写jquery插件的时候,只是从网上找个模板看着写,并不理解.刚刚仔细把官网的API看了下,突然觉得豁然开朗了.马上放假了想着应该整理整理不然忘了又.

How to create a Jquery Plugin主要看的大体介绍,然后创建Basic Plugin 和  Advanced Plugin

Basic

1.这应该是最简单的一种,定义和调用

bubuko.com,布布扣
$.fn.greenify = function() {
    this.css( "color", "green" );
    return this; // chain use
}
 
$( "a" ).greenify().addClass( "greenified" );
bubuko.com,布布扣

2.proteting the $ Alias and Adding Scope(包起来防止$标识冲突)

bubuko.com,布布扣
(function ( $ ) {
 
    $.fn.greenify = function() {
        this.css( "color", "green" );
        return this;
    };

}( jQuery ));
bubuko.com,布布扣

3.Using the each() Method

调用插件方法时可能有多个Element

bubuko.com,布布扣
$.fn.myNewPlugin = function() {
 
    return this.each(function() {
        // Do something to each element here.
    });
 
};
bubuko.com,布布扣

Advanced

bubuko.com,布布扣
// Plugin definition.
$.fn.hilight = function( options ) {
 
    // Extend our default options with those provided.
    // Note that the first argument to extend is an empty
    // object – this is to keep from overriding our "defaults" object.
    var opts = $.extend( {}, $.fn.hilight.defaults, options );
 
    // Our plugin implementation code goes here.
 
};
 
// Plugin defaults – added as a property on our plugin function.
$.fn.hilight.defaults = {
    foreground: "red",
    background: "yellow"
};
bubuko.com,布布扣

调用的时候有两种方式改变参数

bubuko.com,布布扣
// Override plugin default foreground color.
$.fn.hilight.defaults.foreground = "blue";
 
// ...
 
// 方式1.Invoke plugin using new defaults.
$( ".hilightDiv" ).hilight();
 
// ...
 
// 方式2.Override default by passing options to plugin method.
$( "#green" ).hilight({
    foreground: "green"
});
bubuko.com,布布扣

 

 

基于Jquery、JqueryUI插件编写

原文:http://www.cnblogs.com/kite-Runner/p/3532718.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!