1

オブジェクト指向の jquery プラグインを作成しています。クラスがあり、プラグインでオブジェクトを作成するこのクラスにアクセスしています。プラグイン呼び出し時に指定する要素の「サイズ」オプションを学習する必要があるため、要素のデータを使わずにこのオブジェクトにアクセスしたい。

一部の人々は、次のように要素データにオブジェクトを保持します。

element.data('myplugin', myplugin);

そして、このオブジェクトに次のようにアクセスします。

$(element).data('myplugin').get_size();

ただし、次のようなものを使用したいと思います。

$(要素).get_myplugin_obj().get_size();

これを行うことは可能ですか？これを行う例は見つかりませんでした。

次のコードが私のプラグインだとしましょう。このプラグインは、一部の入力領域で呼び出されます。ユーザーが文字を入力エリアに書き込むと、プラグインはテキスト「hello」の「font-size」を大きくします。したがって、「こんにちは」メッセージはますます大きくなっています。giveerror.js の別の関数は、最初に指定されたサイズを探し、最大サイズを計算します。したがって、このプラグインは、MyPluginClass のオブジェクトを使用して、各要素の指定された「サイズ」オプションにアクセスする必要があります。

myplugin.js:

 (function($) {

var MyPluginClass = function(element, customOptions)
{
    var elem = $(element);
    var obj = this;
    var options = $.extend({
        size: 1
    }, customOptions || {});

   /** public method **/
    this.addMyPlugin = function() {
        elem.after('<br /><span class="hello" style="font-size:'+options.size+'px">hello</span>');

        calculate(elem);
        elem.change(function() {
            calculate(this);
        });
        elem.keyup(function(){
            calculate(this);
        });
    };

    /** private method */
    var calculate = function(obj){
        var length = $(obj).val().length;
        var newsize = options.size + length;
        $(obj).nextAll('.hello:first').css('font-size',newsize);
        return;
    };

    /** public method to get max size value **/
    this.get_size = function() {
        return options.size;
    };

    /** public method to get object of this class for specific element **/
    this.get_myplugin_obj = function() {
        return obj;
    };


};

$.fn.myPlugin = function(customOptions)
{
    return this.each(function()
    {
        var element = $(this);

        /** create an object for MyPluginClass **/
        var MyPluginClassObj = new MyPluginClass(this, customOptions);

        MyPluginClassObj.addMyPlugin();
    });
};
})(jQuery);

giveerror.js:

  function validate_hello_size_func (element, error_message)
{
        var first_given_size = $(element).get_myplugin_obj().get_size();
        var threshold = first_given_size * 3;
        //var threshold = 10;
        var current_size_px = $(element).nextAll('.hello:first').css('font-size');
        var current_size = parseInt(current_size_px.substr(0,current_size_px.length-2), 10);
        if(current_size > threshold){
            if(!$(element).next().hasClass('error'))
                $(element).after('<span class="error" style="color:red">'+error_message+'</span>');
        } else {
            if($(element).next().hasClass('error'))
                $(element).next().remove();
        }
}

index.php:

<html>
<head>
<title>Hello</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="myplugin.js"></script>
<script type="text/javascript" src="giveerror.js"></script>
<script type="text/javascript">
$(document).ready ( function ( ) {
    $('#input1').myPlugin({
            size: 5
    });
    $('#input2').myPlugin();

    $('#input1').bind ( 'change', function() {
        validate_hello_size_func (this, 'You exceeded the limit');
    });
    $('#input2').bind ( 'change', function() {
        validate_hello_size_func (this, 'You exceeded the limit');
    });
});

</script>
</head>
<body>
    <div id="div1">
        <input id="input1" type="text" name="input1" value="">
    </div>
    <div id="div2">
        <input id="input2" type="text" name="input2" value="">
    </div>
    <br />
    <input type="submit" name="submit" value="OK">
</body>
</html>
4

2 に答える 2

1

問題を解決しました。ここにコメントを追加して、同じ構造を使用したい人を支援します。答えは次のとおりです。

return ステートメントを介して:

  • $.fn.myPlugin では、次のことを行います: return this.each(function() .....
  • この return 関数では、 this.get_myplugin_obj = function() { return MyPluginClassObj; を定義する必要があります。};
  • これにより、myPlugin が呼び出された場合、get_myplugin_obj 関数にアクセスできるすべての要素が許可されます。get_myplugin_obj は、get_size などの関数を持つ MyPluginClass オブジェクトを返します。

新しいmyplugin.jsは次のとおりです。

(function($) {

    var MyPluginClass = function(element, customOptions)
    {
        var elem = $(element);
        var obj = this;
        var options = $.extend({
            size: 1
        }, customOptions || {});

       /** public method **/
        this.addMyPlugin = function() {
            elem.after('<br /><span class="hello" style="font-size:'+options.size+'px">hello</span>');

            calculate(elem);
            elem.change(function() {
                calculate(this);
            });
            elem.keyup(function(){
                calculate(this);
            });
        };

        /** private method */
        var calculate = function(obj){
            var length = $(obj).val().length;
            var newsize = options.size + length;
            $(obj).nextAll('.hello:first').css('font-size',newsize);
            return;
        };

        /** public method to get max size value **/
        this.get_size = function() {
            return options.size;
        };

    };

    $.fn.myPlugin = function(customOptions)
    {
        return this.each(function()
        {
            var element = $(this);

            /** create an object for MyPluginClass **/
            var MyPluginClassObj = new MyPluginClass(this, customOptions);

            MyPluginClassObj.addMyPlugin();

            this.get_myplugin_obj = function() {
                return MyPluginClassObj;
            };
        });
    };
})(jQuery);

そして、次の関数でサイズを取得します。giveerror.js:

function validate_hello_size_func (element, error_message)
{
        var first_given_size = $(element)[0].get_myplugin_obj().get_size();
        var threshold = first_given_size * 3;
        //var threshold = 10;
        var current_size_px = $(element).nextAll('.hello:first').css('font-size');
        var current_size = parseInt(current_size_px.substr(0,current_size_px.length-2), 10);
        if(current_size > threshold){
            if(!$(element).next().hasClass('error'))
                $(element).after('<span class="error" style="color:red">'+error_message+'</span>');
        } else {
            if($(element).next().hasClass('error'))
                $(element).next().remove();
        }
}
于 2012-10-03T08:58:33.210 に答える
0

プラグインを初期化するときに、プラグイン オブジェクトを要素データに格納できます。この後、プラグインで $(element).data('aaaa') を返すメソッドを作成します。

つまり、プラグインのインスタンスにアクセスする方法を「マスク」するだけです。

于 2012-10-02T17:17:57.577 に答える