KpBootstrap3 版本 0.0.1

Zend Framework 2 模块

介绍

使用Twitter Bootstrap 3的样式输出Form组件

安装

下载后放入Module文件夹，在config/application.config.php里配置

<?php
return array(
    'modules' => array(
        // ...
        'KpBootstrap3',
    ),
    // ...
);
?>

Form的样式

Bootstrap3 的Form 有3种样式，默认表单(无class)、内联表单(form-inline)、水平表单(form-horizontal)

使用

KpBootstrap3 默认使用的是 无class的默认表单

1、在view中输出所有的Form元素(默认表单)

// Application/view/application/index/index.phtml
<?php
    echo $this->form($form);
?>

2、使用form-inline

// Application/src/Application/Form/IndexForm.php
<?php
    namespace Application\Form;

    class IndexForm
    {
        public function __construct()
        {
            parent :: __construct('index');
            
            // 设置form的class
            $this->setAttribute('class', 'form-inline');
            
            // ....
        }
    }
?>

// Application/view/application/index/index.phtml
<?php
    echo $this->form($form);
?>

3、使用form-horizontal

form-horizontal 默认会对Label和表单元素进行Grid布局，总共12格Grid，默认Label占2格(col-sm-2)，表单Layout占10格(col-sm-10)

可以设置label和表单Layout的class属性

// Application/src/Application/Form/IndexForm.php
<?php
    namespace Application\Form;

    class IndexForm
    {
        public function __construct()
        {
            parent :: __construct('index');
            
            // 设置form的class
            $this->setAttribute('class', 'form-horizontal');
            
            // 设置Label所使用的grid类
            $this->setAttribute('horizontalLabelClass', 'col-sm-5')
            
            // 设置表单Layout所使用的grid类
            $this->setAttribute('horizontalInputWrapClass', 'col-sm-5')
            
            // ....
        }
    }
?>

// Application/view/application/index/index.phtml
<?php
    echo $this->form($form);
?>

4、重写了元素 dateTime 配合Bootstrap3的datetimepicker js组件

组件下载地址 http://www.bootcss.com/p/bootstrap-datetimepicker/

// KpBootstrap3/Module.php
<?php
class Module
{
    public function getConfig()
    {
        return array(
            'kpBootstrap3' => array(
                'dateTime' => array(
                    // 时间戳 转换 日期的格式，只支持 时间戳和此格式的数据判断
                    'dateFormat' => 'Y-m-d H:i:s',
                    // 对于dateTime类型 是否开启 datetimepicker 组件
                    'datetimepicker' => true,
                    // datetimepicker 的组件js css所在文件夹
                    'datetimepickerAssertPath' => '/vendor/datetimepicker',
                    // datetimepicker 的选项
                    'datetimepickerOption' => array(
                        'format' => "yyyy-mm-dd hh:ii:ss",
                        'autoclose' => true,
                        'todayBtn' => true,
                    )
                )
            ),
    }
}
?>