【问题标题】:Using custom decorators to wrap form elements inside div's with zend_form使用自定义装饰器通过 zend_form 将表单元素包装在 div 中
【发布时间】:2012-02-27 12:03:21
【问题描述】:

我正在寻找一种将 zend_form 表单元素包装在 div 中的方法。 我可以通过在表单类中使用下面的代码来获得所需的结果。

                $element->setDecorators(array(
                'ViewHelper',
                'Description',
                'Errors',
                array(array('top-left' => 'HtmlTag'), array('tag' => 'div', 'class' => 'content-border-corner-top-left')),
                array(array('top-right' => 'HtmlTag'), array('tag' => 'div', 'class' => 'content-border-corner-top-right')),
                array(array('top-center' => 'HtmlTag'), array('tag' => 'div', 'class' => 'content-border-top-center')),
                array(array('bottom-left' => 'HtmlTag'), array('tag' => 'div', 'class' => 'content-border-corner-bottom-left')),
                array(array('bottom-right' => 'HtmlTag'), array('tag' => 'div', 'class' => 'content-border-corner-bottom-right')),
                array(array('bottom-center' => 'HtmlTag'), array('tag' => 'div', 'class' => 'content-border-bottom-center')),
                array(array('left' => 'HtmlTag'), array('tag' => 'div', 'class' => 'content-border-left')),
                array(array('right' => 'HtmlTag'), array('tag' => 'div', 'class' => 'content-border-right')),
                array(array('dd' => 'HtmlTag'), array('tag' => 'dd', 'id' => $element->getLabel().'-element')),
                array('Label', array('tag' => 'dt')),
            ));

我想知道是否可以使用自定义装饰器来实现所需的结果。

上面的代码很容易实现,但必须为每个元素完成。 那么我想,我可以使用自定义装饰器来达到同样的效果吗?

到目前为止我还不能,这就是我在这里问这个问题的原因。

::编辑::

我忘了提及到目前为止我一直在尝试做的事情。 我一直在尝试分解自定义装饰器中的表单。 但到目前为止我还没有运气。

class Form_Decorator_Borders extends Zend_Form_Decorator_Abstract

{

public function render($content)
{
    $element    = $this->getElement();          // get form
    $elements   = $element->getElements();      // get form elements
    $placement  = $this->getPlacement();
    $name       = htmlentities($element->getFullyQualifiedName());
    $id         = htmlentities($element->getId());

    foreach ($elements as $k => $v) {
        if (is_object($v) && get_class($v) == "Zend_Form_Element_Text") {
            $elements[$k]->setDecorators(array(
                'ViewHelper',
                'Description',
                'Errors',
                array(array('top-left' => 'HtmlTag'), array('tag' => 'div', 'class' => 'content-border-corner-top-left')),
                array(array('top-right' => 'HtmlTag'), array('tag' => 'div', 'class' => 'content-border-corner-top-right')),
                array(array('top-center' => 'HtmlTag'), array('tag' => 'div', 'class' => 'content-border-top-center')),
                array(array('bottom-left' => 'HtmlTag'), array('tag' => 'div', 'class' => 'content-border-corner-bottom-left')),
                array(array('bottom-right' => 'HtmlTag'), array('tag' => 'div', 'class' => 'content-border-corner-bottom-right')),
                array(array('bottom-center' => 'HtmlTag'), array('tag' => 'div', 'class' => 'content-border-bottom-center')),
                array(array('left' => 'HtmlTag'), array('tag' => 'div', 'class' => 'content-border-left')),
                array(array('right' => 'HtmlTag'), array('tag' => 'div', 'class' => 'content-border-right')),
                array(array('dd' => 'HtmlTag'), array('tag' => 'dd', 'id' => $elements[$k]->getLabel().'-element')),
                array('Label', array('tag' => 'dt')),
            ));
        }
    }

    $element->setElements($elements);
    $this->setElement($element);

    $this->setElement($element);
    return $this->getElement()->getView()->render($name);
}

}

【问题讨论】:

  • 这在 html 中应该是什么样子?
  • 我已将样本上传到 imageshack:img28.imageshack.us/img28/6411/sampledl.png
  • 代码应该在输入元素周围创建边框,所以我有圆角,没有 CSS3 的麻烦(现在)。

标签: zend-framework zend-form zend-decorators


【解决方案1】:

更容易为您的边框创建具有私有属性的扩展 Zend_Form 类。

class Custom_Form extends Zend_Form
{
    /**
     * array
     */
    private $_borderDecorators = array(/*...*/);
}

然后为 Custom_Form 的元素做接下来的事情(如果装饰器设置在从 Custom_Form 扩展的类中):

$element->setDecorators($this->_borderDecorators);

【讨论】:

  • 这是一个非常好的提示,我感谢您。之前没想到(我傻)。虽然这并没有给我想要的结果。 img28.imageshack.us/img28/6411/sampledl.png 是我想要做的。
  • 你能显示你的代码吗?如果一切正常,它应该可以正常工作。
  • 私有 $_borderDecorators = array(array(array('top-left' => 'HtmlTag'),array(array('bottom-center' => 'HtmlTag'), array('tag ' => 'div', 'class' => 'content-border-left')),array(array('right' => 'HtmlTag'), array('tag' => 'div', 'class' => 'content-border-right'))); 对于元素: $keywords->addDecorators($this->_borderDecorators); 必须减少数组的数量所以可能是一个错误但忽略它. 我仍然无法看到仅将 div 包裹在输入元素周围的正确方法。它们目前包裹着不应该的 dt 和 dd 标签。
【解决方案2】:

我开始使用不同的方法。 这是我目前正在使用的,到目前为止运行良好。

public function render($content)
{
    $innerHTML = "";
    //Create a new DOM document
    $dom = new DOMDocument;
    $dom->preserveWhiteSpace = false;

    //Parse the HTML. The @ is used to suppress any parsing errors
    //that will be thrown if the $html string isn't valid XHTML.
    @$dom->loadHTML($content);

    //Get all inputs. You could also use any other tag name here,
    //like 'img' or 'table', to extract other tags.
    $eInputs = $dom->getElementsByTagName('input');

    //Iterate over the extracted dds
    foreach ($eInputs as $eInput) {
        if ($eInput->getAttribute('type') == "text") {
            $tmp_doc = new DOMDocument();
            $tmp_doc->appendChild($tmp_doc->importNode($eInput,true));
            $innerHTML .= $tmp_doc->saveHTML()." ";
        } else if ($eInput->getAttribute('type') == "password") {
            $tmp_doc = new DOMDocument();
            $tmp_doc->appendChild($tmp_doc->importNode($eInput,true));
            $innerHTML .= $tmp_doc->saveHTML()." ";
        }
    }

    $inputs = explode(" ", $innerHTML);

    foreach ($inputs as $input) {
        if (!empty($input)) {
            $input = str_replace(">", " />", $input);
            $input = substr($input, 0, -1);
            $replace = '<div class="content-border-bottom-center">
                <div class="content-border-top-center">
                    <div class="content-border-corner-bottom-right">
                        <div class="content-border-corner-bottom-left">
                            <div class="content-border-corner-top-right">
                                <div class="content-border-corner-top-left">
                                    '.$input.'
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>';
            $content = str_replace($input, $replace, $content);
        }
    }
    return $content;
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-11-02
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多