• 品书香 看电影 十堰市民过了个名副其实的“文化年” 2018-02-24
  • 人民网驻阿尔及利亚记者报道集 2018-02-24
  • 党务问答:党组与党委有何区别? 2018-02-24
  • 泽贡高等级公路2日起临时封闭 2018-02-23
  • 外媒称中国元素成为国际时尚:旗袍成经典服装 2018-02-23
  • 广东清远垃圾收集点火灾致9人死亡 系烟花爆竹引起 2018-02-22
  • 党务问答:党组与党委有何区别? 2018-02-21
  • 杨浦区贯彻实施长护险 春节加班满足老人护理需求 2018-02-21
  •  “不打烊”不等于“全配送” 快递如何保障春节网购 2018-02-21
  • 冬奥观察:奥林匹克在“云”间 2018-02-20
  •  “不打烊”不等于“全配送” 快递如何保障春节网购 2018-02-20
  • 开创生态文明新时代 绘出美丽中国新图景 2018-02-20
  • 人民网驻阿尔及利亚记者报道集 2018-02-19
  • 党务问答:党组与党委有何区别? 2018-02-19
  • MINI车联网服务3月起升级至4G网络 增加新功能 2018-02-18
  • 【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应用需要注意的安全问题。