• 《寻梦环游记》《至爱梵高》 明年奥斯卡种子选手且看且珍惜 2018-06-23
  • 海南特区改革开放30年:闯出一片辽阔的海 2018-06-23
  • 黑龙江省近三年有400多名责任人因破坏营商环境被处理 2018-06-23
  • 右玉:锣鼓喧天庆盛世 万民欢腾闹元宵 2018-06-23
  • 【手绘H5】我们的领袖习近平 2018-06-23
  • 上市公司并购新三板企业升温 2018-06-23
  • 特朗普再与世界"为敌" 多国斥其关于耶路撒冷决定 2018-06-22
  • 严防“两节”期间“四风”反弹 持续保持高压态势 2018-06-22
  • 反转!华南理工大学否认向莱阳14岁神童发送考察函 2018-06-21
  • 中国出版集团公司总裁谭跃委员:唱响新时代的好声音 2018-06-21
  • 新華網評:分享經濟,別演成分享的“獨角戲” 2018-06-20
  • 红薯会越放越甜吗 如何保存红薯最科学? 2018-06-20
  • 猪肉创八年新低部分养殖户巨亏离场 行业加速洗牌 2018-06-19
  • 招商证券:创业板反弹压力逐渐显现 2018-06-19
  • “一拖二快三”足球比分直400余名应届大学毕业生成为部队“准警官” 2018-06-19
  • 【jquery教程】jQuery Tooltip

    栏目: jquery 发布于: 2014-11-28 18:52:37

    jQuery Tooltip

    jQuery Tooltip 插件取代了原生的工具提示框,让它们可自定义,您只需要调整它们的内容、位置和外观即可。

    该插件目前版本是 1.3,已经很长时间没有更新,推荐使用 jQuery UI 工具提示框(Tooltip)。

    访问 jQuery Tooltip 官网,下载 jQuery Tooltip 插件。

    如需了解更多有关 jQuery UI 工具提示框(Tooltip)的细节,请查看 API 文档 jQuery UI 工具提示框部件(Tooltip Widget)。

    实例演示

    jQuery Tooltip 插件演示。

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>jQuery Tooltip 插件</title>
    
    <link rel="stylesheet" rel="nofollow"  />
    <link rel="stylesheet" rel="nofollow"  />
    <script src="http://www.rocksun.cn/tooltip/lib/jquery.js" type="text/javascript"></script>
    <script src="http://www.rocksun.cn/tooltip/lib/jquery.bgiframe.js" type="text/javascript"></script>
    <script src="http://www.rocksun.cn/tooltip/lib/jquery.dimensions.js" type="text/javascript"></script>
    <script src="http://www.rocksun.cn/tooltip/jquery.tooltip.js" type="text/javascript"></script>
    
    <script src="http://www.rocksun.cn/tooltip/demo/chili-1.7.pack.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    $(function() {
    $('#set1 *').tooltip();
    
    $("#foottip a").tooltip({
    	bodyHandler: function() {
    		return $($(this).attr("href")).html();
    	},
    	showURL: false
    });
    
    $('#tonus').tooltip({
    	delay: 0,
    	showURL: false,
    	bodyHandler: function() {
    		return $("<img/>").attr("src", this.src);
    	}
    });
    
    $('#yahoo a').tooltip({
    	track: true,
    	delay: 0,
    	showURL: false,
    	showBody: " - ",
    	fade: 250
    });
    
    $("select").tooltip({
    	left: 25
    });
    
    $("map > area").tooltip({ positionLeft: true });
    
    $("#fancy, #fancy2").tooltip({
    	track: true,
    	delay: 0,
    	showURL: false,
    	fixPNG: true,
    	showBody: " - ",
    	extraClass: "pretty fancy",
    	top: -15,
    	left: 5
    });
    
    $('#pretty').tooltip({
    	track: true,
    	delay: 0,
    	showURL: false,
    	showBody: " - ",
    	extraClass: "pretty",
    	fixPNG: true,
    	left: -120
    });
    
    $('#right a').tooltip({
    	track: true,
    	delay: 0,
    	showURL: false,
    	extraClass: "right"
    });
    $('#right2 a').tooltip({ showURL: false, positionLeft: true });
    
    $("#block").click($.tooltip.block);
    
    });
    </script>
    
    </head>
    <body>
    <h1 id="banner">jQuery Tooltip 插件演示</h1>
    <div id="main">
    	<fieldset id="set1">
    		<legend>三个带有默认设置的 Tooltip 的元素</legend>
    		<a title="一个带有默认设置的 tooltip,href 显示在标题下" rel="nofollow" >链接到谷歌</a>
    		<br/>
    		<label title="一个带有 title 和默认设置的标签,没有 href" for="text1">请输入一些字符!</label>
    		<br/>
    		<input title="请注意,当点击 input 元素时,tooltip 消失" type="text" value="测试" name="action" id="text1"/>
    		
    		<h3>代码</h3>
    		<code class="mix">$('#set1 *').tooltip();</code>
    	</fieldset>
    	
    	<fieldset id="foottip">
    		<legend>使用 bodyHandler 来显示 tooltip 中的脚注</legend>
    		一些指向 <a rel="nofollow" href="#footnote">脚注</a> 的文本。
    		<br/>
    		<br/>
    		<br/>
    		<br/>
    		<br/>
    		<div id="footnote"><em>这里</em>是一个实际的脚注,通过嵌套的 <strong>HTML</strong> 来完成。</div>
    		
    		<h3>代码</h3>
    		<code class="mix">$("#foottip a").tooltip({
    	bodyHandler: function() {
    		return $($(this).attr("href")).html();
    	},
    	showURL: false
    });</code>
    	</fieldset>
    	
    	<fieldset>
    		<legend>一个带有 tooltip 的图像</legend>
    		<img id="tonus" src="http://www.rocksun.cn/tooltip/demo/image.png" height="80" title="没有延迟。src 值显示在标题下" />
    		<h3>代码</h3>
    	<code class="mix">$('#tonus').tooltip({
    	delay: 0,
    	showURL: false,
    	bodyHandler: function() {
    		return $("&lt;img/&gt;").attr("src", this.src);
    	}
    });</code>
    	</fieldset>
    	
    	<fieldset>
    		<legend>锁定 tooltip</legend>
    		<button id="block">点击按钮锁定/解锁所有的 tooltip</button>
    		<h3>代码</h3>
    		<code class="mix">$("#block").click($.tooltip.block);</code>
    	</fieldset>
    	
    	<fieldset>
    		<legend>下面四个链接没有延迟跟踪和渐变,带有额外的内容</legend>
    		<div id="yahoo">
    			<a title="Yahoo doo - more content" rel="nofollow" >链接到雅虎</a>
    			<a title="Yahoo doo2 - wohooo" rel="nofollow" >链接到雅虎 1</a>
    			<a title="Yahoo doo3" rel="nofollow" >链接到雅虎 2</a>
    			<a title="Yahoo doo4 - buga!" rel="nofollow" >链接到雅虎 3</a>
    		</div>
    		<select><option>bgiframe test</option></select>
    		<h3>代码</h3>
    		<code class="mix">$('#yahoo a').tooltip({
    	track: true,
    	delay: 0,
    	showURL: false,
    	showBody: " - ",
    	fade: 250
    });</code>
    	</fieldset>
    	
    	<fieldset>
    		<legend>带有额外的 class 的 tooltip。用于在一个页面上显示不同的 tooltip 样式</legend>
    		<em>请注意,当鼠标停留在右边视区边界时,右边的那个 tooltip 如何显示一个不同的背景图片。</em>
    		<br/>
    		<span id="fancy" title="注意 - 请注意,这里带有一些自定义的样式。">一个奇特的 tooltip,带有一些自定义的样式。</span>
    		<span id="fancy2" title="注意 - 请注意,这里带有一些自定义的样式。">一个奇特的 tooltip,带有一些自定义的样式。</span>
    		<p><span id="pretty" title="注意 - 请注意,这里带有更多自定义的样式。">一个奇特的 tooltip,带有阴影和一些额外的内容。</span></p>
    		<br/>
    		<br/>
    		<br/>
    		<select><option>bgiframe test</option></select>
    		<h3>代码</h3>
    		<code class="mix">$("#fancy, #fancy2").tooltip({
    	track: true,
    	delay: 0,
    	showURL: false,
    	opacity: 1,
    	fixPNG: true,
    	showBody: " - ",
    	extraClass: "pretty fancy",
    	top: -15,
    	left: 5
    });
    
    $('#pretty').tooltip({
    	track: true,
    	delay: 0,
    	showURL: false,
    	showBody: " - ",
    	extraClass: "pretty",
    	fixPNG: true,
    	opacity: 0.95,
    	left: -120
    });</code>
    	</fieldset>
    	
    	<fieldset>
    		<legend>下拉框</legend>
    		<select title="带有 tooltip 的 select">
    			<option>1. option</option>
    			<option>2. option</option>
    			<option>3. option</option>
    		</select>
    	</fieldset>
    	
    	<fieldset>
    		<legend>带有 tooltip 的图像地图</legend>
    	
    		<img id="map" src="karte.png" width="345" height="312" border="0" usemap="#Landkarte">
    		<map name="Landkarte">
    		  <area shape="rect" coords="11,10,59,29"
    		        rel="nofollow"  alt="Koblenz" title="Koblenz">
    		  <area shape="rect" coords="42,36,96,57"
    		        rel="nofollow"  alt="Wiesbaden" title="Wiesbaden">
    		  <area shape="rect" coords="42,59,78,80"
    		        rel="nofollow"  alt="Mainz" title="Mainz">
    		  <area shape="rect" coords="100,26,152,58"
    		        rel="nofollow"  alt="Frankfurt" title="Frankfurt">
    		  <area shape="rect" coords="27,113,93,134"
    		        rel="nofollow"  alt="Mannheim" title="Mannheim">
    		  <area shape="rect" coords="100,138,163,159"
    		        rel="nofollow"  alt="Heidelberg" title="Heidelberg">
    		  <area shape="rect" coords="207,77,266,101"
    		        rel="nofollow"  alt="W&uuml;rzburg" title="W&uuml;rzburg">
    		  <area shape="rect" coords="282,62,344,85"
    		        rel="nofollow"  alt="Bamberg" title="Bamberg">
    		  <area shape="rect" coords="255,132,316,150"
    		        rel="nofollow"  alt="N&uuml;rnberg" title="N&uuml;rnberg">
    		  <area shape="rect" coords="78,182,132,200"
    		        rel="nofollow"  alt="Karlsruhe" title="Karlsruhe">
    		  <area shape="rect" coords="142,169,200,193"
    		        rel="nofollow"  alt="Heilbronn" title="Heilbronn">
    		  <area shape="rect" coords="140,209,198,230"
    		        rel="nofollow"  alt="Stuttgart" title="Stuttgart">
    		  <area shape="rect" coords="187,263,222,281"
    		        rel="nofollow"  alt="Ulm" title="Ulm">
    		  <area shape="rect" coords="249,278,304,297"
    		        rel="nofollow"  alt="Augsburg" title="Augsburg">
    		  <area shape="poly" coords="48,311,105,248,96,210,75,205,38,234,8,310"
    		        rel="nofollow"  alt="Baden" title="Baden">
    		</map>
    		<h3>代码</h3>
    		<code class="mix">$("map *").tooltip({ positionLeft: true });</code>
    	</fieldset>
    	
    	<fieldset>
    		<legend>在视区的边界测试重新定位</legend>
    		<p id="right">
    			带有固定宽度的 tooltip<br/>
    			<a title="短标题" rel="nofollow" href="http://google">链接到谷歌</a><br/>
    			<a title="长标题,没有其他含义,只是一个长标题,一个很长很长很长很长很长的标题" rel="nofollow" href="http://google">链接到谷歌</a>
    		</p>
    		<p id="right2">
    			带有自动宽度的 tooltip<br/>
    			<a title="短标题" rel="nofollow" href="http://google">链接到谷歌</a><br/>
    			<a title="长标题,没有其他含义,只是一个长标题,一个很长很长很长很长很长的标题" rel="nofollow" href="http://google">链接到谷歌</a>
    		</p>
    		<h3>代码</h3>
    		<code class="mix">$('#right a').tooltip({
    	track: true,
    	delay: 0,
    	showURL: false,
    	extraClass: "right"
    });
    $('#right2 a').tooltip({ showURL: false, positionLeft: true });</code>
    	</fieldset>
    </div>
    
    </body>
    </html>
    


    本文转载自:w3cschool
    本站文章除注明转载外,均为本站原创或编译?;队魏涡问降淖?,但请务必注明出处。
    转载请注明:文章转载自 七星彩票平台
    本文标题:【jquery教程】jQuery Tooltip
    IT技术书籍推荐:
    计算机科学丛书:Php和Mysql Web开发(原书第4版)
    计算机科学丛书:Php和Mysql Web开发(原书第4版)
    Luke Welling (作者), Laura Thomson (作者), 武欣 (译者)
    《计算机科学丛书:Php和Mysql Web开发(原书第4版)》将PHP开发与MySQL应用相结合,分别对PHP和MySQL做了深入浅出的分析,不仅介绍PHP和MySQL的一般概念,而且对PHP和MySQL的Web应用做了较全面的阐述,并包括几个经典且实用的例子?!都扑慊蒲Т允?Php和Mysql Web开发(原书第4版)》是第4版,经过了全面的更新、重写和扩展,包括PHP 5.3最新改进的特性(例如,更好的错误和异常处理),MySQL的存储过程和存储引擎,Ajax技术与Web 2.0以及Web应用需要注意的安全问题。