README

为 Zend Framework 2 提供的 jQuery 和 jQuery UI 辅助工具及表单元素

版本 0.5.0 由 Witold Wasiczko 创建

特性

jQuery UI 元素
自动包含库的 js 和 css 文件（使用公共 cdn）
高度可配置
无需配置即可使用

用法

创建表单

<?php

class Jquery extends \Zend\Form\Form
{
    public function init()
    {
        $this->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!',
            ),
        ));
    }
}

在控制器中将表单分配给视图

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

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

    return new ViewModel(array(
        'form' => $form,
    ));
}

并在视图中打印它

<?php echo $this->form()->openTag($this->form); ?>

<div class="form_element">
Slider:
<?php echo $this->formJquerySlider($this->form->get('slider')); ?>
</div>

<div class="form_element">
Spinner:
<?php echo $this->formJquerySpinner($this->form->get('spinner')); ?>
</div>

<div class="form_element">
Date picker:
<?php echo $this->formJqueryDatepicker($this->form->get('datepicker')); ?>
</div>

<div class="form_element">
Autocomplete:
<?php echo $this->formJqueryAutocomplete($this->form->get('autocomplete')); ?>
</div>

<div class="form_element">
<?php echo $this->formSubmit($this->form->get('submit')); ?>
</div>

<?php echo $this->form()->closeTag() ?>

就这么多！哦，你还需要在你的布局中打印出 Zend 的 headLink()，headScript() 和 inlineScript()。

定制

自定义 jQuery UI 元素属性

要更改 jQuery 选项，请使用 jQuery 属性

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

自定义版本、主题或 CDN

如果你需要更改版本、主题或默认 CDN，请覆盖配置

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

自定义脚本和样式

你可以使用自己的脚本或样式

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

自定义辅助工具

如果你不想要使用 headLink()，headScript() 和 inlineScript() 来包含脚本和样式

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

然后在你的布局中

echo $this->jquery();

自定义添加脚本或样式的方式

要禁用添加脚本和样式

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

要查看你可以自定义的内容，请查看 module.config.php 的源代码。

如何安装？

通过 composer.json

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

snapshotpl / zf-snap-jquery

维护者

详细信息