logo标签列表

在移动设备上禁用 qtip2

jqueryjquery-mobileqtip2
4
我正在寻找一种方法，在移动设备上查看我的网站时禁用qtip2工具提示。在桌面浏览器中，当鼠标悬停时工具提示会出现，在移动设备上它们会在文本输入被触摸时弹出（大多数是通过title=""绑定的）。我只能通过触摸其他地方来让它消失，我怀疑用户在被它惹恼之前不会想到这一点。
我已经尝试过查看API以及在SO上搜索，但我遇到的少数解决方案对我并没有起作用。以下是我尝试过的内容：
$('[title!=""]').qtip({// Grab elements with a title attribute that isn't blank.
        style: 'qtip-tipsy',
        position: {
             target: 'mouse', // Track the mouse as the positioning target
             adjust: { x: 5, y: 15 } // Offset it slightly from under the mouse
        }
    }); 

//check window size on page load. 
    if ($(window).width() < 960) {
    alert('Less than 960');
    //$('[title!=""]').qtip('hide').qtip('disable');
    $('[title!=""]').qtip('destroy', true); // Immediately destroy all tooltips belonging to the selected elements
}
else {
   //alert('More than 960');
}
});

在测试时，当我将浏览器缩小到960以下并刷新时，警报会触发，因此它似乎正确地读取了该代码。 我尝试了两种方法，第一种是使用hide和disable（当前在上面的示例中被注释掉，同时我尝试了下一个），第二种是使用'destroy' 我还尝试在'position'的最后一个右括号和结束});之前直接添加窗口大小代码。

然后我尝试直接访问api，但我不知道是否做得正确，也找不到包含所有所需代码的示例。 这是我尝试过的：

   var tooltips = $('[title!=""]').qtip({// Grab elements with a title attribute that isn't blank.
    style: 'qtip-tipsy',
    position: {
               target: 'mouse', // Track the mouse as the positioning target
               adjust: { x: -5, y: -15 } // Offset it slightly from under the mouse
          }
   }); 
    // Grab the first element in the tooltips array and access it's qTip API
    var api = tooltips.qtip('api'); 
    //check window size on page load. 
        if ($(window).width() < 960) {
        alert('Less than 960');

    $tooltips.qtip('destroy', true); // Immediately destroy all tooltips belonging to the selected elements
}
else {
   //alert('More than 960');
}
});

我已经花了几天时间在这个问题上（还有其他一些无法解决的问题，比如用按钮切换工具提示的开关，但我专注于一件事情）。我希望一些更擅长编码的人能看出我哪里出了错。

你正在使用jqm吗？尝试这个代码：if ($(window).width() < 960) { $('[title!=""]').on("click', function () { return false; }); } - Omar
我正在使用jqm。如果窗口宽度为移动尺寸，则希望qtips根本不加载。除此之外，关于格式的一些问题会导致语法错误。就像我说的，我对此并不是很专业，所以可能我只是漏掉了一些显而易见的东西。我已经尝试了各种方式（有和没有结束大括号，替换$tooltips行为此行），但它报告了一个语法错误。 - Blue BOmb
刚才本来想编辑上一条评论，但是似乎只能在5分钟内编辑，而我正在尝试... 等等！你在click的开头有一个双引号和一个单引号在后面...我现在试试。 不行。 当我点击任何应该在桌面浏览器中显示提示的内容时，仍然会在移动设备上显示提示。 - Blue BOmb
你有没有找到这个问题的答案？我也在苦苦挣扎... - pinkp
3个回答
2
我最终使用了这段代码，以便在非移动设备上只加载qtip的部分代码，似乎效果很好。从如果移动设备禁用某些脚本中借鉴而来。
<script type="text/javascript">
$(document).ready(function() {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
}else
{
$('[title!=""]').qtip({
     position: {
         target: 'mouse', // Track the mouse as the positioning target
         adjust: { x: 5, y: 5 } // Offset it slightly from under the mouse
     }
 })
}
});
</script>

显然，您可以在其中设置任何qtip设置，但是将其从页面中删除只会将我的qtip区域转换为链接而不是工具提示。这就是我想要的。您可以将此代码用于任何JavaScript禁用/启用移动端到桌面端..

0
不要依靠init或doc ready，因为它不能处理响应式/调整大小或类似的DOM更改。相反，我建议使用一个“监听器”来动态检查您需要什么，并使其他脚本可用。首先使用content将CSS媒体查询追加到body的:after中，然后使用resize（或其他）事件来监视它，然后根据当前内容中发现的内容减轻需要更改的内容。
要点：https://gist.github.com/dhaupin/f01cd87873092f4fe2fb8d802f9514b1。
Fiddle：https://jsfiddle.net/Dhaupin/nw7qbdzx/。
因此，基本上在正常的qtip2 init之后，您可以使用该监听器禁用其状态而无需销毁（如果例如插入监视器和鼠标，则允许重新启用）。

以下是一些示例链接中的qtip状态，它们会被包装在一个函数检查中以防发生意外情况;)

  • 禁用 qtip：$（'[data-hasqtip]'）.qtip（'hide'）.qtip（'disable'）;
  • 重新启用 qtip：$（'[data-hasqtip]'）.qtip（'enable'）;

由于监听器正在为<html>标记放置标志，您还可以监视来自/因其他事件、函数等引起的ui_样式属性。

-1

这应该可以工作：

.qtip {
    display: none !important;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接