Вообще, по правилам PEAR все инструкции написаны в README. Но там по-английски. А тут я приведу русскую инструкцию. Итак.
1. Надо или установить плагин, как PEAR пакет, или распаковать архив в папку plugins. Папка с плагином должна называться sfPropelTogglerPlugin. После этого вызовите команду symfony 'plugin:publish-assets' чтобы картинки из плагина скопировались в папку web/sfPropelTogglerPlugin. Если ничего не скопировалось - проверьте название папки плагина.
2. В settings.yml вашего приложения впишите в пункт enabled_modules: [default, sfPropelToggler]. Если вы этого не сделаете - будет выскакивать ошибка о том, что модуль не активирован.
3. В том файле, где будете подключать тогглер напишите

use_helper('Toggler');

4. Собственно сам переключатель может быть вставлен 2мя способами. Первый:

echo toggler(array('table' => 'table_name', 'field' => 'field_name', 'id' => $item->getId(), 'state' => $item->getState() ));

Где table -имя таблицы, field - поле, id - первичный ключ записи, а state - текущее состояние переключателя.
Второй способ через объект:

echo object_toggler($object, 'field_name');

Где object - объект Пропела, а field_name - поле, которе будем переключать.

На этом этапе у вас все должно заработать. Если же нет - спрашивайте в комментариях.

Fail #1

Первое, что мы видим - отсутствие обратной совместимости =(.  То есть, если в старые проекты мы скопируем новую библиотеку, то начнутся проблемы. Во-первых мы не увидим наши стили. Эрик переименовал дефолтные id у элементов. Теперь id оверлея у нас 'simplemodal-overlay', id контейнера - 'simplemodal-container', а кнопки 'simplemodal-close'. С одной стороны хорошо, приводится в порядок список id, не будет путаницы с другими плагинами для модальных окон, с другой сейчас начинаются проблемы у тех, кто не разобрался как обновить старые скрипты. На сайте, автор приводит способ, как обеспечить совместимость со старыми css:

$.extend($.modal.defaults, {
  closeClass: "modalClose",
  overlayId: "modalOverlay",
  containerId: "modalContainer"
});

Ладно, будем считать разобрались, настроили стили. Запускаем самый простенький тест, взятый из моего прошлого поста про SimpleModal и...

Fail #2

Бум! Нажал на кнопочку ОК и получил дырку в оверлее. Тут надо заметить, что я убрал вспомогательный <div>, который использовал в первый раз. По-видимому без него все-таки не обойтись. В итоге <div> вернул, дырок больше не получаю. Надо заметить, что подобным страдает только Опера (у меня 9.63). Firefox 3, Chrome 1.0.154 и IE7 показали себя с лучшей стороны. Насколько я понял, автор пытался решить эту проблему для Оперы, но по-видимому в 9.63 что-то изменилось и его старания оказались напрасны.

Success #1

А вот и первая удача в новой версии. Теперь нам не надо приклеивать плагин Dimensions. Окно позиционируется по центру совершенно самостоятельно. Это очень радует, я пробовал играть с размерами окна и оно всегда было по центру. Одно только замечание. Нельзя давать модальному окну быть больше, чем размер окна браузера. Или хотя бы кнопку для закрытия не уносить. А то сделал я окно высотой в 1000 пикселей, а экран на ноутбуке у меня 800 пикселей высотой. Вот вам и задача, как закрыть модальное окно? В опере я спасаюсь табом, чтобы перейти на кнопку OK, которая присутствует в моих диалоговых окнах и проблел или enter, чтобы закрыть. Не каждый догадается на самом деле.

Итого что мы имеем

Помимо всего вышеуказанного, в версии 1.2.2 есть еще изменения(ченджлог). Их я проверить не могу. О результатах тестирования Эрику написал, надеюсь он сможет решить проблему с Оперой. Позже я возможно напишу апдейт для своих диалоговых окошек. А здесь все.

Начинаем использовать

Данные плагина:

• название: simplemodal
• размер: 10кб без сжатия
• автор: Eric Martin
• сайт: http://www.ericmmartin.com/projects/simplemodal/
• скачать: http://simplemodal.googlecode.com/files/jquery.simplemodal-1.1.1.js
• демо: http://www.ericmmartin.com/simplemodal-test/

Выглядит это дело вот так:

Вот так выглядит плагин на сайте разработчика

Для того чтобы плагин заработал его надо подключить:

<script src="jquery.simplemodal.js" type="text/javascript"></script>

А так же указать стили для овереля (серой области), контейнера (собственно окно) и кнопки закрыть.

#modalOverlay { 
  background-color:#000;  /* Тут выбираем цвет затемнения */ 
  cursor:wait;  /* Курсор при наведении на затемненную область */ 
  filter: alpha(opacity=80); /* Интенсивность затемнения */ 
  height: 100%; 
} 
 
