README

这是一个Zend_Form装饰器和辅助工具集，帮助渲染所需的标记，将任何Zend_Form显示为Twitter的Bootstrap表单。

这是很酷的功能，但它是如何实现的？

以下是一个带有一些表单字段的示例表单

<?php
class My_Bootstrap_Form extends \Bootstrap\InlineForm
{
    public function init()
    {
        $this->setIsArray(true);
        $this->setElementsBelongTo('bootstrap');

        $this->_addClassNames('well');

        $this->addElement('text', 'text', array(
            'placeholder'   => 'E-mail',
            'prepend'       => '@',
            'class'         => 'focused'
        ));

        $this->addElement('password', 'password', array(
            'placeholder' => 'Password'
        ));

        $this->addElement('button', 'submit', array(
            'label'         => 'Login',
            'type'          => 'submit',
            'buttonType'    => 'success',
            'icon'          => 'ok',
            'escape'        => false
        ));
    }
}

## API 文档 ##

表单

垂直表单（默认样式）

<?php
class My_Vertical_Form extends \Bootstrap\VerticalForm
{
    public function init()
    {
        // Do your stuff here
    }
}

水平表单

<?php
class My_Horizontal_Form extends \Bootstrap\HorizontalForm
{
    public function init()
    {
        // Do your stuff here
    }
}

内联表单

<?php
class My_Inline_Form extends \Bootstrap\InlineForm
{
    public function init()
    {
        // Do your stuff here
    }
}

搜索表单

搜索表单可以渲染在导航栏中或作为正常表单。搜索表单是@final类，不能扩展。相反，它支持多个选项来配置表单的外观和感觉。

renderInNavBar (布尔值) 将表单渲染为显示在导航栏中。在此模式下将不会渲染提交按钮。(默认为 false)
pullItRight (布尔值) 此选项仅在将 renderInNavBar 选项设置为 true 时生效，其目的是将搜索表单对齐到导航栏的右侧。(默认为 false)
inputName (字符串) 此选项指定搜索输入的自定义名称。(默认为 searchQuery)
submitLabel (字符串) 如果将渲染提交按钮，可以通过传递 submitLabel 选项来自定义标签。(默认为提交)

<?php

// Normal search form
$searchForm = new \Bootstrap\SearchForm(array(
    'renderInNavBar' => false,
    'inputName'      => 'q',
    'submitLabel'    => 'Search!'
));

echo $searchForm;

// Navigation bar search form
$mavbarSearchForm = new \Bootstrap\SearchForm(array(
    'renderInNavBar' => true,
    'pullItRight'    => true,
    'inputName'      => 'q',
    'submitLabel'    => 'Search!'
));

echo $navbarSearchForm;

DisplayGroups

基本类 \Bootstrap\Form（因此，所有其子类）将自定义类 \Bootstrap\Form\DisplayGroup 设置为处理虚拟字段组的基本类。因此，这里不需要特殊编码。

<?php
class My_Bootstrap_Form extends \Bootstrap\HorizontalForm
{
    public function init()
    {
        $this->addElement('text', 'email', array(
            'label' => 'E-mail'
        ));

        $this->addElement('text', 'password', array(
            'label' => 'Password'
        ));

        $this->addDisplayGroup(
            array('email', 'password'),
            'login',
            array(
                'legend' => 'Account info'
            )
        );
    }
}

新表单元素

为了利用Twitter Bootstrap按钮惊人的外观和感觉，创建了一个新的特殊表单元素来设置所有适当的类名称。

提交按钮

为了配置提交按钮的外观和感觉，支持几个选项

buttonType (字符串) 此选项指定将渲染的按钮类型。Twitter Bootstrap 3默认支持七种按钮类型
- default（显然，默认按钮样式）
- primary
- info
- success
- warning
- danger
- link
禁用 (布尔值) 如果为 true，则提交按钮将被渲染为禁用。

<?php
class My_Bootstrap_Form extends \Bootstrap\VerticalForm
{
    public function init()
    {
        // All the other form stuff

        $this->addElement('submit', 'submit', array(
            'buttonType' => \Bootstrap\Form\Element\Submit::BUTTON_SUCCESS,
            'disabled'   => true,
            'label'      => 'Send e-mail!'
        ));
    }
}

按钮

此表单元素是提交按钮的扩展，以便在按钮内部渲染HTML。因此，它提供了与提交按钮相同的功能，以及渲染一个glyphicon作为按钮标签的能力。让我们看看。

