0

我发现了这个名为 qTip2 的美妙工具提示。到目前为止很喜欢它，但在使用它时遇到了问题。

我能够使用我的 Rails 3.1 设置安装并运行 qTip2。但是，当我使用 qTip2 的 ajax 功能时，我遇到了问题。

qTip2 ajax 请求需要一个指向要执行的脚本的链接，然后才能将其显示在工具提示内容 div 中（由 qTip2 自动生成）。你可以看看我在这里指的代码。

http://www.craigsworks.com/projects/qtip2/demos/#ajax

它的问题在于它与 RoR 的配合并不好。使用 RoR 声明的 ajax 请求更加明确，我可以明确告诉 rails 我想更新哪个 div id。

鉴于以下情况，我需要做以下事情：

  1. 工具提示内容必须是动态的
  2. 我需要使用 qTip2 ajax 功能，以便为工具提示内容创建自定义布局。

我确实尝试了以下方法：

  1. 将要加载的 html 片段放到 public 文件夹中的内容 div 中。内容以正确的格式加载，但我不能拥有动态内容。html.erb 文件似乎在此文件夹中不起作用。这个文件夹是否有任何替代方法可以使用但可以使用动态内容？

  2. 尝试将 qTip2 ajax 请求与 RoR 一起使用，但没有成功。我所做的是尝试在 .js 响应文件中显式定义 ajax 更新 ID（通过控制器和视图等）。但是弄清楚 qTip2 插件生成的确切 id 对我来说有点太难了。

这就是我所拥有的

html

 <a id="editor1" href="/deals_details.html.erb">

javascript

$(document).ready(function()
{

   $('#editor1').each(function()
   {
      $(this).qtip(
      {
         content: {
            text: '<img class="throbber" src="/assets/throbber.gif" alt="Loading..." />',
            ajax: {
               /*once: false*/
               url: $(this).attr('href') 

            }, 
            title: {
               text: 'qTip2 Test', 
               button: true
            }
         },
         position: {
            at: 'center', 
            my: 'center',
            viewport: $(window), 
         },
         show: {
            event: 'click',
            solo: true 
         },
         hide: 'unfocus',
         style: {
            classes: 'ui-tooltip-wiki ui-tooltip-light ui-tooltip-shadow'
         }
      })
   })

   // Make sure it doesn't follow the link when we click it
   .click(function(event) { event.preventDefault(); });
});

CSS

.ui-tooltip-wiki{
   max-width: 440px;
}

   .ui-tooltip-wiki .ui-tooltip-content{
      padding: 10px;

      line-height: 12.5px;
   }

   .ui-tooltip-wiki h1{
      margin: 0 0 7px;

      font-size: 1.5em;
      line-height: 1em;
   }

   .ui-tooltip-wiki img{ padding: 0 10px 0 0; }

   .ui-tooltip-wiki p{ margin-bottom: 9px; }
   .ui-tooltip-wiki .note{ margin-bottom: 0; font-style: italic; color: #888; }

请帮我！！:) 抱歉，如果这篇文章看起来很愚蠢，这是我关于 stackoverflow 的第一个问题。

4

1 回答 1

0

我觉得你把事情弄得太复杂了。qTip ajax 功能只是请求一个 URL，返回值是div标签内的 HTML 内容。如果您查看您提到的演示的来源，您会看到对http://www.craigsworks.com/projects/qtip2/data/burrowingowl.php的请求。如果你看看它产生了什么，它只是一个带有一些内容的 div 标签（样式看起来不同，因为它被页面的 CSS 进一步转换）。

所以问题就变成了：你能提供动态内容来div响应 Rails 中的 URL 吗？当然！也许您想设置一个带有show操作的 SnippetController，然后使用您的 URL 可能是非常标准的 Rails 约定/路由/snippet/show/[ID]，您只需让视图生成所需的div内容。

于 2012-02-18T22:30:04.657 回答