Question

我需要你的帮助:)）

我正在尝试使用jQuery规范进行插件。所以我开始阅读：http://docs.jquery.com/Plugins/Authoring

该文档很酷，并提供了很好的模式。

但我的插件有问题。

我的插件附加一个div并将一些事件绑定到不同的功能。

有时我需要考虑选项var但是...问题是，如果我执行opt var global，它会采用最后一个对象创建的选项。

如果我把它放在init方法中，我就不能在其他操作中使用它。

我需要每个新对象只能访问他自己的选项集。

(function( $ ) {
//plugin methods
var methods = {
    init : function( options ) {


        //default options
        var opt = $.extend({
            'id'            : 'test',
            'title'         : 'Test window',
            'type'          : 'normal',
            'text'          : 'test test! <br/> 123',
            'shines'        : '',
            'head_shines'   : '',
            'body_shines'   : '',
            'bottom_bar'    : true
        }, options);

        //shine or not shine? that's the matter
        if (opt.shines != '') {
            opt.shines = "shiny";
            opt.head_shines = " shine_head";
            opt.body_shines = " shine_body";
        }

        //maintaining Chainability
        return this.each(function() {
            var $this = $(this); // $this is now JQuery object

            //creating the bottom bar
            if (opt.bottom_bar == true && $("#bottom_bar").length == 0) {
                $this.append('<div id="bottom_bar"></div>');
            }
            //creating the new window
            $this.append("<div style='display: none;' class='window "+opt.shines+"' id='"+opt.id+"'>...boring html...</div>");

            //append new window to the bar
            $("#bottom_bar").append("<div style='display: none' class='section' id='s_"+opt.id+"'>"+opt.title+"</div>");

            //get a object of the window to interact with
            var $window = $("#"+opt.id);

            //show the windows
            $window.fadeIn().draggable();
            $("#s_"+opt.id).fadeIn();

            //attach the events to the windows
            $window.find('.close').one('click.ventana', methods.close);

            $window.find('.max').on('click.ventana', methods.maximize);

            $window.find('.min').on('click.ventana', methods.minimize);
            $("#s_"+opt.id).on('click.ventana', methods.minimizeBar);
        });

    },
    close : function() {},
    maximize : function() {}, //i want acces my opts here!
    minimize : function() {},
    minimizeBar: function() {} //or here... etc
}; //end methods

//creating the plugin
$.fn.ventana = function( method ) {
    if ( methods[method] ) { //if we call a method...
        return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ) );
    } else if ( typeof method == 'object' || !method ) { //if not, we use init
        return methods.init.apply( this, arguments);
    } else { //method don't exists (console error)
        $.error( 'Method ' + method + ' does not exists in jQuery.ventana');
    }
};

}) ( jQuery );

问题是，如果我把第一条评论放在哪里：

//plugin methods

这样：

//globals define
var opt;

我只得到最后一个对象选择......

创建新窗口的示例

$('body').ventana( {
    'id'    : 'master',
    'title' : 'Afegir Finestres',
    'text'  : 'test'
});
$('body').ventana( {
    'id'    : 'master1',
    'title' : 'Afegir Finestres1',
});

我要在两个对象中选择master1

Answer 1

您可以使用data存储稍后要检索的选项对象。

// store it
$this.data("options", opt);

// ...

// use it later
var opt = $this.data("options");

为jquery插件的每个对象创建选项

1 个答案: