README

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

版本 0.5.0 由 Witold Wasiczko 创建

由 naomigo 分支以添加对 timepicker-addon 的支持（http://trentrichardson.com/examples/timepicker/）

功能

• jQuery UI 元素
  • 滑块
  • 旋转器
  • 日期选择器
  • 自动完成
• 时间选择器插件元素
  • 日期时间选择器
  • 时间选择器
• 自动包含 js 和 css 文件库（使用公共 cdn）
• 高度可配置
• 无需配置即可使用

用法

创建表单

<?php

namespace Application\Form;

use Zend\Form\Form;

class Jquery extends 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' => 'datetimepicker',
            'type' => 'Datetimepicker',
        ));

        $this->add(array(
            'name' => 'timepicker',
            'type' => 'Timepicker',
        ));

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

        $this->add(array(
            'name' => 'submit',
            'type' => 'Submit',
        ));
    }
}

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

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">
<?php echo $this->formJquerySlider($this->form->get('slider')); ?>
</div>

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

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

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

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

<div class="form_element">
<?php echo $this->formJqueryTimepicker($this->form->get('timepicker')); ?>
</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"
    }
}