0

これは私の最初の投稿なので、適切な場所に投稿していることを願っています。

ダイアログ/モーダル プラグインを開発しようとしています。これは私の最初のプラグインであり、正しい方法で作成したかどうかわかりません。私が抱えている問題は、 $.extend が設定オブジェクトを更新していないことです。プラグインを使用して 2 つの要素を取得しました。#dialog 要素は、プラグイン設定オブジェクトを拡張していません。私はプラグインがどのように機能するか、そしてそれが私を内側から殺す方法を学ぶために数日間試みてきました:)

$("#icon_menu").Dialog();
$("#dialog").Dialog({closeable:false,clear_on_close : true});

あなたが私に与えることができるどんな助けでも大歓迎です

ここにコードがあります

(function( $ ){

$.fn.Dialog = function( method ) {           

    var elem = this;

    var settings = {
      'mask'         : '#mask',
      'closeable'    : true,
      'clear_on_close' : false
    };

  var methods = {
    init : function( options ) { 

                if ( options ) { 
                    $.extend( settings, options );
                }

                console.log(settings);

            }, 
    open : function( options ) { 

            var window_width = $(window).width();
            var window_height = $(window).height();

            var modal_height = "";
            var modal_width = "";

            var top = "";
            var left = "";

            if(!settings.set_width)
            {
                modal_width = elem.outerWidth();
            }else{
                modal_width = settings.set_width;
            }

            if(!settings.set_height)
            {
                modal_height = elem.outerHeight(); 
            }else{
                modal_height = settings.set_height;
            }

            if(!settings.set_y_pos)
            {
                top = (window_height-modal_height)/2;
            }else{
                top = settings.set_y_pos;
            }

            if(!settings.set_x_pos)
            {
                left = (window_width-modal_width)/2; 
            }else{
                left = settings.set_x_pos;
            }

            elem.addClass('active').css({'top': top + 'px', 'left': left + 'px'});

            $(settings.mask).css({ 'display' : 'block', opacity : 0}).fadeTo(500,0.8);

            elem.css({ 'display' : 'block', opacity : 0}).fadeTo(500,1);

                if(settings.closeable){$(settings.mask).bind('click.Dialog',  methods.close );}

                $(window).bind('scroll.Dialog', methods.reposition);            

    },
    open_ajax : function(options)
    {

        $.get(options.page, function(data){ 
            elem.html(data);
             methods.open();
        });//$.get("sign_in.html",

    },
    close : function( options ) { 

                $(settings.mask).fadeOut(500);

                elem.fadeOut(500);

                //alert(settings.clear_on_close)

                console.log(settings.clear_on_close)

                if(settings.clear_on_close)
                {

                    elem.html("");

                }

                $(window).unbind('scroll.Dialog');
                $(settings.mask).unbind('click.Dialog');


    },
    reposition : function( options )
    {



            $(settings.mask).css({"marginTop": ($(window).scrollTop()) + "px"});
            elem.stop().animate({"marginTop": ($(window).scrollTop()) + "px"},1000);


    }

  };


    if ( methods[method] ) {
      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );
    }    

  };

})( jQuery );
4

3 に答える 3

0

これは私が一般的に使用するパターンです。プラグインコードで定義された直後にデフォルトを適用することに注意してください。私は100％私のパターンも正しいわけではありません。しかし、それは機能します。

(function($) {
$.fn.extend({

    dropList: function(options) {

        var defaults = {
            url: '',
            sortable: false,
            hoverClass: 'ui-state-highlight',
            rowSelected: function() {
            },
            rowDblClicked: function() {
            },
            onDrop:  function(ui) {
            }
        };

        var options = $.extend(defaults, options);

        return this.each(function() {
            //this is where I act on the selected element
        }
    }
}); })(jQuery)
于 2010-10-01T19:22:05.720 に答える
0

問題は、プラグインに内部状態があることです。オブジェクトでダイアログ メソッドを呼び出すたびに、新しい状態が作成されます。古い状態が参照または保存されることはありません。

関数呼び出し間で状態を保存する方法の詳細については、このチュートリアルのデータ セクションをお読みください: http://docs.jquery.com/Plugins/Authoring#Data

于 2010-10-01T19:30:43.207 に答える
0

これは、jquery プラグインを作成するための素晴らしいリソースです。

http://jqueryboilerplate.com/

于 2012-07-03T22:56:50.243 に答える