程序员经验分享-hwhale

将 jquery 对象链接/取消链接到元素

2023-11-26

我正在使用 jquery flowplayer 工具插件http://flowplayer.org/tools/tooltip.html

1）我希望在用户单击某个元素时创建一个工具提示。

2）当用户点击另一个元素时，旧的工具提示必须取消链接（删除）

3）应为单击的元素创建新的工具提示（或将旧的工具提示移动到）

4）所以，页面上应该有

你能帮我么？

这是代码，它独立运行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
    <title>jQuery tooltip</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>

    <script type="text/javascript">


/******* THIS FUNCTION IS JUST FOR TEST, REMOVE IT LATER *********/
    $(document).ready(function() {
        $("#_2").tooltip({ 
            effect: "slide", 
            tip: '.tooltip' ,
            position: 'bottom center'
        }); 

    });
/******* THIS FUNCTION IS JUST FOR TEST, REMOVE IT LATER *********/




/** The code below is not working as I expect, it doesn't MOVE tooltip **/

           var old_id;

    //first time - create tooltip
        function my_create(id){
            $("#"+id).tooltip({ 
                effect: "slide", 
                tip: '.tooltip', 
                position: 'bottom center'
            });     
        }

     //next times - move tooltip to other element
        function my_unlink(id){
            $("#"+id).unbind("mouseover"); 
            //todo
        }

        function my_link(id){
            //todo
        }


        //THE MAIN FUNCTION

        function do_tip(new_id){
            if(old_id){
                my_unlink(old_id);
                my_link(new_id);
                alert(new_id);
            }
            else
                my_create(new_id);

            old_id=new_id;
         //new_id.focus();
     } 

    </script> 

  <style>
    .tooltip {
      display: none;
      background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow_bottom.png);
      font-size:14px;
      height:70px;
      width:160px;
      padding:25px;
      color:#fff;   
    }
    h1 {
      width: 400px;
      text-align: center;
      background-color: yellow;
    }

  </style>
</head>
<body>

    <h1 onclick="do_tip(this.id)" id="_1">John</h1>
    <h1 onclick="do_tip(this.id)" id="_2">Mary</h1>
    <h1 onclick="do_tip(this.id)" id="_3">Dan</h1>
    <h1 onclick="do_tip(this.id)" id="_4">Paul</h1>
    <h1 onclick="do_tip(this.id)" id="_5">Kim</h1>

    <div class="tooltip">There should be only one tooltip on a page!</div>

</body></html>

jQuery 工具工具提示支持定义哪些事件触发工具提示。

您不需要自己处理点击事件。

编辑：更新了脚本。单击链接始终将工具提示移动到第二个元素。

这里是script

var tt = $("h1").tooltip({
  events:{def:'click, click'},
  effect: "slide",
  tip: '.tooltip' ,
  position: "bottom center",
  api: true,
  delay: 30000
});

$("#ht").click(function() {
  tt.hide();
  $("#_2").tooltip().show();
});

整个脚本

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>

<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup,
  menu, nav, section { display: block; }
</style>
<style>
    .tooltip {
      display: none;
      background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow_bottom.png);
      font-size:14px;
      height:70px;
      width:160px;
      padding:25px;
      color:#fff;   
    }
    h1 {
      width: 400px;
      text-align: center;
      background-color: yellow;
      cursor:pointer;
    }

 </style>

</head>
<body>

    <h1 id="_1">John</h1>
    <h1 id="_2">Mary</h1>
    <h1 id="_3">Dan</h1>
    <h1 id="_4">Paul</h1>
    <h1 id="_5">Kim</h1>

    <a id="ht" href="javascript:void()">Click here</a>
    <div class="tooltip">There should be only one tooltip on a page!</div>

</body>
</html>

<script>

var tt = $("h1").tooltip({
  events:{def:'click, click'},
  effect: "toggle",
  tip: '.tooltip' ,
  position: "bottom center",
  api: true,
  delay: 30000
});

$("#ht").click(function() {
  tt.hide();
  setTimeout(function(){$("#_2").tooltip().show();}, 500);
});

</script>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

将 jquery 对象链接/取消链接到元素 的相关文章

