inprocess view
方案一
function inprocess_view_show(msg) {
$('<div id="inprocess"></div>').css({
'position':'fixed',
'top':'0px','right':'0px','bottom':'0px','left':'0px',
'width':'100%', 'height':'100%',
'opacity':'0.6',
'background-color':'black',
'z-index':'999'
}).appendTo($('body'));
$('<div>' + '<span id="inprocess_msg">' + msg + '</span>' + '<br><img src="/icons_eng/graph_inprocess.gif" width="30" height="30"></div>').css({
'position':'absolute',
'text-align':'center',
'font-size':'22px','font-weight':'bold',
'color':'white',
'top':'50%','left':'50%',
'-webkit-transform':'translate(-50%, -50%)',
'opacity':'1',
'z-index':'1000'
}).appendTo($('#inprocess'));
}
function inprocess_view_hide() {
$('#inprocess').remove();
}
用法
inprocess_view_show('連線中...'); // 顯示
inprocess_view_hide(); // 隱藏
方案二
function setProgress(show) {
var $o = $('#inprocess');
if ($o.length == 0) {
/* create inprocess view */
$('<div id=\"inprocess\"></div>').appendTo($('body'));
$('<div><img src="' + sysconfig.iconInprocess + '" width="30" height="30" border="0" align="absmiddle"></div>').appendTo($('#inprocess'));
}
$('#inprocess').css('display', show ? 'block' : 'none');
}
用法
setProgress(true); // 顯示
setProgress(false); // 隱藏
排序( [ ] 陣列排序)
/* --- sort -------------------------------------------------------------------------------------------
* 用法：
* 1. onload 呼叫 sort_addData(name, type, default_f, showDataFunc);
* name: 排序的結構名稱
* type: 排序的類型 ("string" / "int" / "float")
* default_f: 是否為排序預設值 (true / false)
* showDataFunc: 為排序時顯示資料的func (和 default_f 一起設定即可)
*
* 2. ui.c 的 onclick 呼叫 return sort_it('排序的結構名稱');
* 3. 抓到資料時呼叫 sort_showList(要排序的陣列);
*/
var sort_order = 'asc'; // 'asc ' / 'desc'
var sort_name = '';
var sort_data = [];
var sort_showFunc;
function sort_addData(name, type, default_f, showDataFunc) {
sort_data.push({ "name":name, "type":type });
if(default_f) {
sort_name = name;
sort_showFunc = showDataFunc;
}
}
function sort_it(name) {
if(sort_name == name) {
if(sort_order == 'asc')
sort_order = 'desc';
else
sort_order = 'asc';
} else {
sort_name = name;
}
/* set img */
{
var sortImg = $('.button_sort_style img');
for(var i=0; i<sortImg.length; i++)
sortImg[i].src = "../icons_eng/graph_" + sort_order + "end_" + (sort_name == sort_data[i].name ? '1' : '0') +".gif";
}
/* 顯示 */
if(sort_showFunc)
sort_showFunc();
}
function sort_compareFnString(a, b) {
return (a < b) ? -1 : (a > b) ? 1 : 0;
}
function sort_compareFnInt(a, b) {
return parseInt(a) - parseInt(b);
}
function sort_compareFnFloat(a, b) {
return parseFloat(a) - parseFloat(b);
}
function sort_compareFn(data, a, b) {
var ret;
switch(data.type) {
case "string":
ret = sort_compareFnString(a[data.name], b[data.name]);
break;
case "int":
ret = sort_compareFnInt(a[data.name], b[data.name]);
break;
case "float":
ret = sort_compareFnFloat(a[data.name], b[data.name]);
break;
}
return ret;
}
function sort_showList(list) {
list.sort(function(a, b) {
var ret = 0;
var firstIndex = -1;
/* 先排指定的 */
for(var i=0; i<sort_data.length; i++) {
if(sort_data[i].name == sort_name) {
ret = sort_compareFn(sort_data[i], a, b);
firstIndex = i;
break;
}
}
/* 指定值相同的話再排其他的 */
for(var i=0; i<sort_data.length; i++) {
if(ret != 0)
break;
if(i != firstIndex)
ret = sort_compareFn(sort_data[i], a, b);
}
return (sort_order == 'asc') ? ret : (ret * -1)
});
}
ui.c
{
"<table width=\"%d\" border=\"0\" cellPadding=\"%s\" cellSpacing=\"%s\" class=\"MainTable\" id=\"showList_table\">\n"
"<tr class=\"FstCol\">"
"<td width=\"30%%\"%s><button type=\"%s\" class=\"button_sort_style\" onFocus=\"this.blur();\"%s%s>%s %s</button></td>\n"
...
"</tr>"
"<tr class=\"Col\"><td></td>...</tr>"
...
"</table>"
, HTML_TABLE_WIDTH, TABLE_CELLPADDING, TABLE_CELLSPACING
, COMMON_SORTING_BT_EVENT, submitSWITCH(0), DO_SHOW(show_f && IS_VIEWABLE(privilege), " onClick=\"return sort_it('sort_name');\"")
, COMMON_SORTING_TIPS(Name2Str(NULL, "${COMMON_NAME_STR}")), Name2Str(NULL, "${COMMON_NAME_STR}"), COMMON_SORTING_ICONS(0,0)
}
頁數
/* --- page -------------------------------------------------------------------------------------------
* 用法：
* 1. onload 呼叫 page_Init(TopID, BottomID, showDataFunc);
* TopID: 為放 ui_segment(0, 1, 0, show_f) td 的 ID 名稱, 比如： '#pageTop'
* BottomID: 為放 ui_segment(0, 1, 0, show_f) td 的 ID 名稱, 比如： '#pageBottom'
* showDataFunc: 為換頁時顯示資料的func
*
* 2. 資料長度有變動時呼叫 page_it(資料長度, 每頁顯示筆數);
*/
var page_current = 0; // 從0開始
var page_max = 0; // 從0開始
var page_topID = '';
var page_bottomID = '';
var page_dataLen = 0;
var page_dataMaximum = 20;
function page_Init(topID, bottomID, showDataFunc) {
page_topID = topID;
page_bottomID = bottomID;
page_InitEntry(page_topID, showDataFunc);
page_InitEntry(page_bottomID, showDataFunc);
}
function page_it(len, maximum) {
page_CalcMax(len, maximum);
page_Entry(page_topID);
page_Entry(page_bottomID);
}
function page_CalcMax(len, maximum) {
page_dataLen = len;
page_dataMaximum = maximum;
page_max = (maximum == 0) ? 0 : (len / maximum);
if((page_max % 1) > 0) {
page_max -= page_max % 1;
page_max++;
}
if(page_max > 0)
page_max--;
if(page_current > page_max)
page_current = page_max;
}
function page_InitEntry(name, showFunc) {
var pageInput = $(name).find("input");
var pageButton = $(name).find("button");
pageInput.attr("disabled", false);
pageButton.attr("disabled", false);
pageButton[0].onclick = function () {
if(page_current != 0) {
page_current = 0;
page_Entry(page_topID);
page_Entry(page_bottomID);
showFunc();
}
return false;
};
pageButton[1].onclick = function () {
if(page_current > 0) {
page_current--;
page_Entry(page_topID);
page_Entry(page_bottomID);
showFunc();
}
return false;
};
pageButton[2].onclick = function () {
var pageSet = $(name).find("input").val();
if(pageSet > 0)
pageSet--;
if(pageSet >= 0 && page_current != pageSet) {
if(pageSet > page_max) {
page_current = page_max;
} else
page_current = parseInt(pageSet);
page_Entry(page_topID);
page_Entry(page_bottomID);
showFunc();
}
return false;
};
pageButton[3].onclick = function () {
if(page_current < page_max) {
page_current++;
page_Entry(page_topID);
page_Entry(page_bottomID);
showFunc();
};
return false;
};
pageButton[4].onclick = function () {
if(page_current != page_max) {
page_current = page_max;
page_Entry(page_topID);
page_Entry(page_bottomID);
showFunc();
}
return false;
};
}
function page_Entry(name) {
var pageImg = $(name).find("img");
var pageNumStr = $(name).find("span").parent();
/* set img */
pageImg[0].src = (page_max && page_current > 0) ? "../icons_eng/common_bt_black_first.gif" : "../icons_eng/common_bt_gray_first.gif";
pageImg[1].src = (page_max && page_current > 0) ? "../icons_eng/common_bt_black_prev.gif" : "../icons_eng/common_bt_gray_prev.gif";
pageImg[2].src = (page_max && page_current < page_max) ? "../icons_eng/common_bt_black_next.gif" : "../icons_eng/common_bt_gray_next.gif";
pageImg[3].src = (page_max && page_current < page_max) ? "../icons_eng/common_bt_black_last.gif" : "../icons_eng/common_bt_gray_last.gif";
/* set text */
$(name).find("input").val(page_current + 1);
pageNumStr.html(' <span style="font-size: 14px;">/</span> ' + (page_max + 1));
}
ui.c
string = my_string(string,
"<table width=\"%d\" cellPadding=\"%s\" cellSpacing=\"%s\">\n"
"<tr class=\"TextAttr\">\n"
"<td align=\"left\"> </td>\n"
"<td align=\"center\"> </td>\n"
"<td align=\"right\" id=\"pageBottom\">%s</td>\n"
"</tr>\n"
"</table>\n"
, HTML_TABLE_WIDTH, TABLE_CELLPADDING, TABLE_CELLSPACING
, ui_segment(0, 1, 0, show_f)
);
沒有留言:
張貼留言