Using DHTML Tooltips with AJAX

0 comments
DHTML Tooltips 是一個跨瀏覽器相容的程式庫,提供豐富的功能讓你可以輕鬆建立、自訂多樣的工具提示(Tooltip)或是彈跳式訊息(Pup-up Box)。

程式庫提供 Tip 函式接受訊息字串參數,而 TagToTip 函式則允許你提供元素的識別名稱以顯示其 HTML 的內容。這兩個函式的用法都相當簡單,在此就不再贅述,本文將會側重在兩者的併用,並透過範例逐步說明告訴你,如何結合 jQuery 的應用來動態載入伺服器所提供的提示訊息。

在以下的範例網頁片段中,你會看到座位平面圖,以及其所組成映射區域,並且繫結要實作動態提示訊息的 onmouseover 事件處理函式。
<img src="Images/seatingplan.png" usemap="#seatingPlan" />
<map name="seatingPlan">
<area shape="rect" id="Front Stalls" coords="22,100,493,236"
onmouseover="showSectionInfo(this, 61);" />
<area shape="rect" id="Rear Stalls" coords="22,252,492,388"
onmouseover="showSectionInfo(this, 62);" />
</map>

在定義 onmouseover 事件處理函式之前,我們先在 jQuery 的 DOM ready 事件中,預先建立一個供資料讀取的過程中顯示處理訊息的隱藏區塊,並將 Tooltips 程式庫中的 UnTip 函式繫結所有映射區域元素的 onmouseout 事件處理常式。
$(document).ready(function() {
$('<div></div>')
.attr('id', 'ajaxLoading')
.html('Loading...')
.hide()
.appendTo('body');

$("map[name='seatingPlan'] *")
.mouseout(UnTip);
});

當映射區域元素 onmouseover 事件被觸發時,將會執行以下函式並將所接收的傳遞參數做為請求參數,來進行遠端呼叫:
function showSectionInfo(element, sectionId) {
if (data(element) === undefined) {
tooltip.call(element, 'ajaxLoading');
$.ajax({
url: 'InfoHandler.ashx',
type: 'GET',
data: {
id: sectionId
},
dataType: 'html',
error: function(xhr) {
UnTip();
alert('The ajax request failed.');
},
success: function(response) {
data(element, response);
tooltip.call(element);
}
});
} else {
tooltip.call(element);
}
}

在叫用 jQuery 的 ajax 函式處理非同步請求前,會先透過以下所定義的 tooltip 函式叫用 TagToTip 函式將先前所建立的隱藏訊息顯示出來,以回應使用者的請求:
function tooltip(elementId) {
var options = [ABOVE, true, SHADOW, true];
if (elementId === undefined) {
Tip.apply(this, $.merge([data(this)], options));
} else {
TagToTip.apply(this, $.merge([elementId], options));
}
}

當 AJAX 請求成功後,會透過如下的 data 函式將回應結果暫存到元素物件中,提供給後續可能的相同觸發動作讀取之用,以避免冗餘的資料請求。
function data(element, value) {
return value === undefined ? $.data(element, 'tooltip') :
$.data(element, 'tooltip', value);
}

最後,再次呼叫 tooltip 函式將回應結果委由 Tip 函式顯示出來。

繼續閱讀...

jQuery Floating Layer Plugin

3 comments
在許多網站設計中,浮動圖層(Floating Layer)經常被應用在較長的網頁文件中,以呈現能隨著瀏覽器的捲軸移動的浮動廣告或選單。

Floating Layer Plugin 是以 jQuery 原型物件(Prototype Object)為基礎所擴充的外掛程式庫。相較於先前版本,這次的版本除了將程式碼最佳化外,也增添了若干的新功能。

makeFloating( [options] )
透過元素選取(Selector)將特定的 DOM 元素封裝為具有 jQuery 函式功能的外覆物件後,你可以呼叫此函式來建立自訂的浮動圖層。函式可以接受傳遞物件參數來提供選項設定屬性,如以下所示:
屬性型別說明
positionobject指定 x 和 y 屬性來控制浮動區塊的定位方式。除了絕對座標來定位外,你也可以在 x 軸指定 "left"、"right"、"center" 決定水平位置,在 y 軸指定 "top"、"bottom"、"center" 來決定垂直位置。
範例:
  • {x:0, y:250}
  • {x:'right', y:'top'}
durationnumber指定動畫的顯示速度,以毫秒為單位。
easingstring指定變速移動的特效。
fixedboolean指定是否要固定圖層位置而不隨捲軸移動。

應用範例
首先,除了必要的 jQuery 程式庫外,你還需要下載本程式庫並引入到你的網頁中。然後,在網頁的文件的主體中加入區塊圖層,如以下範例:
<div id="floatlayer" style="
width: 50px;
height: 50px;
border: solid 1px #cccccc;
background-color: #d0d0ff;
z-index: 100;
display: none">
<!-- Place your content here -->
</div>

接下來,你可以處理 jQuery 的 DOM ready 事件,在網頁載入完成後,選取如上的圖層元素並叫用 makeFloating 函式:
$(document).ready(function() {
$('#floatlayer').makeFloating();
});

在預設的情況下,浮動圖層會配合網頁的可見區域以水平置左、垂直置中的方式定位,且會隨瀏覽器的捲軸移動產生擺動(Swing)的動畫效果。如果要變更浮動圖層的預設行為,你可以透過物件參數提供自訂的選項設定。如以下範例會建立水平置右、垂直置中,並加入線性(Linear)動畫效果的浮動圖層:
$('#floatlayer').makeFloating({
position: { x: 'right', y: 'center' },
easing: 'linear'
});

因為程式所表現的動畫效果是透過 jQuery 的 animate 函式來實現,所以 easing 參數只能支援內建的 linearswing 兩種特效。如果內建的動畫效果不能符合你的期望,建議你可以搭配 Easing Plugin 來擴增多種慢入(Easing In)和慢出(Easing Out)的動畫效果,如以下範例就使用了更為順暢的慢出特效:
$('#floatlayer').makeFloating({
position: { x: 'right', y: 'center' },
easing: 'easeOutBounce'
});

當然,如果你不需要動態移動的效果,你也可以透過物件參數的 fixed 屬性來固定圖層的位置:
$('#floatlayer').makeFloating({
position: { x: 'right', y: 'center' },
fixed: true
});

另外,程式庫還提供 floatingPosition 函式,讓你可以在建立浮動圖層物件後,重新定位浮動的目標位置,如以下範例:
$('#floatlayer').floatingPosition({ x: 'center', y: 'center' });


Download jquery.floatinglayer.zip

繼續閱讀...