snapshotpl/zf-snap-jquery

jQuery and jQuery UI helpers and form elements for Zend Framework 2

ZfSnapJquery

jQuery and jQuery UI helpers and form elements for Zend Framework 2, _(*1)

Version 0.5.0 Created by Witold Wasiczko, _(*2)

Features

• jQuery UI elements
  • Slider
  • Spinner
  • Datepicker
  • Autocomplete
• Auto include js and css files with libs (using public cdn)
• Highly configurable
• Ready to use without configuration

Usage

Create form:, _(*3)

add(array(
            'name' => 'slider',
            'type' => 'Slider',
        ));

        $this->add(array(
            'name' => 'spinner',
            'type' => 'Spinner',
        ));

        $this->add(array(
            'name' => 'datepicker',
            'type' => 'Datepicker',
        ));

        $this->add(array(
            'name' => 'autocomplete',
            'type' => 'Autocomplete',
            'attributes' => array(
                'jquery' => array(
                    'source' => array(
                        'Zend Framework',
                        'Symfony2',
                        'CakePHP',
                        'Kohana',
                        'Yii',
                    )
                )
            )
        ));

        $this->add(array(
            'name' => 'submit',
            'attributes' => array(
                'type'  => 'submit',
                'value' => 'Submit ZfSnapJquery form!',
            ),
        ));
    }
}
```

Assign form to view in controller:

```php
public function indexAction()
{
    $sl = $this->getServiceLocator();

    $form = $sl->get('FormElementManager')->get('\Application\Form\Jquery');

    return new ViewModel(array(
        'form' => $form,
    ));
}
```
and print it in view:
```php
form()->openTag($this->form); ?>




Slider:
formJquerySlider($this->form->get('slider')); ?>







Spinner:
formJquerySpinner($this->form->get('spinner')); ?>







Date picker:
formJqueryDatepicker($this->form->get('datepicker')); ?>







Autocomplete:
formJqueryAutocomplete($this->form->get('autocomplete')); ?>







formSubmit($this->form->get('submit')); ?>




form()->closeTag() ?>

That's it! Oh, and you need to print Zend's headLink(), headScript() and inlineScript() in your layout., _(*4)

Customization

Custom jQuery UI element property

To change jquery options use jquery attribute:, _(*5)

$this->add(array(
    'name' => 'autocomplete',
    'type' => 'Autocomplete',
    'attributes' => array(
        'jquery' => array(
            'source' => 'data-source.php',
        ),
    ),
));

Custom version, theme or CDN

If you need to change version, theme or default CDN - overwrite configuration:, _(*6)

return array(
    'zf_snap_jquery' => array(
        'libraries' => array(
            'jquery' => array(
                'version' => '2.0.3',
                'cdnScript' => \ZfSnapJquery\Libraries\Jquery::CDN_GOOGLE,
            ),
            'jquery-ui' => array(
                'version' => '1.10.0',
                'theme' => 'black-tie',
            ),
        ),
    ),
);

Custom scripts and styles

You can use your own script or style:, _(*7)

return array(
    'zf_snap_jquery' => array(
        'libraries' => array(
            'jquery' => array(
                'script' => 'url/to/script/jquery.min.js',
            ),
            'jquery-ui' => array(
                'script' => 'other/url/to/script/jquery-ui.min.js',
                'style' => 'url/to/style/jquery-ui.min.css',
            ),
        ),
    ),
);

Custom helper

If you don't want to use headLink(), headScript() and inlineScript() to include scripts and styles:, _(*8)

return array(
    'zf_snap_jquery' => array(
        'view-helpers' => array(
            'jquery' => array(
                'appendToOwnHelper' => false,
            ),
        ),
    ),
);

And then in your layout:, _(*9)

echo $this->jquery();

Custom way to append scripts or styles

To disable appending scripts and styles:, _(*10)

return array(
    'zf_snap_jquery' => array(
        'libraries' => array(
            'jquery' => array(
                'enable' => false,
            ),
            'jquery-ui' => array(
                'enable' => false,
            ),
        ),
    ),
);

To see what you can customize see source of module.config.php., _(*11)

How to install?

Via composer.json, _(*12)

{
    "require": {
        "snapshotpl/zf-snap-jquery": "dev-master"
    }
}