基於jQuery的tooltips外掛程式--poshytip

標籤：des   style   blog   http   io   color   ar   os   使用   

摘要：

　　分享一款在項目中使用的tooltips外掛程式--poshytip，這是一款基於jQuery的外掛程式，其特點是簡單易用，支援瀏覽器：IE6+, FF 2+, Opera 9+, Safari 3+, Chrome，並且帶有六種皮膚的提示框

Install：

　　下載poshytip外掛程式，解壓之後將檔案夾src拷貝到項目中，然後引入js和css檔案。

1 <link rel="stylesheet" href="../src/tip-yellow/tip-yellow.css" type="text/css" />2 <script type="text/javascript" src="includes/jquery-1.4.2.min.js"></script>3 <script type="text/javascript" src="../src/jquery.poshytip.min.js"></script>

 

 注意：檔案夾中包含所有樣式，只需引自己需要的樣式，此處引用的是tip-yellow.css。poshytip是基於jQuery的外掛程式，所以在引用外掛程式之前先引用jQuery，版本需要在1.4+。poshytip包含兩個js檔案jquery.poshytip.js和jquery.poshytip.min.js，前者是未壓縮版，如果在開發中出現錯誤可以引用這個調試，開發完之後線上引用後者壓縮版的。

Demos：

1 <a id="demo" title="Hey, there! This is a tooltip." href="#">2 <script>3 $(‘#demo‘).poshytip();4 </script>

 

如果沒有設定poshytip的content，那麼它就會將元素的title值作為提示資訊。

設定不同皮膚的提示框

$(‘#demo‘).poshytip({
　　className: ‘‘
});

 設定className值來定義皮膚，預設狀態是tip-yellow。取值：tip-yellow，tip-violet，tip-darkgray，tip-skyblue，tip-yellowsimple，tip-twitter，tip-green

注意：設定className同時應將對應的css檔案引入。

表單提示：

　　

1 $(‘#demo-form-name‘).poshytip({2     className: ‘tip-yellowsimple‘,3     showOn: ‘focus‘,4     alignTo: ‘target‘,5     alignX: ‘right‘,6     alignY: ‘center‘,7     offsetX: 5,8     showTimeout: 1009 });

 

配置參數：

		類型(時間單位為毫秒)	樣本
content	顯示的內容（預設取值title）	String, DOM element, Function, jQuery	$(‘#demo‘).poshytip({ 　　content: ‘Hey, there! This is a tooltip.‘ });
className	設定提示框的class	String	$(‘#demo‘).poshytip({ 　　className: ‘tip-yellow‘ });
bgImageFrameSize	提示框背景圖片的大小	Number	$(‘#demo‘).poshytip({ 　　className: ‘tip-violet‘, 　　bgImageFrameSize: 9 });
showTimeout	延遲顯示時間	Number	$(‘#demo‘).poshytip({ 　　className: ‘tip-violet‘, 　　bgImageFrameSize: 9, 　　showTimeout: 50 });
hideTimeout	延遲消失時間	Number	$(‘#demo‘).poshytip({ 　　className: ‘tip-violet‘, 　　bgImageFrameSize: 9, 　　hideTimeout: 50 });
timeOnScreen	自動隱藏之前顯示多長時間	Number	$(‘#demo‘).poshytip({ 　　className: ‘tip-violet‘, 　　bgImageFrameSize: 9, 　　timeOnScreen: 1000 }); //當元素擷取到焦點時，提示框顯示1秒之後自動隱藏
showOn	觸發何種事件顯示提示框	String（‘hover‘, ‘focus‘, ‘none‘）	$(‘#demo‘).poshytip({ 　　showOn: ‘focus‘ }); //當擷取焦點時顯示提示
liveEvents
alignTo	設定箭頭位置	String（‘cursor‘, ‘target‘）	$(‘#demo‘).poshytip({ 　　alignTo: ‘cursor‘ }); //設定箭頭位置相對於滑鼠位置
alignX	水平對齊相對於滑鼠游標或目標元素	String（ ‘right‘, ‘center‘, ‘left‘, ‘inner-left‘, ‘inner-right‘）	$(‘#demo‘).poshytip({ 　　alignX: ‘center‘ });
alignY	垂直對齊相對於滑鼠游標或目標元素	String（ ‘bottom‘, ‘center‘, ‘top‘, ‘inner-bottom‘, ‘inner-top‘）	$(‘#demo‘).poshytip({ 　　alignY: ‘center‘ });
offsetX	設定提示框橫向位移	Number	$(‘#demo‘).poshytip({ 　　offsetX: 10 });
offsetY	設定提示框縱向位移	Number	$(‘#demo‘).poshytip({ 　　offsetY: 10 });
keepInViewport	設定提示始終顯示在視窗	Boolean	$(‘#demo‘).poshytip({ 　　keepInViewport: true });
allowTipHover	當滑鼠懸在tip上時，不隱藏tip	Boolean	$(‘#demo‘).poshytip({ 　　allowTipHover: true });
followCursor	提示跟隨游標移動	Boolean	$(‘#demo‘).poshytip({ 　　followCursor: true });
fade	使用fade動畫	Boolean	$(‘#demo‘).poshytip({ 　　fade: true });
slide	使用slide動畫	Boolean	$(‘#demo‘).poshytip({ 　　slide: true });
slideOffset	slide動畫相抵消	Number	$(‘#demo‘).poshytip({ 　　slideOffset: 1000 });
showAniDuration	顯示動畫時間長度	Number	$(‘#demo‘).poshytip({ 　　showAniDuration: 1000 });
hideAniDuration	隱藏動畫的期間	Number	$(‘#demo‘).poshytip({ 　　hideAniDuration: 1000 });
refreshAniDuration	非同步更新提示時，動畫的期間	Number	$(‘#demo‘).poshytip({ 　　refreshAniDuration: 1000 });

 

 方法：

.poshytip(‘show‘)	顯示提示框，前提提示框的alignTo參數被設定為‘target‘
.poshytip(‘showDelayed‘, [ timeout ] )	設定顯示提示框延遲時間
.poshytip(‘hide‘)	隱藏提示框
.poshytip(‘hideDelayed‘, [ timeout ] )	設定隱藏提示框延遲時間
.poshytip(‘update‘, content, [ dontOverwriteOption ] )	更新提示框內容
.poshytip(‘disable‘)	禁用提示框
.poshytip(‘enable‘)	啟用提示框
.poshytip(‘destroy‘)	徹底銷毀提示框

 小結：

　　提示無處不在，更多的提示才能協助使用者輕鬆的使用產品，不管是表單註冊提示、錯誤提示等等。希望你能夠喜歡這款提示外掛程式。

基於jQuery的tooltips外掛程式--poshytip