jQuery UI 工具提示小部件中的 AJAX 内容

Posted

技术标签:

【中文标题】jQuery UI 工具提示小部件中的 AJAX 内容【英文标题】:AJAX content in a jQuery UI Tooltip Widget 【发布时间】:2012-10-21 22:24:35 【问题描述】:

jQuery UI 1.9 中有一个新的 Tooltip Widget,其API docs 提示可以在其中显示 AJAX 内容,但没有任何进一步的细节。我想我可以通过同步和阻塞请求来完成类似的事情,但这不是我想要的。

如何让它显示通过异步 AJAX 请求检索到的任何内容?

【问题讨论】:

【参考方案1】:

这是来自my blog的jqueryui Tootip小部件的ajax示例。希望对您有所帮助。

$(document).tooltip(
    items:'.tooltip',
    tooltipClass:'preview-tip',
    position:  my: "left+15 top", at: "right center" ,
    content:function(callback) 
        $.get('preview.php', 
            id:id
        , function(data) 
            callback(data); //**call the callback function to return the value**
        );
    ,
);

【讨论】:

它可以工作,但我不明白为什么做一个回调(数据)会在这里返回数据?这很令人困惑,因为对我来说,它看起来像回调,作为一个参数,突然进行函数调用..【参考方案2】:

这显然不是一个完整的解决方案,但它展示了在open 事件期间动态获取数据的基本技术:

$('#tippy').tooltip(
    content: '... waiting on ajax ...',
    open: function(evt, ui) 
        var elem = $(this);
        $.ajax('/echo/html').always(function() 
            elem.tooltip('option', 'content', 'Ajax call complete');
         );
    
);

查看Fiddle

【讨论】:

我注意到,在小提琴上,如果你将鼠标快速移到带有工具提示的文本上,工具提示可能会在“关闭”模式下变得糟糕。我不知道这是工具提示中的错误,与 ajax 代码的交互,还是 jquery-ui 1.9 和 jsFiddle 的 jQuery 1.8.x 之间的版本不兼容。 实际上你可以用这个做一些有趣的事情,但我必须更多地了解你的具体用例才能提供更详细的建议。 y,你可以用这个做很多事情,我使用隐藏的 div 作为工具提示,在打开的功能中,我只在特定的隐藏 div 为空时才调用 ajax。【参考方案3】:

使用工具提示“内容”选项将文本“AJAX”到工具提示中时要注意的一点是,文本检索会在工具提示初始化中引入延迟。

如果鼠标在带有工具提示的 dom 节点上快速移动,则鼠标移出事件可能会在初始化完成之前发生,在这种情况下,工具提示尚未侦听该事件。

结果是显示工具提示,直到鼠标移回节点并再次移出时才会关闭。

虽然它会产生一些可能不需要的网络开销,但请考虑在配置工具提示之前检索工具提示文本。

在我的应用程序中,我使用自己的 jquery 扩展来进行 AJAX 调用、解析结果并初始化所有工具提示,显然您可以使用 jquery 和/或您自己的扩展,但要点是:

使用图像标签作为工具提示锚点,要检索的文本由名称属性标识:

<img class="tooltipclassname" name="tooltipIdentifier" />

使用调用扩展方法配置所有工具提示:

$(".tooltipclassname").extension("tooltip");

在扩展的 tooltip 方法内:

    var ids = "";
    var nodes = this;

    // Collect all tooltip identifiers into a comma separated string
    this.each(function() 
        ids = ids + $(this).attr("name") + ",";
    );

    // Use extension method to call server
    $().extension("invoke", 
    
        // Model and method identify a server class/method to retrieve the tip texts
        "model": "ToolTips", 
        "method": "Get",

        // Send tooltipIds parameter 
        "parms":  [ new myParmClass("tipIds", ids ) ],

        // Function to call on success. data is a JSON object that my extension builds
        // from the server's response
        "successFn": function(msg, data) 

            $(nodes).each(function()

                // Configure each tooltip:
                // - set image source
                // - set image title (getstring is my extension method to pull a string from the JSON object, remember that the image's name attribute identifies the text)
                // - initialise the tooltip
                $(this).attr("src", "images/tooltip.png")
                    .prop("title", $(data).extension("getstring", $(this).attr("name"))) 
                    .tooltip();
            );
        ,
        "errorFn": function(msg, data)  
            // Do stuff
        
    ); 

    // Return the jquery object
    return this;

【讨论】:

【参考方案4】:

这是一个使用带有 jQ​​uery UI 工具提示的 jsfiddle "/echo/html/" AJAX 调用的示例。

HTML:

<body>
<input id="tooltip" title="tooltip here" value="place mouse here">
</body>

javascript

// (1) Define HTML string to be echo'ed by dummy AJAX API
var html_data = "<b>I am a tooltip</b>";

// (2) Attach tooltip functionality to element with id == tooltip
// (3) Bind results of AJAX call to the tooltip
// (4) Specify items: "*" because only the element with id == tooltip will be matched
$( "#tooltip" ).tooltip(
    content: function( response ) 
        $.ajax( 
        url: "/echo/html/",
        data: 
                'html': html_data
            ,
        type: "POST"
        )
          .then(function( data ) 
             response( data );
          );
    ,
    items: "*"
);

这是jsfiddle 上的示例:

【讨论】:

以上是关于jQuery UI 工具提示小部件中的 AJAX 内容的主要内容,如果未能解决你的问题,请参考以下文章

仅为 QTabWidget 中的选项卡显示工具提示,而不是整个小部件

用于颜色选择的jQuery UI小部件(类似于Microsoft Office 2010中的小部件)。

ASP.NET MVC 中的 ASP.NET AJAX 与 jQuery

jQuery UI Dialog 小部件是不是有 Vanilla JS 替代品[关闭]

jQuery UI 可排序:如果更新回调使 AJAX 调用失败,则恢复更改?

寻找 js(可能是 jQuery)时区(仅限)控制 UI 小部件