jquery qtip demo

向右看齐 2021-11-01 15:48 229阅读 0赞

qtip demo html

\-----------------

<html>  
<head>  
<title>qtip demo</title>  
  
</head>  
  
<body>  
<a href="javascript:void(0);" id="a0">test div0</a> <br /><br /><br />  
<a href="javascript:void(0);" id="a1">test div</a> <br /><br /><br />  
<div id="a2" style="width:100px;border: 1px solid;background: yellow;">test div2</div> <br />  
<script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>  
<script type="text/javascript" src="scripts/jquery.qtip-1.0.0-rc3.min.js"></script>  
<script type="text/javascript">  
$(function()\{  
    $('\#a0').qtip(\{  
       content: 'This is an active list element',  
       show: 'mouseover',  
       hide: 'mouseout'  
    \});  
      
    $('\#a1').qtip(\{  
       content: 'This is an active list element',  
       show: \{  
           when:'click',    
           solo:false    
       \},  
       hide: \{  
           when: 'inactive',  
           delay: 1000  
       \}  
    \});  
      
    $('\#a2').qtip(\{  
       content: '姓名:<input id="uname" type="text"><br /><br /><input type="button" value="提交" οnclick="submitTip()"><input type="button" value="关闭" οnclick="colseTip()">',  
       show: \{  
           when:'dblclick',    
           solo:false    
       \},  
       hide: \{  
           when: 'inactive',  
           delay: 2000  
       \}  
    \});  
\});  
function colseTip()\{  
    $("\#a2").qtip("hide");  
\}  
function submitTip()\{  
    alert("提交");  
\}  
</script>  
</body>  
</html>

**qtip更新内容：**

$('\#a2').qtip("api").updateContent("dddddd");

发表评论取消回复

表情：

评论列表（有 0 条评论，229人围观）

还没有评论，来说两句吧...

相关阅读

相关 .NET MVC Jquery EasyUI Demo

<%@ Page Language="C\" Inherits="System.Web.Mvc.ViewPage<DotNetMvc.Models.EnApplica...

Love The Way You Lie/ 2024年04月18日 10:28/ 0 赞/ 34 阅读

相关 jqgrid demo java_jQuery学习之：jqGrid表格插件——第一个Demo

![79b4047e782b7830d30e7a3b2ac187e1.png][] 列出关键代码： html代码: ... 因为jqGrid3.6集成了jQuery U

忘是亡心i/ 2022年11月02日 13:16/ 0 赞/ 147 阅读

相关 jQuery.Callbacks之demo

jQuery.Callbacks是jquery在1.7版本之后加入的，是从1.6版中的\_Deferred对象中抽离的，主要用来进行函数队列的add、remove、fire、l

Bertha 。/ 2022年08月08日 15:53/ 0 赞/ 131 阅读

相关 jQuery Ajax 案例 Demo

[jQuery 下载地址][jQuery] http://code.jquery.com/jquery-1.7.1.min.js 案例:jQueryAjax

电玩女神/ 2022年06月16日 10:53/ 0 赞/ 179 阅读

相关 jquery完成一个日历demo练习总结

-------------------- jquery草草基本看完，今天在前端网看到一个jquery完成的日历demo就模仿着写了一下，当然问题还是很多． -----

缺乏、安全感/ 2022年06月07日 12:41/ 0 赞/ 121 阅读

相关 Jquery each的使用及demo

each 是jquery中的遍历意思，相当于循环。使用如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8

骑猪看日落/ 2022年06月06日 12:37/ 0 赞/ 141 阅读

相关 jquery ui 自动补全demo

<!doctype html> <html lang="en"> <head> <meta charset="utf-8">

怼烎@/ 2022年06月02日 04:13/ 0 赞/ 188 阅读

相关 Jquery知识点demo演示

demo1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

谁践踏了优雅/ 2022年05月13日 07:56/ 0 赞/ 181 阅读

相关 jquery qtip demo

qtip demo html \----------------- <html> <head> <title>qtip demo</title> </he

向右看齐/ 2021年11月01日 15:48/ 0 赞/ 230 阅读

相关 jQuery 树插件ZTree使用Demo

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。zTree 是开源免费的软件。 zTre...

朱雀/ 2020年10月17日 18:26/ 0 赞/ 830 阅读