#modalContainer { 
  height:auto;   /* Для растягивания по высоте */ 
  width:300px; 
  left:50%;  /*в купе с margin-left, которая равна минус половине ширины центруют по горизонтали*/ 
  top:50%;   /*центрует по вертикали, вместе с margin-top, если задать высоту*/ 
  margin-left:-150px; 
  /* margin-top: -70px; */ 
  background-color:#fff; 
  border:3px solid #ccc; 
  padding: 10px; 
}  
a.modalCloseImg { 
  background:url(x.png) no-repeat; 
  width:25px;  /* Положение отличается от тех, что в примере. Мне кажется так удобнее */
  height:29px; 
  display:inline; 
  z-index:3200; 
  position:absolute; 
  top:0px; 
  right:0px; 
  cursor:pointer; 
}

К сожалению в плагине таятся некоторые глюки. Так например в опере, если контент страницы короче чем сама страница, то при закрытии окна внизу остается серая область. А в IE она иногда и вовсе не закрашивается.

Вот так это выглядит в Опере

Однако это решается довольно просто. На страницу необходимо добавить стиль

#helper { 
  position: absolute; 
  top: 0px; 
  left: 0px; 
  width: 100%; 
  height: 100%; 
  z-index: -10; 
}

И в любом месте страницы вставляем:

<div id="helper"></div>

Этим мы добиваемся перерисовки браузером нашего документа при закрытии модального окна.

Делаем удобное оповещение

Сначала добьемся, чтобы окно было посередине страницы. В своем примере я ограничил ширину 300px, а вот высота может меняться. CSS свойство top:50% действительно опускает окно до середины страницы, однако само модальное окно идет как раз ниже середины. Если бы мы указали высоту в пикселях, например 150px, то могли бы поднять окно над центром с помощью margin-top: -75px. Но окно будет резиновым, а мы для этого воспользуемся еще одним плагином: Dimensions. Данные плагина:

• название: Dimensions
• размер: 3кб без сжатия
• сайт: http://docs.jquery.com/Plugins/dimensions
• скачать: http://plugins.jquery.com/files/dimensions_1.2.zip
• демо: http://brandonaaron.net/docs/dimensions/#code-samples

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

<script type="text/javascript" src="jquery.dimensions.js"></script>

Подключили. Теперь открываем редактором файл плагина Simplemodal (jquery.simplemodal.js), да-да, будем исправлять плагин. Если наши версии совпадают, то на строке 294 будет функция open. Идем в самый ее конец, сразу после this.bindEvents(); и до закрывающей фигурной скобки ставим

$('#modalContainer').css('margin-top',-$('#modalContainer').outerHeight()/2-50);

Я специально отнял от высоты еще 50 пикселей, мне кажется это добавляет удобства. Но вы можете поэкспериментировать. Осталось совсем немного. Добавляем где-нибудь в конце страницы

<div id="message" style="display: none; text-align: center;">
<div id="messageText">текст модального окна</div><br /><br />
<input type='button' value='Ok' class='modalClose' style='height: 30px; width: 60px;'/>
</div>

Заметьте, кнопка имеет class='modalClose'. Вы можете создать в диве любой другой объект с этим классом - клик по нему будет закрывать окно. Все, приготовления закончены. Осталось его только использовать. Например так:

$(document).ready( function() {
    $('#messageText').html('Это наше окошко!');
    $('#message').modal();
});

И при загрузке страницы увидим

Наше модальное окно!

Ура, у нас все получилось.

Демо: посмотреть

А другие jQuery примеры можете посмотреть у моего друга Snowcore.

Начнем уже.

