フォームにスタイルを追加するにはどうすればよいですか？

Question

私はいくつかのフォームを持っており、そのクラスにクラスを追加したいと思います。次に例を示します。

<form ... id="test1"> </form> 
<form ... id="test2"> </form> 

私は、次を発見したが、私はこれを理解していない最初の数行特に

(function ($) { 

    $.widget("ui.format", { 

     _init: function() { 

      var self = this; //the plugin object 
      var o = self.options; //user options 

      //get all form elements 
      var form = self.element; //the form that reformed was called on 
      var fieldsets = form.find('fieldset'); 
      var legends = form.find('legend'); 
      var text_inputs = form.find('input[type="text"] , input[type="password"] , textarea'); 
      var checkboxes = form.find('input[type="checkbox"]'); 
      var radios = form.find('input[type="radio"]'); 
      var buttons = form.find('input[type="reset"] , input[type="submit"], button'); 

      //add appropraite styles to form elements 
      form.addClass('ui-widget'); 
      fieldsets.addClass('ui-widget ui-widget-content ui-corner-all'); 
      legends.addClass('ui-widget ui-widget-header ui-corner-all'); 
      text_inputs.addClass('ui-widget ui-widget-content ui-corner-all'); 




}); //end plugin 

})(jQuery); 

の構文を理解していない：

(function ($) { 
    $.widget("ui.format", { 
     _init: function() { 

を

と最後の行：

})(jQuery); 

誰かが私にそれが意味することを説明し、これらの3つの行だけで私を歩いてもらうことができますか？例えば

：

• _initは
• は、私が「ui.format」の大文字と小文字を使用することができますし、これは関数の名前は何を意味するのでしょうか？
• ウィジェットの意味は、フォームにこのコードを適用するにはどうすればいいですか？私は、私の書類の中から何らかの形でそれを呼び出す必要があると仮定し、それを特定のフォームIDに付ける必要があります。
• また、これをフォームに適用して後でもう一度適用するとどうなりますか。同じクラスを2回追加しますか？

Answer 1

(function ($) {は、jQueryプラグイン（および他の多くのJavaScript関数）でよく使用されるパターンを開始します。全体のパターンは以下のとおりです。

(function ($) { //declare an anonymous function that accepts a parameter called '$' 
    //your code goes here 
}(jQuery)); //Close the anonymous function and pass it the jQuery object 

括弧で全体をラッピング（DOMの準備が整う前に、すなわち）それは、すぐにそれをロードして実行させます。 $.widget("ui.format", {はjQuery widget factoryは「namespace.widgetname」として「ui.format」を渡し、その後{を渡すために、オブジェクトを開始し拡張するために開始されます

「_initはどういう意味」：_init: function() {がありますウィジェット・ファクトリーに渡されたオブジェクトに定義されている「_init」という関数。

"「ui.format」に大文字と小文字を混在させることはできますか：いいえ、名前空間を変更するウィジェットであり、JavaScriptでは大文字と小文字が区別されます。

あなたのコードにこれを適用する限り、私はこのプラグインを見たことがないので、あなたが入手したサイトのドキュメントを参照する必要があります。

一般に、セレクタをjQueryオブジェクトに渡してウィジェット（つまり$('form#test1').ui.widget();）を呼び出して、jQueryウィジェットを適用します。

.addClass()機能を持つクラスを追加することもできます。

$(document).ready(function() { 
    $('form#test1').addClass('yourClassHere'); 
    $('form#test1').addClass('yourNextClassHere'); 
    //or just chain them together like so... 
    $('form#test1').addClass('classOne').addClass('classTwo').addClass('classThree'); 
}); 

Answer 2

おそらく、スクリプトは次のようになります。（最後に連結された）最初の行だけのスクリプトを解析する時に、それは実際にそれをすぐに実行することを意味します

(function($) { 
    $.widget("ui.format", { 
    _init: function() { 
     ... 
     ... 
    }); 
})(jQuery); 

。つまり、ロードされるとすぐに実行されます。

2行目は、ちょうど2つのパラメータでjQueryプラグインウィジェットと通過を呼び出している：

一つ 二つ_initを関数として定義されたJavaScriptオブジェクトである「ui.format」の文字列です。

おそらく、プラグインコードのどこかで、_init（）のように_initが呼び出されます。