【问题标题】:IE compatibility with jQuery Tools TooltipIE 与 jQuery 工具工具提示的兼容性
【发布时间】:2013-06-13 11:37:39
【问题描述】:

我已经开始使用 jQuery 工具的工具提示 (as demonstrated here) 设计页面。

我对其进行了一些修改,以允许 onClick 显示和 onClick 隐藏。在 Chrome、Safari 和 Firefox 中运行良好。

但它不适用于 IE 9,尽管 jquery 工具旨在与跨浏览器非常兼容。

我使用的脚本是:

  $(function() {
      // initialize tooltip
      var tooltip = $("#cog").tooltip({
        tipClass: 'usermenu',
        effect: 'slide', 
        bounce: true, 
        direction: 'down', 
        slideOffset: 10, 
        offset: [-5,-38], 
        delay: 500, 
        position: 'bottom center', 
        relative: true,
        events: {
              def:     ",",    // default show/hide events for an element
              input:   ",",               // for all    input elements
              widget:  ",",  // select, checkbox, radio, button
              tooltip: ","     // the tooltip element
              },
        onBeforeShow: function() {
        document.getElementById("cog_img").classList.toggle('inactive_cog_img');
        document.getElementById("cog_img").classList.toggle('active_cog_img');
        },
        onHide: function() {
        document.getElementById("cog_img").classList.toggle('inactive_cog_img');
        document.getElementById("cog_img").classList.toggle('active_cog_img');
        }
        });
    tooltip.click(function() {
        var tip = $(this).data("tooltip");
        if (tip.isShown(true))
            tip.hide();
        else
            tip.show();
    });


});

在哪里 #cog 是触发器, usermenu 是工具提示 DIV

为了现场观看,我制作了一个示例页面: http://test.theshananway.com/test.html(见右上角的齿轮)

请帮我想办法让它在 IE 中运行,或者让我知道是否有 IE 替代方案?

谢谢!

【问题讨论】:

  • 我设法通过删除“opacity:0;”使其工作来自用户菜单 div 的内联样式。但是,您会遇到覆盖齿轮图标的箭头的问题,从而难以隐藏工具提示)
  • 我无法手动控制内联不透明度,因为 jquery 插件效果是改变它的一个。有什么办法吗?

标签: javascript jquery cross-browser tooltip jquery-tools


【解决方案1】:

IE 不喜欢那个 .classList 属性...试试这个:

$('#cog_img').toggleClass("inactive_cog_img").toggleClass("active_cog_img");

而不是这个:

document.getElementById("cog_img").classList.toggle('inactive_cog_img');
document.getElementById("cog_img").classList.toggle('active_cog_img');

【讨论】:

  • 我已经更新了示例页面中的脚本。好像没解决=(
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2010-10-10
  • 1970-01-01
  • 2013-01-03
  • 1970-01-01
  • 1970-01-01
  • 2012-01-05
相关资源
最近更新 更多