2

将 jQuery-UI dateselect 附加到 Zend Framework 2 表单元素的正确方法是什么？

是否会添加一个 appendScript，以便将 javascript 选择器添加到选择类/id 的布局的末尾？

4

2 回答 2

5

首先，我强烈建议与时俱进，开始使用Zend\Form\Element\Date. 所有不支持 Date-Input 的浏览器仍会渲染出 Input type="text"，因此这样做实际上没有任何损失。

您确实获得的优势是大多数现代浏览器都能够在那里呈现默认的 Datepicker。对于用户的可用性和舒适性，首选使用浏览器默认设置。甚至 IE10 在支持当前整洁的 CSS3 和 HTML5 方面也做得非常好。但是当然你不能确定，所以你也应该总是为旧浏览器提供一个后备。为此，我强烈建议您使用 Feature-Detection 来支持盲目地覆盖用户默认值。做得最好的图书馆可能是Modernizr。最后我会给你JS。

另一件需要注意的是，这种 JavaScript 属于文档的底部。为此，您必须在关闭</body>-Tag之前打印此内容

<?=$this->inlineScript();?>

现在在正确的地方打印你想要的脚本$action.phtml

<?php $this->inlineScript()->captureStart(); ?>
Modernizr.load({
    test: Modernizr.inputtypes.date,
    nope: [
        'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js',
        'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js', 
        'jquery-ui.css'
    ],
    complete: function () {
        $('input[type=date]').datepicker({
            dateFormat: 'yy-mm-dd'
        }); 
    }
});
<?php $this->inlineScript()->captureEnd(); ?>

那里发生的事情是 Modernizr 库将检查浏览器对 HTML5 日期输入的支持。如果浏览器无法呈现 DateSelect，则将加载适当的 JavaScript 库（jQuery、jQueryUI 和 CSS）并附加到 DOM，并且jQueryUI.datepicker()将调用类型为 的输入元素date。

此外，所有这些 JS-Stuff 都将被捕获并移动到 DOM 的 END（将添加一个脚本元素）。这样做的好处是首先渲染完整的 DOM，然后附加 JS。这意味着您的表单比 Raj 提供的示例更快可用。

于 2013-06-16T07:34:30.913 回答
4

基于2个答案，我做了更多研究并提出了自己的方法......

这是我的 layout.phtml 的顶部

$this->inlineScript()->offsetSetFile(10,$basePath . '/jquery/jquery-1.10.1.min.js');
$this->inlineScript()->offsetSetFile(12,$basePath . '/jquery-ui/ui/jquery-ui.min.js');

我已经为我所有的 javascript 分配了一个 ID，因此它们都以正确的顺序加载。

然后我在我的表单中使用它......默认情况下，它看起来像任何表单元素都将 ID 设置为其名称，这使得使用 input#name 设置样式变得容易

$this->add(array(
    'name' => 'start',
    'type'  => 'DateTime',
    'options' => array(
        'label' => 'Start Date',
        'format' => 'Y-m-d H:i P',
    ),
));

然后很容易使用以下样式设置样式，这是我的 $action.phtml ...

echo $this->form($form);

# Decorations
$this->inlineScript()->offsetSetScript(99,"
$(function() {
   $('input#start').datepicker({
       dateFormat: 'yy-mm-dd',
       showOtherMonths: true,
       selectOtherMonths: true,
   });
});
");

你可以在这里看到我已经为它分配了偏移量 99。这是我在所有模板中使用的。

于 2013-06-16T10:52:53.403 回答