图标 (字符串) 此选项指定按钮内使用的图标。
whiteIcon (布尔值) 此选项指定是否以白色颜色渲染图标。（默认 false）

<?php
class My_Bootstrap_Form extends \Bootstrap\HorizontalForm
{
    public function init()
    {
        // All the other form stuff

        $this->addElement('button', 'submit', array(
            'label'      => 'Send e-mail!',
            'buttonType' => \Bootstrap\Form\Element\Submit::BUTTON_SUCCESS,
            'icon'       => 'ok',
            'whiteIcon'  => true,
            'iconPosition' => \Bootstrap\Form\Element\Button::ICON_POSITION_RIGHT
        ));
    }
}

装饰器

动作装饰器

此装饰器的目的是设置适当的标记以渲染表单的提交按钮。

<?php
class My_Bootstrap_Form extends \Bootstrap\HorizontalForm
{
    public function init()
    {
        $this->addElement('button', 'submit', array(
            'label'         => 'Submit!',
            'type'          => 'submit'
        ));

        $this->addElement('button', 'reset', array(
            'label'         => 'Reset',
            'type'          => 'reset'
        ));

        $this->addDisplayGroup(
            array('submit', 'reset'),
            'actions',
            array(
                'disableLoadDefaultDecorators' => true,
                'decorators' => array('Actions')
            )
        );
    }
}

附加装饰器

此装饰器允许指定将被附加或前置到指定输入的一些内容。它可以渲染文本、一个glyphicon或一个复选框。为此，它支持几个选项，这些选项将被设置为表单元素本身。如果您传递一个Zend_Form_Element_Submit元素，它将将其放置在那里，而不包含span。

prepend (字符串) 将选项的内容前置到生成的字段表单中。
append (字符串) 将选项的内容附加到生成的字段表单中。

这两个选项的内容可以是包含一些文本的字符串、一个数组或一个Zend_Config类的实例或一个glyphicon。当

指定“文本”时，将按原样渲染。
指定Zend_Config或数组时，将生成一个复选框。注意，如果数组或Zend_Config实例中传递了“active”键，则将渲染前置或附加的框带有绿色背景。

<?php
class My_Bootstrap_Form extends \Bootstrap\HorizontalForm
{
    public function init()
    {
        // Some text
        $this->addElement('text', 'input1', array(
            'label'   => 'E-mail',
            'prepend' => '@'
        ));

        // A checkbox
        $this->addElement('text', 'input2', array(
            'label' => '2nd E-mail',
            'prepend' => array(
                'name' => 'internalCheckbox1',
                'active' => true
            )
        ));

        // A glyphicon
        $this->addElement('text', 'input2', array(
            'label' => '2nd E-mail',
            'prepend' => '<i class="icon-envelope"></i>'
        ));
        
        // A submit button
        $submitButton = $this->createElement('button', 'addButton', array(
            'label' => 'Add'
        );
        
        $this->addElement('text', 'input2', array(
            'label' => '2nd E-mail',
            'prepend' => $submitButton
        ));
    }
}

字段大小装饰器

为了指定输入的大小，在装饰器链的开始处执行一个特殊的装饰器来设置适当的类名。输入的大小可以通过元素的属性size来设置。

<?php
class My_Bootstrap_Form extends \Bootstrap\HorizontalForm
{
    public function init()
    {
        // Some text
        $this->addElement('text', 'input1', array(
            'label'     => 'E-mail',
            'dimension' => 5
        ));
    }
}

安装

为了使用Bootstrap 3，需要在您的资源目录中安装所需的资源。确保正确安装glyphicons。一旦安装了所有这些内容，创建/修改布局视图脚本，并添加对Bootstrap CSS的引用。

<!-- /application/layouts/scripts/default.phtml -->
<?php $this->headLink()->appendStylesheet('/css/bootstrap.css'); ?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <?php echo $this->headLink(); ?>
    </head>

    <body>
        <!-- All your HTML stuff -->
    </body>
</html>

就是这样。现在您可以从创建表单并按照之前展示的方式渲染它们开始，您将获得漂亮的表单！

贡献者

adepretis ad@25th-floor.com
rafalgalka http://blog.modernweb.pl
lrobert http://www.leerobert.ca
marcelaraujo admin@marcelaraujo.me
mardagg666 https://github.com/Mardagg666

tavy315 / twitter-bootstrap-zend-form-decorator

维护者

详细信息