Как добавить стили в форму?

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); 

Может кто-нибудь объяснить мне, что это значит, и пропустить меня через эти три линии.

Например:

• Что означает _init значит
• Могу ли я использовать смешанный регистр для «ui.format» и это имя функции?
• Что такое .widget, как я могу применить этот код к моей форме? Я предполагаю, что мне нужно будет как-то вызвать его из моего документа, а затем прикрепить его к определенному идентификатору формы.
• Также, если я применил это к моей форме, а затем применил его снова. Будет ли он добавлять те же классы дважды?

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 переходящими в «ui.format» как «namespace.widgetname» и затем { запускает объект для передачи в

«что делает _init значит»:. _init: function() { является функция, называемая «_init», которая определяется в объекте, переданном на фабрику виджета.

«Могу ли я использовать смешанный футляр для« ui.format »»: Нет, так как измененный виджет виджета изменяется и JavaScript чувствителен к регистру.

Что касается применения этого кода, я еще не видел этот плагин, поэтому мне нужно будет обратиться к документации на том сайте, где вы ее получили.

В общем, вы применяете виджеты jQuery, передавая селектор объекту jQuery и вызывая виджет (т. Е. $('form#test1').ui.widget();).

Вы также можете добавить классы с функцией .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); 

Первая линия (в сочетании с последним) просто означает, что после разбора через скрипт это будет на самом деле запустить его сразу же. т.е.: он будет работать, как только он будет загружен.

Вторая строка просто вызвать плагин JQuery виджет и проходя по двум параметрам:

одна строка «ui.format» два является JavaScript Object, где _init определяется как функция.

Скорее всего, где-то в коде плагина _init будет называться _init().