男丁格爾's 脫殼玩

沒錯!只要 300 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

cursormessage_0_2

CursorMessage 套件的開發理念有別於一般的 tips 提示功能，它能讓設計師隨時隨地的把提示訊息顯示在滑鼠的四周並跟著滑鼠移動。

套件名稱：CursorMessage
套件版本：0.2
作者網站：http://www.kingsquare.nl/cursormessage
套件網址：http://plugins.jquery.com/project/CursorMessage
發佈日期：2009-09-10
檔案大小：1.77 KB
檔案下載：jquery.cursorMessage.js

參數說明：

[複製到剪貼簿]檢視原始碼 JavaScript

message(必填)
描述： 要顯示的訊息
預設值： 無
 
options(選填)
描述： 進階的參數設定，可設定的參數有：offsetX、offsetY 及 hideTimeout
預設值： {offsetX: 5, offsetY: 5, hideTimeout: 1000 }
 
offsetX(選填)
描述： 提示訊息框 X 座標跟目前滑鼠 X 座標的偏移值
預設值： 5
 
offsetY(選填)
描述： 提示訊息框 Y 座標跟目前滑鼠 Y 座標的偏移值
預設值： 5
 
hideTimeout(選填)
描述： 提示訊息框消失的時間，單位是毫秒數；如果設成 0 表示不消失
預設值： 1000

方法說明：

[複製到剪貼簿]檢視原始碼 JavaScript

// 在滑鼠旁顯示提示訊息
$.cursorMessage(message, options);
 
// 隱藏提示訊息
$.hideCursorMessage();

使用範例：

[複製到剪貼簿]檢視原始碼 JavaScript

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cursorMessage.js"></script>
<style type="text/css">
	/* CursorMessage 所需的樣式 */
	#cursorMessageDiv {
		position: absolute;
		z-index: 99999;
		border: solid 1px #CCC;
		background: #EEE;
		padding: 2px;
		margin: 0px;
		display: none;
	}
</style>
<script type="text/javascript">
	$(function(){
 
		// 當在 #changeMe 中按下鍵時會出現提示訊息在滑鼠旁
		$('#changeMe').keypress(function(){
			$.cursorMessage('你已經輸入了 '+ $(this).val().length + ' 字...', {
				offsetX: 20,
				offsetY: -15
			});
		});
 
		// 把滑鼠移到 #changeMe2 時會出現提示訊息, 但不會自動消失
		// 當滑鼠移出 #changeMe2 時才隱藏
		$('#changeMe2').mouseover(function(){
			$.cursorMessage('男丁格爾\' 脫殼玩', {
				hideTimeout: 0
			}); 
		}).mouseout($.hideCursorMessage);
	});
</script>
 
<body>
	<h3>輸入看看..</h3>
	<input type="text" id="changeMe" />
 
	<h3>試著把滑鼠移進移出..</h3>
	<input type="text" id="changeMe2" />
</body>