随机推荐

  • 致命：不是 git 存储库：“.git”错误

    我创建了一个预提交挂钩 它获取数据库转储并将其保存在我的应用程序 文件夹下的文件中 该文件也在 git 存储库中 保存后我将文件添加到提交列表中 以下是我的预提交文件中的代码 D xampp mysql bin mysqldump u ro

  • python：用条件替换列表中的元素

    我正在尝试使用 python 执行以下操作 但出现了奇怪的行为 假设我有以下列表 x 5 4 3 2 1 现在 我正在做类似的事情 x x gt 3 3 这给出 x 5 3 3 2 1 为什么只有第二个元素发生变化 我期待着 3 3 3 2

  • VBscript 相对路径

    我正在尝试使用以下脚本 顺便说一下 它是由批处理文件调用的 在 Windows XP 中解压缩文件 strZipFile C test zip name of zip file outFolder C destination folder

  • DateTime.ParseExact FormatException 字符串未被识别为有效的日期时间

    我完全被这个难住了 据我所知 我读过的文档和其他帖子都说这应该可行 我一定错过了一些愚蠢的东西 但我就是看不到它 我收到一个 FormatException 消息 字符串未被识别为有效的日期时间 在以下代码行上 return DateTim

  • 全局命名空间与本地命名空间性能差异

    为什么在一个函数中执行一组命令 def main do stuff return something print main 会倾向于跑步1 5x to 3x在 python 中执行命令比在顶层执行命令快几倍 do stuff print s

  • 安装 davfs2 卷时无法打开 docker 容器中的熔断器设备

    当我尝试在 docker 容器上挂载 davfs2 卷时遇到以下错误 geoserver 8e8091d97157 mount owncloud sbin mount davfs loading kernel module fuse sbi

  • 如何在Python中的for循环中删除列表元素？ [复制]

    这个问题在这里已经有答案了 我有一个清单 a a b c d e 我想在 for 循环中删除此列表中的元素 如下所示 for item in a print item a remove item 但这不起作用 我能做些什么 不允许在使用 a

  • DDK“你好世界”

    如何开始为 Windows 编写驱动程序 是否有某种官方 DDK Hello World 示例 虽然我确信一开始这会超出我的想象 但最终我想创建一个简单的 MIDI 驱动程序 就像枫木虚拟 MIDI 电缆其中 MIDI 消息来自用户应用程序

  • 将 div 高度设置为父级的 100%

    我想要我的网页具有以下布局 header navigation details 其中导航窗格 动态生成的内容 包含数百个元素 我希望在导航窗格上创建一个垂直滚动条 以便该窗格的高度减去标题的高度 我的页面大致结构如下 div div div

  • 在 Mac OS X 上的 Docker 中启用远程 API (boot2docker)

    我似乎不知道如何在使用 boot2docker 时启用远程 API 我尝试按如下方式使用 dockerode Docker require dockerode docker new Docker socketPath var run doc

  • JVM 内存：为什么任务管理器上的内存与 JProbe（或 JConsole 工具）不同

    我面临的问题是我的应用程序使用的内存只有100MB 之后减少了50MB 但在窗口任务管理器上它显示150MB并且总是保持或增加但不减少 我们如何减少任务管理器上的内存 私人工作集 你所看到的JConsole 或其他监控工具 是java内存正

  • 为什么我似乎无法强制 Oracle 11g 为单个 SQL 查询消耗更多 CPU

    我有一些在巨大的表上运行的巨大查询 这些查询似乎存在 CPU 瓶颈 并且运行了数小时 据我所知 Oracle 在 11g 第 2 版中有很多新功能 可以在内部并行化查询的执行 然而 无论我在查询中添加何种提示 我似乎都无法在数据库框中使用超

  • 使用 python 从网页中提取所有链接

    在 Udacity 的计算机科学简介课程之后 我正在尝试制作一个 python 脚本来从页面中提取链接 下面是我使用的代码 我收到以下错误 NameError 名称 页面 未定义 这是代码 def get page page try imp

  • dicts 在 python 3 中不可排序？

    为什么字典在 python2 中是可排序的 但在 python3 中却不能 我在文档中找不到它 Python 3 3 4 default Feb 11 2014 16 14 21 gt gt gt sorted a a b b Traceb

  • mysqli 中的位标志使用 fetch_field_direct 意味着什么

    使用 mysqli 我可以获取有关字段的信息 如下所示 field mysqli fetch field direct result fieldCount 我可以使用从结果中获取字段标志 field gt flags PHP 手册说这会返回

  • ASP.NET MVC 2 RC 客户端验证不起作用

    我似乎无法在 MVC 2 RC 应用程序上进行任何客户端验证 我的模型有以下内容 public class ExampleModel Required ErrorMessage Test1 is required DisplayName T

  • 设置 Gradle 以在 Android Studio 中运行 Java 可执行文件

    所以事情是这样的 我使用的是 Android 版 ORMLite 它使用注释来在 Android 中进行映射 如您所知 Android 中的注释速度很慢 ORMLite 的开发者已经意识到这一点 因此他们添加了运行 java 可执行文件来生

  • 如何检查一个对象是列表还是元组（但不是字符串）？

    这是我通常所做的 以确定输入是list tuple 但不是str 因为很多次我偶然发现函数传递一个错误str错误地对象 并且目标函数确实for x in lst假如说lst实际上是一个list or tuple assert isinsta

  • Flutter Stack 更改深度

    我有一个带有 3 个定位小部件的堆栈 并且作为一个孩子有一个 GestureDetector 我可以拖动它们 但我也想在您单击它时将单击的那个带到前面 我尝试在父窗口小部件中调用更改状态 但这也交换了受影响的窗口小部件的位置 这是完整的示例

  • 将 jquery 对象链接/取消链接到元素

    我正在使用 jquery flowplayer 工具插件http flowplayer org tools tooltip html 1 我希望在用户单击某个元素时创建一个工具提示 2 当用户点击另一个元素时 旧的工具提示必须取消链接 删除

热门标签