Question

似乎修改表单的呈现方式变得更加复杂，因为ZF1 - 再也没有装饰器了。我想要实现的是在正常的输入表单字段中添加一个jquery滑块。

正常的输入字段对我来说如下：

<label>Your Net Income</label>
<input type="text" name="net_income" value="1500">

我想要的是这样的：

<label>Your Net Income</label>
<div id="slider" class="slider"></div>
<div class="slider-input">
    <input type="text" name="net_income" value="1500">
</div>

因此，在幻灯片的输入字段中添加了一个div。另外，我需要执行一些JS来初始化滑块，如下所示：

var $slider = $("#slider");
if ($slider.length > 0) {
    $slider.slider({
        min: 500,
        max: 5000,
        step: 100,
        value: 1500,
        orientation: "horizontal",
        range: "min",
        slide: function(event, ui) {
            $("input").val(ui.value);
        }
    });
}

在ZF2中完成此操作的最佳方法是什么？我看到了几个选项：

通过jquery修改表单并添加滑块。
在ZF2中创建自定义表单元素
在ZF中重载并修改输入表单元素

有什么建议吗？通过JS修改似乎不是很强大。但是创建自定义表单元素似乎很复杂。在ZF2中，我可能只是添加了一个装饰器或替换了单个元素的视图。但现在这种形式并不是很方便。

感谢您的任何想法

Answer 1

如果您不使用formCollection()，则非常简单。在你看来就这样做：

<?= $this->formLabel($element); ?>
<div id="slider" class="slider"></div>
<div class="slider-input">
  <?= $this->formElement($element); ?>
</div>

如果您确实使用formCollection()，只需遍历表单：

foreach ($form as $element)
{
  if($element->getName() == 'net_income')
  {
    // do as I mentioned
  }
  else
  {
    // do something else
  }
}

更多： http://framework.zend.com/manual/current/en/modules/zend.form.view.helpers.html http://framework.zend.com/manual/current/en/modules/zend.form.elements.html

在ZF2中将jquery滑块添加到表单域

1 个答案: