jQuery 建立動態顯示區塊
在網頁上經常會有如此的需求：在輸入時點選按鍵顯示一個清單視窗讓使用者來選取。
一般來說第一個想到的做法就是透過 window.open 開啟另一個頁面，然後選取資料後再將資料傳回。但畢竟來說多開一個視窗，就是一個麻煩。
因此可以利用 DIV 標籤與 Z-Index 的關係，來產生一個區塊，而這個區塊是由 jQuery 動態產生。而裡面所要顯示的內容，可以是靜態資料，也可以是透過 Callback 取回來的資料，當然要透過 ajax 也是可行的。
以下為 JavaScript 程式碼
var __ReturnID;
//定義區塊的背景顏色，當背景色為透明或是未設定時則會以白色取代
var __BGColor;
//開啟動態視窗 (指定資料回傳存放的欄位ID)
function OpenDynamicWindow(ReturnID)
{
if (ReturnID == undefined) ReturnID = $(event.srcElement.id).selector;
__ReturnID = ReturnID;
__CreateDynamicWindow();
__ShowDynamicWindow();
}
//更新動態視窗內顯示的內容 (要更新的內容) *此處為清單表格的原始碼*
function UpdateDynamicWindow(UpdateHtmlCode)
{
if ($.trim(UpdateHtmlCode) == '') return;
$('#__DynamicWindow').html(UpdateHtmlCode);
$('#__DynamicWindow tr').on('mouseover', function () { __ShowSelectionBar(); });
$('#__DynamicWindow tr').on('mouseout', function () { __HideSelectionBar(); });
$('#__DynamicWindow tr').on('click', function () { __PassSelectionValue(); });
$('#__DynamicWindow tr:first').off();
$('#__DynamicWindow tr:last').off();
}
//刪除動態視窗
function RemoveDynamicWindow()
{
if ($('body').has($('#__DynamicWindow')).length) $('#__DynamicWindow').detach();
}
//不顯示動態視窗
function CloseDynamicWindow()
{
$('#__DynamicWindow').css('display', 'none');
}
//顯示選取的光棒
function __ShowSelectionBar()
{
var curObj;
if (event.currentTarget != undefined)
{
curObj = event.currentTarget;
}
else
{
curObj = event.srcElement.parentElement;
}
$(curObj).css({
backgroundColor: '#0000FF',
color: '#FFFFFF'
});
}
//隱藏選取的光棒
function __HideSelectionBar()
{
var curObj;
if (event.currentTarget != undefined)
{
curObj = event.currentTarget;
}
else
{
curObj = event.srcElement.parentElement;
}
$(curObj).removeAttr('style');
}
//將選取資料傳回
function __PassSelectionValue(TargetID)
{
var curObj;
if (event.currentTarget != undefined)
{
curObj = event.currentTarget;
}
else
{
curObj = event.srcElement.parentElement;
}
if (TargetID != undefined)
{
$('#' + TargetID).val($(curObj).children()[1].innerText);
}
else
{
$('#' + __ReturnID).val($(curObj).children()[0].innerText);
}
CloseDynamicWindow();
}
//建立動態視窗
function __CreateDynamicWindow()
{
if ($('body').has($('#__DynamicWindow')).length)
{
$('#__DynamicWindow').css('display', 'none');
}
else
{
if ((__BGColor == undefined) || (__BGColor==''))
{
$BGColor = $('body').css('backgroundColor');
if ($BGColor == 'transparent') $BGColor = '#FFFFFF';
}
else
{
$BGColor = __BGColor;
}
$('body').append('<div id=\'__DynamicWindow\'></div>');
$('#__DynamicWindow').css({
top: 0,
left: 0,
borderWidth: 1,
borderStyle: 'solid',
borderColor: '#808080',
backgroundColor: $BGColor,
display: 'none',
paddingLeft: 2,
paddingRight: 2,
paddingTop: 2,
paddingBottom: 2,
width: 300,
position: 'absolute',
zindex: 99
});
}
}
//顯示動態視窗
function __ShowDynamicWindow()
{
var PosHeight = $('#' + __ReturnID).height();
var NewTop = __getOffset($('#' + __ReturnID).get(0), 'offsetTop') + PosHeight + 8;
var NewLeft = __getOffset($('#' + __ReturnID).get(0), 'offsetLeft') + 1;
$('#__DynamicWindow').css({
top: NewTop,
left: NewLeft,
display: 'block'
});
}
//取得相對座標
function __getOffset(node, attr)
{
var rtnVal = 0;
while (node)
{
rtnVal += node[attr];
node = node.offsetParent;
}
return rtnVal;
}
網頁原始碼
<table border="0" style="border-collapse: collapse;">
<tr>
<td><input type="text" id="TT001" readonly="readonly" style="cursor: default;" /></td>
<td>唯讀輸入框，點選後開啟動態區塊來選取資料</td>
</tr>
<tr><td colspan="2"> </td></tr>
<tr>
<td>
<input type="text" id="TT002" readonly="readonly" style="cursor: default;" />
<input type="button" id="btn002" value="選取" />
</td>
<td>唯讀輸入框，點選按鍵或是輸入區塊，開啟動態區塊來選取資料</td>
</tr>
</table>
<!-- 測試用的資料 -->
<div id="TestData" style="display: none;">
<table border="1" style="width: 100%; border-collapse: collapse;">
<tr style="background-color: #FFFF99">
<td width="100px" style="text-align: center;">代號</td>
<td width="200px" style="text-align: center;">簡稱</td>
</tr>
<tr>
<td style="text-align: center;">11</td>
<td>aa</td>
</tr>
<tr>
<td style="text-align: center;">22</td>
<td>bb</td>
</tr>
<tr>
<td style="text-align: center;">33</td>
<td>cc</td>
</tr>
<tr>
<td style="text-align: center;">44</td>
<td>dd</td>
</tr>
</table>
<div style="height: 5px;"></div>
<table border="0" style="width: 100%; border-collapse: collapse;">
<tr>
<td style="text-align: center;">
<input type="button" id="__PageTop" value="首頁" />
</td>
<td colspan="2" style="text-align: center;">
<input type="button" id="__PageUp" value="上頁" />
</td>
<td style="text-align: center;">
<input type="button" id="__PageDown" value="下頁" />
</td>
<td style="text-align: center;">
<input type="button" id="__PageBottom" value="末頁" />
</td>
<td style="text-align: center;">
<input type="button" id="__PageClose" value="關閉" onclick="CloseDynamicWindow();" />
</td>
</tr>
</table>
</div>
<!-- 測試用的資料 -->
</body>因為是測試用的，所以就塞了一個測試用的資料 #TestData。頁面在載入時，請務必要引入 jQuery 的程式碼。
另外在頁面載入完成後，透過 jQuery 來繫結相關的事件，當然也是可以寫在相對的控制項中。
{
var $TestData = $('#TestData').html();
$('#TT001').click(function ()
{
OpenDynamicWindow();
UpdateDynamicWindow($TestData);
});
$('#TT002').click(function ()
{
OpenDynamicWindow();
UpdateDynamicWindow($TestData);
});
$('#btn002').click(function ()
{
OpenDynamicWindow('TT002');
UpdateDynamicWindow($TestData);
});
});
執行畫面
程式是運氣與直覺堆砌而成的奇蹟。
若不具備這兩者，不可能以這樣的工時實現這樣的規格。
修改規格是對奇蹟吐槽的褻瀆行為。
而追加修改則是相信奇蹟還會重現的魯莽行動。