|
時(shí)常在某些朋友的blog中看到一個(gè)可供聊天的對(duì)話框，它能讓正在瀏覽這個(gè)站點(diǎn)的用戶進(jìn)行聊天。不過在我看來，這個(gè)功能形同雞肋——誰會(huì)知道哪些人正在瀏覽，又有哪些人可以聊天呢？不過今天在瀏覽LoveCherry的blog時(shí)發(fā)現(xiàn)在左側(cè)邊欄里出現(xiàn)了一個(gè)可供聊天的Live Messenger對(duì)話框，頓時(shí)讓我產(chǎn)生了興趣。不過知道這個(gè)東東的人似乎還不多，因此只能動(dòng)用搜索引擎了（在這里想再說一句多余的話，因?yàn)槲視r(shí)常會(huì)收到一些類似于“ASP.NET AJAX框架哪里可以下載”之類的問題，所以我建議那些朋友一定要養(yǎng)成先搜再問的習(xí)慣）。那么我們就先來看看這個(gè)東西具體是什么樣的吧。
首先，我們可以訪問這個(gè)頁(yè)面（http://settings.messenger./applications/CreateHtml.aspx），從中可以看出微軟提供了兩種方式供用戶使用Live Messenger的Web聊天功能。 提供一個(gè)鏈接（），點(diǎn)擊它則會(huì)彈出一個(gè)頁(yè)面可供聊天——于是別人就可以通過這個(gè)頁(yè)面與您聯(lián)系了。值得一提的是，圖標(biāo)也會(huì)根據(jù)用戶當(dāng)時(shí)的狀態(tài)不同而改變。 可以選擇是否允許匿名用戶使用Web Live Messenger（http://settings.messenger./applications/WebSettings.aspx）。 Live Demo 現(xiàn)在訪問LoveCherry的blog會(huì)發(fā)現(xiàn)他已經(jīng)將Web Live Messenger從邊欄撤下了。邊欄實(shí)在太窄，如果使用一個(gè)稍微長(zhǎng)一些的Nick就會(huì)被頂?shù)暮芨撸矣捎谝恍心茱@示的文字太少，用戶體驗(yàn)也很差。最后，我使用了“傳統(tǒng)”網(wǎng)頁(yè)內(nèi)嵌聊天對(duì)話框的做法。如果您現(xiàn)在正在瀏覽我的blog，就會(huì)發(fā)現(xiàn)頁(yè)面的右下角出現(xiàn)了一個(gè)矩形的Windows Live Messenger的圖片，點(diǎn)擊它則會(huì)顯示出一個(gè)300*400的Web Live Messenger聊天對(duì)話框。如果您覺得這個(gè)對(duì)話框擋著頁(yè)面上的內(nèi)容了，就可以點(diǎn)擊對(duì)話框左上角的關(guān)閉按鈕，這樣頁(yè)面上又只剩下了右下角的矩形圖片了。同時(shí)，我選擇了淡入淡出的效果來顯示/隱藏Web Live Messenger聊天對(duì)話框。這么做的目的只有一個(gè)，那就是讓用戶體驗(yàn)更酷一些。:) 現(xiàn)在大家可以試驗(yàn)一下Web Live Messenger的聊天功能了。不過請(qǐng)大家能夠訪問http://settings.messenger./applications/CreateHtml.aspx，在頁(yè)面中和自己的Live Messenger進(jìn)行聊天。如果您直接在我的blog上測(cè)試Web Live Messenger，我實(shí)在會(huì)忙不過來。:( 實(shí)現(xiàn) 實(shí)現(xiàn)并不復(fù)雜，我總共用了大約2個(gè)小時(shí)，其中還包括學(xué)習(xí)了一些jQuery的功能所花的時(shí)間。唉，沒想到我居然到現(xiàn)在才第一次使用這個(gè)如此了得的JavaScript框架。不得不說，如果您正在尋找一款方便您開發(fā)前端應(yīng)用程序的JavaScript框架，并且希望它足夠的小，那么jQuery很可能就是您需要的。與它強(qiáng)大的功能不相稱的是迷你的體積。一個(gè)經(jīng)過混淆，還沒有Gzip壓縮的jQuery腳本文件才26K大小，但是它帶給你的便利可以幫您節(jié)省大量的工作。 那么我們現(xiàn)在就開始吧，首先，我們需要讓W(xué)eb Live Messenger的聊天對(duì)話框能夠永遠(yuǎn)顯示在頁(yè)面的可視范圍之內(nèi)。要實(shí)現(xiàn)這個(gè)功能，關(guān)鍵還是在于對(duì)頁(yè)面中元素尺寸的計(jì)算。請(qǐng)看如下代碼： <script language="javascript" type="text/javascript">
function getClientBounds() { var clientWidth; var clientHeight; if ($.browser.msie) { clientWidth = document.body.clientWidth; clientHeight = document.body.clientHeight; } else if ($.browser.safari) { clientWidth = window.innerWidth; clientHeight = window.innerHeight; } else if ($.browser.opera) { clientWidth = Math.min(window.innerWidth, document.body.clientWidth); clientHeight = Math.min(window.innerHeight, document.body.clientHeight); } else { clientWidth = Math.min(window.innerWidth, document.documentElement.clientWidth); clientHeight = Math.min(window.innerHeight, document.documentElement.clientHeight); } return { width : clientWidth, height : clientHeight }; } function resetLiveMessengerPosition() { var clientBounds = getClientBounds(); var container = document.getElementById("liveMessengerContainer"); var scrollLeft = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); var scrollTop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); var containerLeft = scrollLeft + clientBounds.width - container.clientWidth – 5; var containerTop = scrollTop + clientBounds.height - container.clientHeight; $("#liveMessengerContainer").css( {top : containerTop + "px", left : containerLeft + "px"}); } <script>
以上getClientBounds方法通過判斷瀏覽器類型來得到頁(yè)面顯示區(qū)域的精確尺寸，而resetLiveMessengerPosition方法根據(jù)liveMessengerContainer元素的尺寸重設(shè)該容器在瀏覽器中的位置。這兩個(gè)方法談不上“技術(shù)”，而更像是一種“經(jīng)驗(yàn)”，它們都是我屬于所收藏的JavaScript代碼，如果大家需要的話也可以保留，或者需要時(shí)再來我的blog查找（其實(shí)我以前也有文章用到過這些方法）。需要注意的是，如果您使用了的是IE瀏覽器，在某些的頁(yè)面上可能會(huì)需要通過document.documentElement.clientWidth來獲得代碼（clientHeight也一樣），具體原因我正在調(diào)查，大家在使用時(shí)也請(qǐng)注意這點(diǎn)。 哎？那么resetLiveMessengerPosition方法該在什么時(shí)候調(diào)用呢？先不著急，我們?cè)賮韺?shí)現(xiàn)Web Live Messenger的顯示/隱藏，以及淡入淡出效果——為什么放在一起實(shí)現(xiàn)了？因?yàn)槲覀冇玫搅薺Query框架。請(qǐng)看如下代碼： <div id="liveMessengerContainer" style="position:absolute;">
<div style="border: solid 1px black; width:160; height: 39px; cursor:pointer; background-image:url(Messenger_Header_bg.gif)" id="liveMessengerThumb"> <img src="Messenger_logo_beta.gif" alt="使用Live Messenger聯(lián)系我" style="margin: 10px 10px 0px 9px;"/> </div> <table border="0" cellpadding="0" cellspacing="0" id="liveMessengerPanel"> <tr> <td valign="top"> <img id="hideLiveMessengerPanel" style="cursor:pointer; margin-right: 3px;" src="Messenger_close_sm.gif" alt="關(guān)閉" /> </td> <td> <iframe src="..." width="300" frameborder="0" style="border: solid 1px black; width: 300px; height: 400px;"></iframe> </td> </tr> </table> <div> <script language="javascript" type="text/javascript"> $("#liveMessengerPanel").hide(); $(document).ready(function(){ $(window).scroll(resetLiveMessengerPosition); $(window).resize(resetLiveMessengerPosition); resetLiveMessengerPosition(); $("#liveMessengerThumb").click(function(){ $("#liveMessengerThumb").fadeOut(500, function(){ $("#liveMessengerPanel").fadeIn(500, function(){ resetLiveMessengerPosition(); }); resetLiveMessengerPosition(); }); }); $("#hideLiveMessengerPanel").click(function(){ $("#liveMessengerPanel").fadeOut(500, function(){ $("#liveMessengerThumb").fadeIn(500, function(){ resetLiveMessengerPosition(); }); resetLiveMessengerPosition(); }); }); }); <script>
liveMessengerContainer容器中的內(nèi)容我就不進(jìn)行太多解釋了。同樣略過的還有jQuery的基本使用，不過相信有一定JavaScript基礎(chǔ)的朋友也能比較輕松地看懂。以上JavaScript代碼的第一句隱藏了聊天對(duì)話框，接著在jQuery中經(jīng)典的$(document).ready事件中對(duì)以有的元素進(jìn)行操作。首先，我們要求在用戶移動(dòng)了滾動(dòng)條（scroll），或者改變了瀏覽器大?。╮esize）時(shí)重新設(shè)置容器的位置。需要注意的是，我們接著需要顯式調(diào)用resetLiveMessengerPosition方法來對(duì)容器的位置進(jìn)行初始化。然后jQuery開始展現(xiàn)了它的神奇之處，短短幾行代碼即完成了淡入淡出的切換功能，讓人嘆為觀止。 至此，在頁(yè)面中嵌入一個(gè)Web Live Messenger的工作就完成了。 |
|
|
