wendrowycz/zend1-bootstrap3

此包已被废弃，不再维护。没有建议的替代包。

Twitter Bootstrap v.3 表单扩展用于 Zend Framework v.1

维护者

详细信息

github.com/wendrowycz/zend1-bootstrap3

源代码

问题

安装: 114

依赖: 0

建议者: 0

安全: 0

星标: 1

关注者: 3

分支: 22

开放问题: 0

1.0.9 2016-09-27 11:14 UTC

Requires

MIT 302acb3f15dbf9a60a3f4bf3c055021298c2dac8

formbootstrapzendtwitterZF1zend formzend form decoratorstwitter bootstrapzend form elements

This package is auto-updated.

Last update: 2022-12-06 20:05:42 UTC

README

#Twitter Bootstrap 3 Form for Zend Framework 1 extended

该库最初由 @zfbase 创建并由 @wendrowycz 分支，这是一个扩展版本，添加了HTML元素，带有标签的行内表单选项，form-group类选项等。

表单类型

该库支持所有Bootstrap 3表单类型。

单PHP代码

class Application_Form_Example extends Twitter_Bootstrap3_Form_*
{
    public function init()
    {
        $email = new Twitter_Bootstrap3_Form_Element_Email('email');
        $email->setLabel('Email')->setAttrib('placeholder', 'Email');

        $password = new Zend_Form_Element_Password('password');
        $password->setLabel('Password')->setAttrib('placeholder', 'Password');

        $checkbox = new Zend_Form_Element_Checkbox('checkbox');
        $checkbox->setLabel('Remember me');

        $submit = new Zend_Form_Element_Submit('submit');
        $submit->setLabel('Sign in');

        $this->addElements(array(
            $email,
            $password,
            $checkbox,
            $submit

        ));
    }
}

或

class Application_Form_Example extends Twitter_Bootstrap3_Form_*
{
    public function init()
    {
        $this->addElement('email', 'email', array(
            'label' => 'Email',
            'placeholder' => 'Email',
        ));
        
        $this->addElement('password', 'password', array(
            'label' => 'Password',
            'placeholder' => 'Password',
        ));
        
        $this->addElement('checkbox', 'checkbox', array(
            'label' => 'Remember me',
        ));
        
        $this->addElement('submit', 'submit', array(
            'label' => 'Sign in',
        ));
    }
}

为垂直表单生成的HTML

表单必须继承自类 Twitter_Bootstrap3_Form_Vertical。

<form enctype="application/x-www-form-urlencoded" class="form-vertical" action="" method="post">
    <div class="form-group">
        <label for="email" class="control-label optional">Email</label>
        <input type="email" name="email" id="email" value="" placeholder="Email" class="form-control">
    </div>
    <div class="form-group">
        <label for="password" class="control-label optional">Password</label>
        <input type="password" name="password" id="password" value="" placeholder="Password" class="form-control">
    </div>
    <div class="form-group">
        <div class="checkbox">
            <label>
            <input type="hidden" name="checkbox" value="0">
            <input type="checkbox" name="checkbox" id="checkbox" value="1">
            Remember me
            </label>
        </div>
    </div>
    <div class="form-group">
        <input type="submit" name="submit" id="submit" value="Sign in" class="btn btn-primary">
    </div>
</form>

为水平表单生成的HTML

表单必须继承自类 Twitter_Bootstrap3_Form_Horizontal。

<form enctype="application/x-www-form-urlencoded" class="form-horizontal" action="" method="post">
    <div class="form-group">
        <label for="email" class="optional control-label col-sm-2">Email</label>
        <div class="col-sm-10">
            <input type="email" name="email" id="email" value="" placeholder="Email" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label for="password" class="optional control-label col-sm-2">Password</label>
        <div class="col-sm-10">
            <input type="password" name="password" id="password" value="" placeholder="Password" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-10 col-sm-offset-2">
            <div class="checkbox">
                <label>
                    <input type="hidden" name="checkbox" value="0">
                    <input type="checkbox" name="checkbox" id="checkbox" value="1">
                    Remember me
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-10 col-sm-offset-2">
            <input type="submit" name="submit" id="submit" value="Sign in" class="btn btn-primary">
        </div>
    </div>
