自定义JavaScript确认和警报消息框不使用回调

分享于 

7分钟阅读

Web开发

  繁體

介绍

许多JS框架提供自定义确认和警报消息框。 Message创建实现may不同于一个框架,但有一个常见的部分,用户选择总是由回调函数处理,因为在生成 inside 函数的多个确认消息框中,用户选择是messy的。

本文提供了自定义确认和警报消息框的示例,它们不使用回调,因此不会中断执行流。

Background

这一 概念 非常简单. 消息框初始化函数( VM.MsgBox.Start ) 存储调用方函数及它的所有参数,然后用户将它的选择消息框存储在 上面 函数中。 必须在生成确认/警报消息框的每个函数的开头调用 VM.MsgBox.Start。

要清除消息框堆栈,还需要一个函数( VM.MsgBox.Clear )。 必须从调用生成确认/警报消息框的函数的函数中调用 VM.MsgBox.Clear。

消息框 icon 由下列值之一定义:

VM.MsgBoxIcon = { 不包括: 0,信息:1,询问: 2,停止:3,自定义: 4 },,前四个值被认为应用于"系统"图标。

消息框结果由下列值之一定义:

VM.DlgResult = { ok: 0,取消:1,重试: 2,中止:3,忽略: 4,是:5,不: 6,自定义:-1,未知: 99 }

第一次确认所返回的结果总是为 VM.DlgResult.Unknown

VM.MsgBox.Confirm 和 VM.MsgBox.Alert 分别生成自定义确认和警报消息框。

两个函数都采用相同的参数集:

id: 消息框 id

msg: 消息框中显示的消息

icon: 系统消息框 icon

src: 自定义消息框的图像源

fn: 消息框回调函数用于设置消息框样式/颜色。

iGap: 在消息框文本与 icon 之间以像素为单位的margin

在消息框组件( 文本,复选框,进度条) 之间的垂直 margin: 垂直

最后四个参数是可选的。 如果生成了多个确认/警报消息框 inside 函数每个消息框必须有唯一的标识。

使用代码

这个演示项目包含一个单独的页面,它提供了。

页面初始化功能向员工表格添加少量记录,设置系统消息框图标,并为出生,性别和位置选择的雇员创建组合框。





function initPage()


{


 VM.SetLanguage('EN');


 VM_AddEventHandler("mainDiv", VM_EVT_BRESIZE, "OnBodyResized");


 var table = document.getElementById("employeeTbl");


 VM.SetAttr(table, "selOnClk", "1"); 


 VM.SetAttr(table, "clickFunc", "onRecSelected");


 // Adding few records


 addEmployee("Mark", "Smith", "1968;01;15;00;00;00", 0, 2);


 addEmployee("Stephany", "Brown", "1987;06;11;00;00;00", 1, 1);


 addEmployee("Michael", "Stivenson", "1956;11;02;00;00;00", 0, 0);


 // Initializing table adjuster (making table columns scalable & resizable)


 g_tblAdjuster = VM.TblAdjuster.Create();


 g_tblAdjuster.AddTable("employeeHdr", "employeeTbl", -1, true);


 g_tblAdjuster.AdjustTable("employeeHdr", true);


 // Setting message box icons


 VM.MsgBox.iconInfo = 'Images/mb_info.png';


 VM.MsgBox.iconExcl = 'Images/mb_excl.png';


 VM.MsgBox.iconQues = 'Images/mb_ques.png';


 VM.MsgBox.iconStop = 'Images/mb_stop.png';


 // Initializing combo boxes


 initCombos();


}



"添加","修改"还有"Delete"雇员按钮单击事件 are onButtonClick函数处理





function onButtonClick(m)


{


 // (m == 0) =>"Add" clicked; (m == 1) =>"Modify" clicked; (m == 2) =>"Delete" clicked


 // Calling VM.MsgBox.Clear to clear message box stack


 VM.MsgBox.Clear();


 editEmployee(m);


}



editEmployee函数在下列情况下生成"确认类型"消息框

  • 新的或者修改过的雇员( 最后一个名字和第一个名字的组合) MATCHES的完整 NAME,其中存在一个。
  • 选择的出生日期超出允许的时间间隔,使员工年龄小于 18年或者年的雇员。
  • 删除员工。

如果雇员或者第一个 NAME 是空的,则生成"警报类型"消息框。


function editEmployee(m)


{


 // Calling VM.MsgBox.Start


 VM.MsgBox.Start();


 var v = {f: "", l: "", d: "", g: -1, p: -1};


 var res = true;


 if (m == 2)


 {


 // Confirm record deletion


 res = g_custom? Confirm('conf_delete', g_msg[0], VM.MsgBoxIcon.Ques) : confirm(g_msg[0]);


 }


 else


 {


 v.f = document.getElementById("f_name").value;


 v.l = document.getElementById("l_name").value;


 if (v.f == '' || v.l == '')


 {


 // Either last or first name is empty


 var n = (v.f == '')? 4 : 5;


 if (g_custom)


 Alert(g_msg[n], VM.MsgBoxIcon.Excl);


 else


 alert(g_msg[n]);


 res = false;


 }


 else if (employeeExists(m, v.f, v.l))


 {


 // Employee with the specified <last name, first name> pair already exists


 res = g_custom? Confirm('conf_exists', g_msg[3], VM.MsgBoxIcon.Ques) : confirm(g_msg[3]);


 }


 if (res)


 {


 for (var i=0; i<3; i++)


 {


 var divID = (i == 2)? "pos_combo" : (i == 1)? "gend_combo" : "dob_combo";


 var div = document.getElementById(divID);


 var combo = div? VM.FindCtrlByParentDiv(div, true) : null;


 var list = combo? combo.m_obj : null;


 if (list)


 {


 if (i == 0)


 v.d = list.GetValue();


 else if (i == 1)


 v.g = list.GetCurSel();


 else


 v.p = list.GetCurSel();


 }


 }


 var resAge = validateDate(v.d);


 if (resAge > 0)


 {


 // Improper employee's date of birth selected


 res = g_custom? Confirm('conf_age', g_msg[resAge], VM.MsgBoxIcon.Ques) :


 confirm(g_msg[resAge]);


 }


 }


 }


 // If res == true => proceed with editing


 if (res)


 {


 if (m == 2)


 deleteEmployee();


 else if (m == 0)


 addEmployee(v.f, v.l, v.d, v.g, v.p);


 else


 modifyEmployee(v.f, v.l, v.d, v.g, v.p);


 if (m!= 1)


 {


 g_tblAdjuster.AdjustTable("employeeHdr", false);


 enableButtons();


 }


 }


}



根据用户函数选择的消息框类型,可以生成系统或者自定义消息框。

注意:这个项目中包含了包含消息框基类以及这个项目中使用的其他小部件库的脚本文件,这些类的格式是。


JAVA  Javascript  CAL  Message  BOX  调用