Для того, чтобы наш плагин мог быть вызван, как объект jQuery надо объявить его следующим образом:

jQuery.fn.validForm = function(userOptions) {
    //пишем код тут
}

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

var options = {
    errorContainer: "#errorList"
}

После чего переписываем эти опции пользовательскими.

$.extend(options, userOptions);

Добавляем так же стиль для оформления полей ввода, в которых есть ошибки (красная обводка в 2 пикселя и светло-красный фон). Добавляем методом append в тег <head>

$('head').append("<style>.inputError{border: 2px solid #F00; background: #FAA;}</style>");

Вот так это будет выглядеть

Теперь у нас заданы основные настройки, пора переходить к активным действиям. В jQuery программист оперирует не столько отдельными элементами, сколько их коллекциями, поэтому мы должны учитывать, что в наш плагин может быть передана не одна форма для валидации, а несколько. Для этого воспользуемся функцией each для перебора всех входных данных. Данные у нас помещаются в переменной $(this).

$(this).each( function() {
    var id = "#" + $(this).attr('id');
    if ($(id + " input").length > 0) {
        Validate(id);
    } else {
        return false;
    }
});

Как видите, для каждого полученного объекта мы объявили переменную id, состоящую из '#' и атрибута 'id' объекта. Тем самым мы получили id, который для использования в других функциях jQuery. В третьей строчке мы берем объект с именем id и всех его потомков, являющимися input'ами, и если их не 0, то применяем функцию Validate, которую опишем позже, а иначе возвращаем false.  (Если вам что-то непонятно в этой записи - прочитайте самый первый материал, указанный в статье.) Суть всей предыдущего куска кода - применить функцию Validatе ко всем переданным в плагин формам, у которых есть поля ввода. Далее идет собственно функция, так сказать "сердце" этого плагина.

function Validate(form) {
    //дальше пишем код тут
}

form - имя формы, которую будем проверять.

$(form + " input[@type=submit]").click(function() {});

Объявляем обработчик нажатия на кнопку submit. Внутри нее сначала объявляем счетчик ошибок:

var errorAmount = 0;

А затем и коллекцию элементов, которые будем проверять.

var collection = $(form + " input[@type=text]")
    .add(form +" input[@type=password]")
    .add(form +" input[@type=file]")
    .add(form +" textarea")
    .add(form +" select");

Функция add добавляет к уже найденным элементам еще множество. Таким образом, в переменной collection у нас собраны все поля ввода текста, пароля, селекты и текстарии. Для каждого элемента коллекции сначала для простоты определяем элемент в переменную element, его длину length. Если длина у нас false (то есть равна 0) мы добавляем css-класс этому элементу (этот класс мы выше добавили в <head>), увеличиваем счетчик ошибок на 1. В случае же правильного заполнения поля - убираем красную обводку для поля ввода.

collection.each(function() {
var element = $(this);
var length = $.trim(element.attr('value'));
 
if (!length) {
    element.addClass('inputError');
    errorAmount++;
} else {
    element.removeClass('inputError');
}
});

Для большего комфорта мы добавим обработчики изменения в наши поля. Если пользователь нажимает клавишу (то есть начинает вводить текст) мы сразу убираем обводку, однако если он стер, все, что ввел - возвращаем ее назад.

collection.keypress( function (){
    $(this).removeClass('inputError');
});
 
collection.change( function() {
    if (($(this).attr('value')).length < 1) {
        $(this).addClass('inputError');
    } else {
        $(this).removeClass('inputError');
    }
});

Теперь у нас есть количество ошибок в форме, а все поля с ошибками выделены красным. Осталось вывести сообщение пользователю о том, что он забыл ввести что-либо.

if (errorAmount) {
    $(options.errorContainer).html('Заполните пожалуйста правильно выделенные поля');
    $(options.errorContainer).show();
    return false;
} else {
    $(options.errorContainer).hide();
}

Заполняем указанный в опциях контейнер текстом и показываем. А если все заполнено правильно - скрываем. Вот собственно и все. Просто и полезно.

Теперь о том, как это можно использовать.

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.validform.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('#myForm').validForm({errorContainer: '#errors'});
  });
</script>

Не забудьте вставить в код контейнер с id="errors".

Готовый код можно скачать тут.
А рабочий пример посмотреть тут.