</form>

为行内表单生成的HTML

表单必须继承自类 Twitter_Bootstrap3_Form_Inline。

<form enctype="application/x-www-form-urlencoded" class="form-inline" action="" method="post">
    <div class="form-group">
        <label for="email" class="sr-only optional">Email</label>
        <input type="email" name="email" id="email" value="" placeholder="Email" class="form-control">
    </div>
    <div class="form-group">
        <label for="password" class="sr-only optional">Password</label>
        <input type="password" name="password" id="password" value="" placeholder="Password" class="form-control">
    </div>
    <div class="form-group">
        <div class="checkbox">
            <label>
                <input type="hidden" name="checkbox" value="0">
                <input type="checkbox" name="checkbox" id="checkbox" value="1">
                Remember me
            </label>
        </div>
    </div>
    <div class="form-group">
        <input type="submit" name="submit" id="submit" value="Sign in" class="btn btn-primary">
    </div>
</form>

要使用带有标签的行内表单，可以使用类 Twitter_Bootstrap3_Form_Inlinelabel。

如果您正在使用行内表单，则当然不会设置尺寸。如果您需要尺寸，可以使用如下的formgroupclass属性添加它们

		$count = new Twitter_Bootstrap3_Form_Element_Number('count');
		$count->setAttrib('formgroupclass','col-xs-6');

这将给出以下输出

    <div class="form-group col-xs-6">
        <input type="number" name="count" id="count" value="" class="form-control">
    </div>

支持的控件

该库支持所有Zend Framework 1和Bootstrap 3表单元素。

所有示例均针对垂直表单。

输入

最常用的表单控件，基于文本的输入字段。包括对以下所有HTML5类型的支持：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

<div class="form-group">
    <label for="text" class="control-label optional">Text</label>
    <input type="text" name="text" id="text" value="" class="form-control" placeholder="Text input">
</div>
$this->addElement('text', 'text', array(
    'label' => 'Text',
    'placeholder' => 'Text input',
));

文本区域

<div class="form-group">
    <label for="textarea" class="control-label optional">Textarea</label>
    <textarea name="textarea" id="textarea" rows="4" class="form-control" cols="80">Textarea</textarea>
</div>
$this->addElement('textarea', 'textarea', array(
    'label' => 'Textarea',
    'value' => 'Textarea',
    'rows' => 4,
));

复选框和单选按钮

一个复选框

<div class="form-group">
    <div class="checkbox">
        <label>
            <input type="hidden" name="checkbox1" value="unchecked Value">
            <input type="checkbox" name="checkbox1" id="checkbox" value="checked Value">
            Checkbox
        </label>
    </div>
</div>
$this->addElement('checkbox', 'checkbox', array(
    'label' => 'Checkbox',
    'checkedValue' => 'checked Value',
    'uncheckedValue' => 'unchecked Value',
));

多选框

<div class="form-group">
    <div class="checkbox">
        <label>
            <input type="checkbox" name="multiCheckbox[]" id="multiCheckbox-option1" value="option1">
            Option one is this and that — be sure to include why it's great
        </label>
    </div>
    <div class="checkbox disabled">
        <label>
            <input type="checkbox" name="multiCheckbox[]" id="multiCheckbox-option2" value="option2" disabled="disabled">
            Option two is disabled
        </label>
    </div>
</div>
$this->addElement('multiCheckbox', 'multiCheckbox', array(
    'multiOptions' => array(
        'option1' => 'Option one is this and that &mdash; be sure to include why it\'s great',
        'option2' => 'Option two is disabled',
    ),
    'disable' => array('option2'),
    'escape' => false,
));

单选按钮

