熱烈祝賀臺州維博網絡的站長論壇隆重上線!(2012-05-28)    熱烈慶祝偉大的祖國60周年生日 點擊進來我們一起為她祝福吧(2009-09-26)    站長論壇禁止發布廣告,一經發現立即刪除。謝謝各位合作!.(2009-08-08)    熱烈祝賀臺州網址導航全面升級,全新版本上線!希望各位一如既往地支持臺州網址導航的發展.(2009-03-28)    臺州站長論壇恭祝各位新年快樂,牛年行大運!(2009-01-24)    臺州Link正式更名為臺州網址導航,專業做以臺州網址為主的網址導航!(2008-05-23)    熱烈祝賀臺州Link資訊改名為中國站長資訊!希望在以后日子里得到大家的大力支持和幫助!(2008-04-10)    熱烈祝賀臺州Link論壇改名為臺州站長論壇!希望大家繼續支持和鼓勵!(2008-04-10)    臺州站長論壇原[社會瑣碎]版塊更名為[生活百科]版塊!(2007-09-05)    特此通知:新臺州站長論壇的數據信息全部升級成功!">特此通知:新臺州站長論壇的數據信息全部升級成功!(2007-09-01)    臺州站長論壇對未通過驗證的會員進行合理的清除,請您諒解(2007-08-30)    臺州網址導航|上網導航誠邀世界各地的網站友情鏈接和友誼聯盟,共同引領網站導航、前進!(2007-08-30)    禁止發廣告之類的帖,已發現立即刪除!(2007-08-30)    希望各位上傳與下載有用資源和最新信息(2007-08-30)    熱烈祝賀臺州站長論壇全面升級成功,全新上線!(2007-08-30)    
便民網址導航,輕松網上沖浪。
臺州維博網絡專業開發網站門戶平臺系統
您當前的位置: 首頁 » JavaScript/JQuery編程 » Colortip – jQuery文字信息提示插件簡介

Colortip – jQuery文字信息提示插件簡介

論壇鏈接
  • Colortip – jQuery文字信息提示插件簡介
  • 發布時間:2010-10-21 14:09:39    瀏覽數:5981    發布者:superadmin    設置字體【   
一、恩,前言
jQuery tip類的信息提示插件層出不窮,但是我都沒有介紹,為什么呢?就跟談戀愛一樣,雖然前面走過的女生不少,不錯的也不少,但是自己沒有談戀愛的心思,也是鴛鴦蝴蝶一場夢,非要在那個特定的時間點上,正好遇到一個人,覺得……于是……這就是所謂的緣分。所以,這里介紹這個Colortip信息提示插件,不是因為這個插件多么多么的好,長得多么多么的迷人,只是自己覺得是不是應該像以前一樣,分析介紹一些不錯的常用的插件啊,正好,今天讓我遇到了它,覺得好像還挺靠譜的,于是,就拿來成文。這就是緣分那!

小插件,內容不多。效果還湊合,至于兼容性,咳咳,因為是老外寫的插件,國外早就把IE6送回家養老了,所以,此插件基本上就沒有鳥IE6瀏覽器,但是,在我們偉大的中國,IE6還是很V5的,例如下面這張圖(淘寶網2010年8月20日首頁瀏覽器比例,來自“歲月如歌”):



所以,不能放任IE6不管哪,所以我簡單改了原插件CSS的幾個樣式,IE6下頁煥發光彩了, 所以文章最后下載demo的時候建議下載小張編輯版的哦 。

二、效果搶鮮
您可以狠狠地點擊這里:Colortip信息提示插件demo




鼠標移到demo頁面的橙紅色鏈接上就會看到各種顏色的信息提示框啦!

三、如何使用
我們需要用到一個CSS樣式文件,jQuery庫文件,還有就是插件js文件,完整的鏈接代碼如下:

<link rel="stylesheet" href="colortip/colortip-1.0-jquery.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="colortip/colortip-1.0-jquery.js"></script>
一般這類jQuery插件的使用都是很簡單的。最簡單的用法就是:選擇器.colorTip();,例如:

$("#test").colorTip();
要想有效果,貌似綁定的元素需要有title屬性,所以,上述代碼的效果就是,鼠標移到id為test的元素上,會顯示黃色的提示框,提示框中的內容就是title屬性里面的內容。

當然,你可以專門指定彈框的顏色,此插件有六種不同的彈框顏色可供選擇,分別是:紅色(red)、綠色(green)、藍色(blue)、白色(white)、黃色(yellow)和黑色(black)。
例如demo的綁定代碼如下:

$(".demo a").colorTip({color:'yellow'}); 就是顯示黃色的信息彈框。

細心的你應該發現,demo頁面里的彈框不都是黃色的啊,還有綠色、藍色等,這是為什么呢?這是因為此插件還可以通過class屬性指定彈出小框的顏色,如下圖所示:



此段鏈接樣式的顯示效果就是:



四、參考來源以及源文件下載
參考文章:Colortip – a jQuery Tooltip Plugin

原文的介紹很詳細,詳細到一點看的興趣也沒有,逐步分析CSS,然后分析插件是如何寫的,OMG!對于一般使用者而言,才不會關心這些東東呢。此插件的小三角是使用CSS的border屬性生成的,關于CSS border的圖形生成技術,可以參考我的“CSS border三角、圓角圖形生成技術簡介”一文,不過此插件原CSS文件并沒有兼顧IE6的border生成效果。

下載
英文原版打包源文件:colortips.zip(5.67K)

正如本文開頭提到的,原版源文件并沒有把IE6瀏覽器計算在內,所以IE6下的顯示是有問題的,一是border生成的三角有問題,二是彈出框的定位有問題。我對其CSS文件作了點簡單的修改,修復了IE6下的這些問題,所以,我個人是建議您下面的編輯版的源文件:

編輯版源文件下載:zxx.colortip.zip(5.96K)

本文原地址:http://www.zhangxinxu.com/wordpress/?p=1168,來自張鑫旭-鑫空間-鑫生活,訪問原出處更多優秀技術文章。
娛樂休閑專區A 影視預告B 音樂咖啡C 英語階梯D 生活百科
網頁編程專區E AMPZF HTMLG CSSH JSI ASPJ PHPK JSPL MySQLM AJAX
Linux技術區 N 系統管理O 服務器架設P 網絡/硬件Q 編程序開發R 內核/嵌入
管理中心專區S 發布網址T 版主議事U 事務處理
陕西快乐10分玩法 浙江省11选择5开奖结果 深圳风采预测 天津十一选五 宁夏11选五哪个软件可以买 赛车pk10 北京11选五5开奖历史查询 宁夏休彩11选5走势图 快乐双彩好运3奖金 上海时时乐开奖結果 浙江20选5复式金额奖金