README

这是一套 Zend_Form 装饰器和助手，帮助渲染任何 Zend_Form 为 Twitter 的 Bootstrap 表单所需的标记。

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

以下是一个包含一些表单字段的示例表单

<?php
class My_Bootstrap_Form extends Twitter_Bootstrap_Form_Inline
{
    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 Twitter_Bootstrap_Form_Vertical
{
    public function init()
    {
        // Do your stuff here
    }
}

水平表单

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

内联表单

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

搜索表单

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

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

<?php

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

echo $searchForm;

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

echo $navbarSearchForm;

显示组

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

<?php
class My_Bootstrap_Form extends Twitter_Bootstrap_Form_Horizontal
{
    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 按钮惊人的外观和感觉，已创建了一个新的特殊表单元素，以便设置所有适当的 class 名称。

提交按钮

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

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

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

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

按钮

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

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

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

        $this->addElement('button', 'submit', array(
            'label'      => 'Send e-mail!',
            'buttonType' => Twitter_Bootstrap_Form_Element_Submit::BUTTON_SUCCESS,
            'icon'       => 'ok',
            'whiteIcon'  => true,
            'iconPosition' => Twitter_Bootstrap_Form_Element_Button::ICON_POSITION_RIGHT
        ));
    }
}

装饰器

动作装饰器

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

<?php
class My_Bootstrap_Form extends Twitter_Bootstrap_Form_Horizontal
{
    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。当

指定'Text'时，它将按原样渲染。
指定Zend_Config或数组时，将生成一个复选框。注意，如果数组或Zend_Config实例中传递了"active"键，它将以绿色背景渲染前置或追加的框。

<?php
class My_Bootstrap_Form extends Twitter_Bootstrap_Form_Horizontal
{
    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 Twitter_Bootstrap_Form_Horizontal
{
    public function init()
    {
        // Some text
        $this->addElement('text', 'input1', array(
            'label'     => 'E-mail',
            'dimension' => 5
        ));
    }
}

安装

为了使用Bootstrap 2.0.0，需要将所需的资源安装到您的资源目录中。请确保也正确安装了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

emagister / zend-form-decorators-bootstrap

维护者

详细信息