0

qTip2と呼ばれるこの素晴らしいツールチップを見つけました。これまでのところそれを愛していますが、それを使用する際に問題に陥っています。

Rails3.1のセットアップでqTip2をインストールして実行することができました。ただし、qTip2のajax機能を使用しているときに問題が発生します。

qTip2 ajaxリクエストでは、スクリプトをツールチップコンテンツdiv（qTip2によって自動的に生成される）に表示する前に、スクリプトへのリンクを実行する必要があります。ここで参照しているコードを見ることができます。

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

それに関する問題は、それがRoRと実際にはうまくいかないということです。RoRを使用して宣言されたajaxリクエストはより明示的であり、更新するdivIDをrailsに明示的に伝えることができます。

次のような状況を考えると、私は次のことをする必要がありました。

  1. ツールチップのコンテンツは動的である必要があります
  2. ツールチップコンテンツのカスタムレイアウトを作成できるように、qTip2ajax機能を使用する必要がありました。

私は次のことを試しました：

  1. ロードするhtmlスニペットをパブリックフォルダーのコンテンツdivに配置します。コンテンツは正しい形式で読み込まれましたが、動的コンテンツを作成できません。このフォルダではhtml.erbファイルが機能していないようです。このフォルダの代わりに、動的コンテンツで機能するものはありますか？

  2. RoRでqTip2ajaxリクエストを使用しようとしましたが、成功しませんでした。私がしたことは、.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に応答して、動的コンテンツをで提供できますか？もちろん！おそらく、アクションを使用してSnippetControllerを設定し、showかなり標準的なRailsの規則/ルートを使用してURLを設定し/snippet/show/[ID]、ビューに必要なdivコンテンツを生成させるだけです。

于 2012-02-18T22:30:04.657 に答える