0

qtip2 ajax-tooltips を使用しています。これはスクリプトです ( http://jsfiddle.net/craga89/L6yq3/ ):

// Create the tooltips only when document ready
$(document).ready(function()
{
 // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
 $('a').each(function() {
     $(this).qtip({
        content: {
            text: 'Loading...',
            ajax: {
                url: 'http://qtip2.com/demos/data/owl',
                loading: false
            }
        },
        position: {
            viewport: $(window)
        },
        style: 'qtip-wiki'
     });
 });
 });

スクリプトを使用するには、ajax ファイルのリンクが必要です。

<a href='http://qtip2.com/demos/data/snowyowl'>Snowy Owl</a>

リンクなしで ajax ファイルを呼び出したいのですが、data-id 属性を使用すると、次のようになります。

<a href="#" data-id="1">Snowy Owl</a>

作り方は？

より明確にするために、次のコードのようなもの：

var urlFormat = "/content/web/tooltip/ajax/ajaxContent{0}.html";

            $(document).ready(function() {
                $("#products").qtip({
                    filter: "a",
                    content: {
                        url: "/content/web/tooltip/ajax/ajaxContent1.html"
                    },
                    width: 520,

                    position: "top",
                    requestStart: function(e) {
                        e.options.url = qtip.format(urlFormat, e.target.data("id"));
                    }
                });

                $("#products").find("a").click(false);
            });
4

1 に答える 1

0

あなたが求めているのはこれだと思います：

// Create the tooltips only when document ready
 $(document).ready(function()
 {
     // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
     $('a').each(function() {
         $(this).qtip({
            content: {
                text: 'Loading...',
                ajax: {
                    url: $(this).data('id'),
                    loading: false
                }
            },
            position: {
                viewport: $(window)
            },
            style: 'qtip-wiki'
         });
     });
 });

ホバーされたリンクの data-id 属性を使用するように、固定 URL から url パラメーターを変更したことに注意してください。url: $(this).data('id'),

それもうまくいくようです：http://jsfiddle.net/L6yq3/492/

編集
して、自分でURLを作成し、そこにIDを追加することができます。このようなもの：
url: 'http://path/to/ajax/script-' + $(this).data('id'),

または、サーバーに (php) スクリプトがある場合は、id をクエリ変数として追加し、そこで処理を行うことができます。このようなもの
url: 'http://path/to/ajax/script.php?id=' + $(this).data('id'),

に置き換えて属性でidはなく、実際の属性を使用することもできることに注意してください。data-id$(this).data('id')$(this).attr('id')

わかりますか？

于 2013-09-27T19:38:07.640 に答える