jQuery tooltips運用

時間 2019-11-16

原文原文鏈接

爲了作漂亮的氣球信息提示框以替換HTML標籤中的title屬性，BeautyTips (基於jquery的一個插件)完成了這一想法javascript

http://www.lullabot.com/files/bt/bt-latest/DEMO/index.htmlhtml

這是demo,蠻漂亮的,在開發過程當中有兩個重要設置不要忽略了：java

jQuery.bt.options.ajaxLoading = '<img src="/images/throbber.gif" width="40" height="40" />';//若是作ajax氣球框，那麼在interactive這段時間顯示一個加載圖片以給用戶友好提示正在交互信息
jQuery.bt.options.closeWhenOthersOpen = true;//顧名思義，當打開一個氣球的時候其餘氣球都關閉，這個若是不設置的話頁面上會彈出不少氣球框，讓人很煩。。jquery

http://plugins.jquery.com/project/bt,這是jquery BT的介紹,有一點要說明一下,這個效果是基於HTML5標準的(使用到canvas 元素),因爲IE瀏覽器不支持此標籤,因此要額外添加一個js庫excanvas.jsajax

另外在demo頁面會看到以下一段話：json

BeautyTips has been tested with jQuery 1.2.6 and 1.3 on Firefox 3.x, Safari 3.x (also works on iPhone!), IE 6.x+, and Opera 8+, but I'm sure other canvas-capable browsers will work as well.canvas

測試時jquery的版本是1.2.6和1.3.x的，不過本人測試jquery1.4.2也是能夠用的瀏覽器

下邊是個小例子:ide

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>jquery tooltips</title>
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
		<!-- <script type="text/javascript" src="js/jquery.hoverIntent.minified.js"></script>
		<script type="text/javascript" src="js/jquery.bgiframe.min.js"></script> -->
		<script type="text/javascript" src="js/excanvas.min.js"></script>
		<!-- <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>-->
		<script type="text/javascript" src="js/jquery.bt.min.js"></script>
		<script type="text/javascript" src="js/json.js"></script>
		<script type="text/javascript">
		$(document).ready( function() {
			jQuery.bt.options.closeWhenOthersOpen = true;
			$('#context a').bt({
				 contentSelector: "$(this).attr('href')",//動態取得某些元素的內容
				 trigger: 'mouseover',
				 positions: ['right'] ,
				 hoverIntentOpts : {interval :0,timeout :0}
			});
			$('#example1 a').bt('發到qqq',{
				showTip : function(box){
					$(box).fadeIn(500);
				},
				hideTip : function(box, callback) {
					$(box).animate({
						opacity :0
					}, 500, callback);
				},
				shrinkToFit :true,
				hoverIntentOpts : {
					interval :100,
					timeout :100
				}
			});
		});
		/*
		//爲了在項目中簡化調用及統一修改能夠寫成一個公用方法
		function tips(args){
			jQuery.bt.options.ajaxLoading = '<img src="/images/throbber.gif" width="40" height="40" />';
			jQuery.bt.options.closeWhenOthersOpen = true;
			$('#'+args.id).bt({
				 contentSelector: args.title,//動態取得某些元素的內容
				 trigger: 'mouseover',
				 positions: ['right'] ,
				 hoverIntentOpts : {interval :0,timeout :0}
			});
		}
		*/
		function car(brand,color){
			this.brand=brand;
			this.color=color;
		}
		
		alert(JSON.stringify(new car("BMW","white")));
 </script>
	</head>
	<body>
	<pre>
	-----
	-
	--
	-
		-----
	-
	--
	-
		-----
	-
	--
	-
		-----
	-
	--
	-
		-----
	-
	--
	-
	</pre>
		<div id="context">
			主頁
			<a href="http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html">
				http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html </a>
			<br>
			<a href="http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html">
				http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html </a>
			<br>
			<a href="http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html">
				http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html </a>
			http://speckyboy.com/2009/09/16/25-useful-jquery-tooltip-plugins-and-tutorials/
		</div>
		<br>
		<br>
		<div id="example1" >
			<a href="javascript:">
				http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html </a>
			<br>
			<a href="http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html">
				http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html </a>
			<br>
			<a href="http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html">
				http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html </a>
		</div>
		<a href="javascript:window.close();">關閉</a>
	</body>
</html>

1. D3js（五）：tooltips
2. tooltips 提示
3. 幾款好用的Tooltips 提示框插件
4. stylus css tooltips 工具提示
5. CSS3實現漂亮ToolTips
6. jQuery與ajax 基礎運用
7. jquery運動
8. Vue-CLI and Leaflet （4）添加tooltips 和 popup
9. 超棒的20款javascript工具提示條(tooltips)類庫
10. JQuery插件——jquery tools
更多相關文章...
• MySQL常用運算符詳解 - MySQL教程
• PHP 運算符 - PHP教程
• Composer 安裝與使用
• 使用Rxjava計算圓周率

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。