ZendX_JQuery Form Elements and DecoratorsAll View Helpers are pressed into Zend_Form elements or decorators also. They can even be
easily integrated into your already existing forms. To enable a Form for Zend_JQuery support
you can use two ways: Init your form as General Elements and Decorator UsageBoth elements and decorators of the Zend jQuery Form set can be initialized with
the option key <?php $element = new ZendX_JQuery_Form_Element_DatePicker( 'dp1', array('jQueryParams' => array('defaultDate' => '2007/10/10')) ); // would internally call to: $view->datePicker("dp1", "", array('defaultDate' => '2007/10/10'), array()); ?> Additionally elements jQuery options can be customized by the following methods:
Each jQuery related Decorator also owns a $form->setDecorators(array( 'FormElements', array('AccordionContainer', array( 'id' => 'tabContainer', 'style' => 'width: 600px;', 'jQueryParams' => array( 'alwaysOpen' => false, 'animated' => "easeslide" ), )), 'Form' )); Form ElementsThe Zend Framework jQuery Extras Extension comes with the following Form Elements:
Form DecoratorsThe following Decorators come with the Zend Framework jQuery Extension:
Utilizing the Container elements is a bit more complicated, the following example builds a Form with 2 SubForms in a TabContainer: Example #1 SubForms with TabContainer Decorator The following example makes use of all Form elements and wraps them into 2 subforms that are decorated with a tab container. First
we build the basic $form = new ZendX_JQuery_Form(); $form->setAction('formdemo.php'); $form->setAttrib('id', 'mainForm'); $form->setAttrib('class', 'flora'); $form->setDecorators(array( 'FormElements', array('TabContainer', array( 'id' => 'tabContainer', 'style' => 'width: 600px;', )), 'Form', )); Setting the Form Id (in this case to 'mainForm') is an important step for the TabContainer. It is needed that the subforms can relate
to the Container Id in a later form building stage. We now initialize two SubForms that will be decorated with the $subForm1 = new ZendX_JQuery_Form(); $subForm1->setDecorators(array( 'FormElements', array('HtmlTag', array('tag' => 'dl')), array('TabPane', array('jQueryParams' => array('containerId' => 'mainForm', 'title' => 'DatePicker and Slider'))) )); $subForm2 = new ZendX_JQuery_Form(); $subForm2->setDecorators(array( 'FormElements', array('HtmlTag', array('tag' => 'dl')), array('TabPane', array('jQueryParams' => array('containerId' => 'mainForm', 'title' => 'AutoComplete and Spinner'))) )); In this stage it is important that the // Add Element Date Picker $elem = new ZendX_JQuery_Form_Element_DatePicker( "datePicker1", array("label" => "Date Picker:") ); $elem->setJQueryParam('dateFormat', 'dd.mm.yy'); $subForm1->addElement($elem); // Add Element Spinner $elem = new ZendX_JQuery_Form_Element_Spinner( "spinner1", array('label' => 'Spinner:') ); $elem->setJQueryParams(array('min' => 0, 'max' => 1000, 'start' => 100)); $subForm1->addElement($elem); // Add Slider Element $elem = new ZendX_JQuery_Form_Element_Slider( "slider1", array('label' => 'Slider:') ); $elem->setJQueryParams(array('defaultValue' => '75')); $subForm2->addElement($elem); // Add Autocomplete Element $elem = new ZendX_JQuery_Form_Element_AutoComplete( "ac1", array('label' => 'Autocomplete:') ); $elem->setJQueryParams(array('data' => array('New York', 'Berlin', 'Bern', 'Boston'))); $subForm2->addElement($elem); // Submit Button $elem = new Zend_Form_Element_Submit("btn1", array('value' => 'Submit')); $subForm1->addElement($elem); Three additional lines are missing to put it all together and we have a jQuery animated form: $form->addSubForm($subForm1, 'subform1'); $form->addSubForm($subForm2, 'subform2'); $formString = $form->render($view);
|