<div class="form-group">
    <label for="radio" class="control-label optional">Radio</label>
    <div class="radio">
        <label>
            <input type="radio" name="radio" id="radio-option1" value="option1" checked="checked">
            Option one is this and that — be sure to include why it's great
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="radio" id="radio-option2" value="option2">
            Option two can be something else and selecting it will deselect option one
        </label>
    </div>
    <div class="radio disabled">
        <label>
            <input type="radio" name="radio" id="radio-option3" value="option3" disabled="disabled">
            Option three is disabled
        </label>
    </div>
</div>
$this->addElement('radio', 'radio', array(
    'multiOptions' => array(
        'option1' => 'Option one is this and that &mdash; be sure to include why it\'s great',
        'option2' => 'Option two can be something else and selecting it will deselect option one',
        'option3' => 'Option three is disabled',
    ),
    'label' => 'Radio',
    'value' => 'option1',
    'disable' => array('option3'),
    'escape' => false,
));

行内多选框和单选按钮

<div class="form-group">
    <label class="checkbox-inline">
        <input type="checkbox" name="checkbox[]" id="checkbox-1" value="1">One
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" name="checkbox[]" id="checkbox-2" value="2">Two
    </label>
</div>
<div class="form-group">
    <label class="radio-inline">
        <input type="radio" name="radio" id="radio-1" value="1">One
    </label>
    <label class="radio-inline">
        <input type="radio" name="radio" id="radio-2" value="2">Two
    </label>
</div>
$this->addElement('multiCheckbox', 'checkbox', array(
    'multiOptions' => array(
        '1' => 'One',
        '2' => 'Two',
    ),
    'inline' => true,
));

$this->addElement('radio', 'radio', array(
    'multiOptions' => array(
        '1' => 'One',
        '2' => 'Two',
    ),
    'inline' => true,
));

选择框

单个值

<div class="form-group">
    <label for="select" class="control-label optional">Select</label>
    <select name="select" id="select" class="form-control">
        <option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
    </select>
</div>
$this->addElement('select', 'select', array(
    'label' => 'Select',
    'multiOptions' => array(
        1 => 'one',
        2 => 'two',
        3 => 'three',
    ),
));

多个

<div class="form-group">
    <label for="multiselect" class="control-label optional">MultiSelect</label>
    <select name="multiselect[]" id="multiselect" multiple="multiple" class="form-control">
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
    </select>
</div>
$this->addElement('multiselect', 'multiselect', array(
    'label' => 'MultiSelect', 
    'multiOptions' => array(
        1 => 'January',
        2 => 'February',
        3 => 'March',
        4 => 'April',
        5 => 'May',
        6 => 'June',
        7 => 'July',
        8 => 'August',
        9 => 'September',
        10 => 'October',
        11 => 'November',
        12 => 'December',
    ),
));

按钮

支持按钮类型：button、submit、reset和image。

<div class="form-group">
    <button name="button" id="button" type="button" class="btn btn-default">button</button>
</div>
<div class="form-group">
    <input type="submit" name="submit" id="submit" value="submit" class="btn btn-primary">
</div>
<div class="form-group">
    <input type="reset" name="reset" id="reset" value="reset" class="btn btn-default">
</div>
<div class="form-group">
    <input type="image" name="image" id="image" src="/button.png" alt="">
</div>
$this->addElement('button', 'button', array(
    'label' => 'button',
)); 

$this->addElement('submit', 'submit', array(
    'label' => 'submit',
)); 

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

$this->addElement('image', 'image', array(
    'src' => '/button.png',
));

简单文本

元素static是元素note的别名。

<div class="form-group">
    <label for="static" class="control-label optional">Static</label>
    <p id="static" class="form-control-static">Static</p>
</div>
$this->addElement('static', 'static', array(
    'label' => 'Static',
    'value' => 'Static',
));

其他装饰元素

该库还包含用于装饰器的元素：file、hidden、hash和captcha。