qTip 不适用于 Zend答案

【问题标题】：qTip not working with ZendqTip 不适用于 Zend
【发布时间】：2014-04-29 12:46:07
【问题描述】：

我正在尝试使用 qTip 2 在 Zend 表单中添加一个帮助按钮。该按钮是一个简单的图像，我想在单击图像时打开一个弹出窗口。

这是我的代码：

在Booostrap.php中：

protected function _initView() {
    ...
    $view->headLink()
            ->appendStylesheet('/css/jquery/smoothness/jquery-ui-1.10.1.custom.min.css')
            ->appendStylesheet('/css/jquery/jquery.qtip.min.css');
}

protected function _initJQuery() {
    ...
    $view->jQuery()
            ->setLocalPath('/js/jquery/jquery-1.9.1.min.js')                
            ->setUiLocalPath('/js/jquery/jquery-ui-1.10.1.custom.min.js')
            ->addJavascriptFile('/js/jquery.qtip.min.js')
            ->enable()
            ->uiEnable();
}

在我看来：

<?php
    $this->headscript()->appendScript('$(data-tooltip!="").qtip({content: {attr: \'data-tooltip\'}});');
?>
...
<img data-tooltip="thing" src="/images/repo/help-22x22.png"/>

以及在我的浏览器中呈现的结果：

<link href="/css/jquery/smoothness/jquery-ui-1.10.1.custom.min.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/css/jquery/jquery.qtip.min.css" media="screen" rel="stylesheet" type="text/css" >
...
<script type="text/javascript" src="/js/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/js/jquery/jquery-ui-1.10.1.custom.min.js"></script>
<script type="text/javascript" src="/js/jquery.qtip.min.js"></script>
...
<script type="text/javascript">
    //<!--
$(data-tooltip!="").qtip({content: {attr: 'data-tooltip'}});    //-->
</script>
...
<img data-tooltip="truc" src="/images/repo/help-22x22.png"/>

这是我想要的。问题是，工具提示没有出现。根据 Javascript 控制台，当我单击图片时甚至不会触发事件。所以我的想法是错误的，但我不明白为什么。有什么想法吗？

【问题讨论】：

标签： javascript php jquery zend-framework qtip2

【解决方案1】：

我认为问题出在：$(data-tooltip!="") 而不是$('[data-tooltip!=""]')。

另一个问题是你的电话是在标签 img 之前所以使用InlineScriptì而不是headscript

为了完成，我认为应该在选择器中精确地命名标签（img）。尝试替换

$this->headscript()->appendScript('$(data-tooltip!="").qtip({content: {attr: \'data-tooltip\'}});');

由

$this->InlineScript()->appendScript('$(\'img[data-tooltip!=""]\').qtip({content: {attr: \'data-tooltip\'}});');

【讨论】：

您的第一个解决方案与 Jai 的相结合，实际上是有效的。当我添加缺少的语法并使用 $(document).ready() 时，它起作用了。我的代码中有 2 个错误，并且一次只测试了一个更正，所以它从来没有工作过。

【解决方案2】：

不确定，但您的 qtip 初始化必须在 doc ready：

<?php
   $this->headscript()->appendScript('$(function(){// here qtip code});');
?>

【讨论】：

我已经尝试过了，但无济于事。不过，我认为 JQuery 生命周期应该由 Zend 以某种方式管理，如果有人有领导的话。
好的，它可以工作，如上所述。您和 doydoy44 各自提供了一个解决方案。
很高兴这对您有所帮助。实际上我正要发布相同的内容，但没有时间。