GROX：用于确认Windows的简单DHTML Greybox

I needed a confirmation window that was not an actual popup window. I wanted this window to be modal, like any of the LightBox clones, and to persist until the Poor User made her choice. I also wanted to specify the caption of the buttons. Most important, I did not want to have to use an external JavaScript library.

我需要一个不是实际弹出窗口的确认窗口。 我希望该窗口像其他LightBox克隆一样是模态窗口，并且一直存在到贫穷用户做出选择为止。 我还想指定按钮的标题。 最重要的是，我不想使用外部JavaScript库。

After investigating several possible candidates, I found none of them to my liking. So I did what I always do - I created my own, and I call it "GROX" (short for "GRaybOX").

在调查了几个可能的候选人之后，我发现没有一个我喜欢。 因此，我做了我经常做的事情-创建了自己的公司，并将其称为“ GROX”（“ GRaybOX”的缩写）。

Even if you have no need for something like this, tThere are aspects of the code behind GROX that might be of interest: the concept of a class; the act of binding methods to objects; closures.

即使您不需要这样的东西，GROX背后的代码方面也可能会引起您的兴趣：类的概念； 将方法绑定到对象的行为； 关闭。

GROX has been tested in:

GROX已通过以下测试：

Internet Explorer 8.0.6001.18702

Internet Explorer 8.0.6001.18702

Firefox 3.5.6

Firefox 3.5.6

Opera 10.10, build 1893

Opera 10.10，内部版本1893

Safari 4.0.4 (531.21.10)

Safari 4.0.4（531.21.10）

1.组成 (1. Components)

GROX生成DOM元素和填充物，然后将其放入网页中的包装器<div />中。 它使用一个很小的.PNG图像来创建模态背景，例如Lightbox。

The popup "window" contains:

弹出窗口“窗口”包含：

a

一个

Title section

a

一个

Message section

a

一个

Button section

helper.js    Generic methods
grox.js       GROX-specific methods

CSS:
#div_modal_wrapper { display:block; }

HTML:
<div id="div_modal_wrapper"></div>

Here is GROX in action with the dark background:

这是使用深色背景的GROX：

2.演练 (2. Walkthrough)

“ grox.htm”是GROX的测试平台。 这是一个简短HTML页面，演示了GROX的功能：

Title

标题

If you want a specific title, you may enter one. If left blank, "Attention" will be used

如果需要特定标题，可以输入一个。 如果留空，将使用“注意”

Message

信息

You specify the message to display in the <textarea/>. Newlines are preserved, and HTML is allowed

您指定要显示在<textarea />中的消息。 保留换行符，并允许HTML

Keyboard

键盘

If you wish to allow the window to be closed via the keyboard, check this

如果您希望允许通过键盘关闭窗口，请选中此

Hide HTML Elements

隐藏HTML元素

If you need to hide those pesky <select/>, <iframe/> and <object/> elements, check this

如果您需要隐藏那些讨厌的<select />，<iframe />和<object />元素，请选中此

Light or dark background

浅色或深色背景

The modal background can either be light or dark; light is less obtrusive, dark more prominent

模态背景可以是浅色或深色。 光线不那么引人注目，黑暗更突出

Buttons

纽扣

For each GROX button, enter the letter of the prompt (letters are not case-sensitive)For example, to offer a "Yes" and "No" button, you would enter "YN" (dyslexic you're if "NY" or).

对于每个GROX按钮，请输入提示字母（字母不区分大小写）。例如，要提供“是”和“否”按钮，则需要输入“ YN”（如果您遇到“ NY”或）。

Currently there are twelve active buttons:

当前有十二个活动按钮：

A - Abort

A-中止

C - Cancel

C-取消

D - Dismiss

D-解雇

E - Exit

E-退出

F - Fail

F-失败

H - Help

H-帮助

I - Ignore

我-忽略

N - No

N-不

O - OK

好-好

Q - Quit

Q-退出

R - Retry

R-重试

Y - Yes

是-是的

NOTE: You can edit "grox.js" and add a caption to an unused button to make it active. You can even add more buttons by using the numbers "0" through "9" and the shifted number characters "!" through ")". In fact, [b]any[/b] single character can be used for a button (but "a" through "z" are treaded as "A" through "Z").

注意：您可以编辑“ grox.js”并将标题添加到未使用的按钮以使其处于活动状态。 您甚至可以通过使用数字“ 0”到“ 9”以及移位的数字字符“！”来添加更多按钮。 通过“）”。 实际上，[b]

Consider this nightmare: you specify only buttons that have no caption, then invoke GROX. With no active buttons, GROX will not allow the Poor User to make a selection! Worse, if you forget to enable keyboard input, GROX cannot be closed! This is Very Bad News for Betty User.

考虑一下这个噩梦：您只指定没有标题的按钮，然后调用GROX。 如果没有活动按钮，则GROX不允许贫困用户进行选择！ 更糟糕的是，如果您忘记启用键盘输入，则无法关闭GROX！ 对于Betty用户而言，这是非常不好的消息。

Fortunately, GROX provides a validation method for your button string, but it is up to you to use it. Since you might "forget", GROX examines your button string before it displays the modal popup, and if it is invalid, returns information to your web page about why GROX "isn't working":

幸运的是，GROX为您的按钮字符串提供了一种验证方法，但是您可以使用它。 由于您可能“忘记了”，因此GROX在显示模式弹出窗口之前会检查您的按钮字符串，如果无效，则将有关GROX为什么“不起作用”的信息返回到您的网页：

    {
        'id':'error', 
        'value':'@', 
        'text':'You must specify at least one button', 
        'index':-7
    }

NOTE: GROX will not display a popup without at least one button, even if the keyboard is

注意： GROX 没有情况下不会显示弹出 ，即使键盘是

enabled.

已启用。

You may specify as many buttons as you wish, but there is a practical limit: how many choices do you need to offer?

您可以指定任意数量的按钮，但是有一个实际的限制：您需要提供多少个选择？

You may specify the same button more than once (GROX assigns a unique id attribute to each button), although your users may misunderstand your intentions with more than a single "Abort" button.

您可以多次指定同一个按钮（GROX为每个按钮分配了唯一的id属性），尽管您的用户可能会通过多个“中止”按钮误解您的意图。

The "Show" button invokes the popup. Everything else is for testing purposes.

“显示”按钮将调用弹出窗口。 其他所有内容都是出于测试目的。

NOTE: For this discussion, the "Keyboard Is Active" and "Light BG" options are selected.

注意：在此讨论中，选择了“键盘处于活动状态”和“浅色BG”选项。

The most important part of the page is invoking GROX. Let's see how this is done:

该页面最重要的部分是调用GROX。 让我们看看如何做到这一点：

<script type="text/javascript">

    function click_show(e) {
        // Show the popup "window"
        ev = resolve_event(e); // (see "helper.js" for code)
        
        var check = GROX.check( { 'button':$('txt_button').value } ), // Validate our buttons
            list = GROX.list( { 'format':'array' } ), // List all active buttons
            how = {}, // Filled-in later
        //
        exknob;
        
        $('txt_button').value = check; // Validated buttons

        if (check.length === 0) {
            alert('Please check your button selections'\n\nValid buttons are\n\n' + list);
            $('txt_button').focus();
            
            return false;
        }
        var how = {
            'wrapper':'div_modal_wrapper',    // Where the "popup" will be created
            'title':$('txt_title').value,     // "Window" title
            'text':$('txa_message').value,    // Message to display
            'keyboard':$('chk_kb').checked,   // "true" to accept "x || X" (abort) from keyboard
            'nasty':$('chk_nasty').checked,   // "true" to hide problematic HTML elements
            'button':check,                   // e.g. "ARF" for "Abort", "Retry" and "Fail" buttons
            'bg_style':$('rad_light').checked, // "true" = light background, "false" = dark background
            'callback':callback               // Callback method (invoked upon GROX completion)
        };
        // Show our popup
        GROX.show(how);
        
        return false;
    }
    
    
    function page_load() {
        $('btn_show').onclick = click_show.bindEventListener(this);
        
        $('txt_button').value = 'arf';
        $('txa_message').value = base_text;
        
        $('lbl_button').innerHTML = 'Buttons (' + GROX.list({ 'format':'array' }) + '):';
    }

</script>

NOTE: For more information on binding methods to objects, please refer to my article "KAFKA: A Simple CAPTCHA Implementation", or see Step #9 in this article.

注意：有关将方法绑定到对象的更多信息，请参阅我的文章“ KAFKA：简单的验证码实现”，或参阅本文中的步骤9 。

You may wonder why there are no position, width or height values for the popup window? It is because GROX always sizes and centers itself dynamically (well, it tries real hard).

您可能想知道为什么弹出窗口没有位置，宽度或高度值？ 这是因为GROX始终会动态调整大小和居中（很努力）。

This apparent lack of positioning controls is not an oversight, I just didn't feel it was necessary for the initial

这种明显的定位控制不足并不是疏忽，我只是觉得最初没有必要

release of GROX.

GROX的发布。

The "callback" parameter is a JavaScript function you create and pass into GROX. When GROX completes, the function is invoked with the results from GROX (view the source for "grox.htm" for details).

“ callback”参数是您创建并传递给GROXJavaScript函数。 GROX完成后，将使用GROX的结果调用该函数

Next, GROX is drawn and the user is put in charge.

接下来，绘制GROX并由用户负责。

3.用户互动 (3. User Interaction)

如果调整窗口大小或上下滚动，则GROX会将其自身重新定位在屏幕中央。

After GROX has drawn the popup "window", there are two things the user can do:

GROX绘制弹出窗口“窗口”之后，用户可以执行以下两项操作：

Click one of the buttons

单击其中一个按钮

Press the "x" key

按下“ x”键

4. GROX背后的代码 (4. The Code Behind GROX)

GROX是具有私有属性和方法以及三个公开的（公共）方法的类：

show - Invoke GROX and display a modal popup "window"

show-调用GROX并显示模式弹出窗口“窗口”

list - Return a string or array of active buttons

列表-返回活动按钮的字符串或数组

check - Verifies (and returns) the list of buttons against the internal list

检查-根据内部列表验证（并返回）按钮列表

var HESSE = (function() {
    var private_property_1 = 'You cannot see this from outside HESSE';
    var private_property_2 = 'HESSE shares this with you';
    
    function private_method_1(parm) {
        alert(private_property_1 + '\t\n' + arg); // Show the world one of my secrets and the passed parameter
        
        return private_property_2; // Make private property visible (NOT public)
    }
    // Exposed (public) methods
    return { // Bracket must be on same line to avoid JavaScript misunderstanding our intent
        'public_method_1' : function(parm) { return private_method_1(parm); }
    };
})();

var result = HESSE.public_method_1('arlo'); // VALID

var secret_1 = HESSE.private_property_1; // INVALID

HESSE.private_method_1('fred'); // INVALID

    function show_modal(how) {
        // Expects
        //    wrapper   DOM container
        //    title     Popup title (optional)
        //    text      Popup message
        //    keyboard  "true" if keyboard is active
        //    nasty     "true" to hide problematic HTML elements
        //    button    String of button IDs
        //    callback  Method invoked upon completion
        
        parm = how; // Save for later
        
        // Validate selected buttons
        if (verify_options(how) === '') {
            alert('You must specify at least one button');
            return { 'id':'error', 'value':'@', 'text':'You must specify at least one button', 'index':-7 };
        }
        // Create event sinks
        if (parm.keyboard) {
            // Allow for "x" and/or "X" to close popup
            document.onkeypress = key_press.bindEventListener(this);
        }
        window.onscroll = reposition.bindEventListener(this);
        window.onresize = reposition.bindEventListener(this);
        
        // Hide pesky HTML elements?
        if (parm.nasty) {
            show_hide_nasty('hidden');
        }
        // Build and show the popup "window"
        var result = build_it(parm);
    }

NOTE: The "alert()" is optional; as long as you check the return value of a GROX invocation, you can handle errors silently.

注意： “ alert（）”是可选的； 只要检查GROX调用的返回值，就可以静默处理错误。

Since we know there are buttons to display, we save the original arguments for later; if the keyboard is to be active, we bind the "key_press" method; we bind the "reposition" method to window events; we hide HTML elements (if requested); finally, we invoke the private method "build_it" with our parameters.

由于我们知道有要显示的按钮，因此我们将保存原始参数供以后使用。 如果要激活键盘，则绑定“ key_press”方法； 我们将“重新定位”方法绑定到窗口事件； 我们隐藏HTML元素（如果需要）； 最后，我们使用参数调用私有方法“ build_it”。

When the user has made her choice, GROX builds an object for sending back through the supplied callback method. Its structure is the same as the invalid button result, only the content differs:

用户做出选择后，GROX将构建一个对象，用于通过提供的回调方法发送回。 其结构与无效按钮结果相同，只是内容不同：

BUTTON CLICK:
{
    'id':'btn_modal_2_F',
    'value':'F',
    'text':'Fail',
    'index':2 
} 

KEY PRESS:
{
    'id':'keyboard',
    'value':'#',
    'text':String.fromCharCode(key), // text is "x" or "X"
    'index':-7 
}

    function hide_modal(obj) {
    // Tear down the popup structure
    
        // Un-bind button events
        for (var i = 0; i < opt_btn.length; i += 1) {
            $(opt_btn[i].id).onclick = '';
        }
        // If keyboard is active, unbind "keypress"
        if (parm.keyboard) {
            document.onkeypress = '';
        }
        // Un-bind window events
        window.onscroll = '';
        window.onresize = '';
        
        // Remove modal DOM elements (close the "window")
        delete_children($(parm.wrapper));
        
        // Show pesky HTML elements?
        if (parm.nasty) {
            show_hide_nasty('visible');
        }
        return parm.callback(obj);
    }

5.模态模型 (5. The Modal Model)

GROX为模态背景创建一个外部<div />（“外部”），用.PNG图像对其进行绘制，并将z-index设置为998（任意值）。 然后，它为伪窗口创建一个内部<div />（“内部”），并在其中填充标题，消息和按钮。 “内部”的Z索引为999（出现在“外部”的正上方）。

NOTE: The z-index of "inner" must be greater then that of "outer".

注意： “内部”的z索引大于“外部”的z索引。

CSS is applied to the DOM elements as they are created, then they are appended to "inner". Then "inner" is appended to "outer", and "outer" is appended to the supplied wrapper <div/>, presenting a modal confirmation window to the user.

在创建DOM元素时将CSS应用于CSS元素，然后将其附加到“内部”。 然后，将“内部”附加到“外部”，并将“外部”附加到提供的包装器<div />，向用户提供模式确认窗口。

NOTE: Rather than all of this DOM-manipulation, I could have created a framework HTML page and Ajaxed it up from the server. Since the buttons are dynamic, they would still have to be inserted into the page. I reasoned the DOM is the best fit, even with all of the code required.

注意：我可以创建一个框架HTML页面，然后从服务器中对其进行Ajax处理，而不是所有这些DOM操作。 由于按钮是动态的，因此仍必须将其插入页面。 我认为DOM是最合适的，即使所有必需的代码也是如此。

There are a few things that could be done to improve GROX:

为了改善GROX，可以做一些事情：

Provide CSS for the buttons (colors, font, etc.)

提供按钮CSS（颜色，字体等）

Provide text for the button title (as a new parameter for GROX)

提供按钮标题的文本（作为GROX的新参数）

Add an icon for window close (and the accompanying click event code)

添加一个用于关闭窗口的图标（以及随附的点击事件代码）

Add a time-out mode, where inactivity after

添加一个超时模式，在此模式之后不活动

n seconds triggers an abort

Specifying the button title for each button might be overkill.

为每个按钮指定按钮标题可能会过大。

The ability to make GROX more flexible will make setting the parameters for GROX harder, perhaps even too unwieldly; if so, then I will not consider them further. My goal is to make GROX simple to use.

使GROX更加灵活的能力将使GROX的参数设置更加困难，甚至可能太笨拙。 如果是这样，那么我将不再考虑它们。 我的目标是使GROX易于使用。

The window close and time-out features seem useful, and I might tackle them at a later date.

窗口关闭和超时功能似乎很有用，我可能稍后再解决。

6.对象作为函数的参数 (6. Objects As Parameters To Functions)

你们中的有些人可能会质疑我将对象作为函数参数传递的习惯。 为此，我说：“首先要明确”。 我的意思是，避免混淆不只是一个建议，是吗？

In my experience, few things are as frustrating as a parameter list: is it in order; is it complete; did I forget

以我的经验，没有什么比参数列表令人沮丧的了：顺序是否正确？ 它完成了吗？ 我忘记了吗

something; how do I not supply a parameter? The answer is, "Yes", "Yes", "Most likely" and "You can't".

东西 如何不提供参数？ 答案是“是”，“是”，“最有可能”和“您不能”。

All of this can be avoided by using objects for parameters to functions. Sure, they are a bit cumbersome, and

通过使用对象作为函数的参数，可以避免所有这些情况。 当然，它们有点麻烦，并且

sometimes seem like overkill, but remember back when you had finished that perfect app, but Marketing asked for "just one more little change" and you had to adjust the parameter list and recompile umpteen dependent programs to comply with their moronic request? Well, adding a new parameter to an object is trivial, and it won't break anything. New code can use the parameter, and old code never expected it so it won't care. Or crash.

有时看起来有些矫kill过正，但是还记得当您完成了完美的应用程序时，但是Marketing要求“再做一点改动”，而您必须调整参数列表并重新编译众多依赖程序以符合他们的moronic要求？ 好吧，向对象添加新参数是微不足道的，并且不会破坏任何内容。 新代码可以使用该参数，而旧代码从未使用过该参数，因此它不会在乎。 或崩溃。

When a function receives an object instead of multiple arguments, there can be no doubt about what was sent. Missing entries are easily identified and set to a default value. All of the properties and/or methods can be iterated over, documented, displayed and acted upon.

当一个函数接收一个对象而不是多个参数时，毫无疑问发送了什么。 丢失的条目易于识别，并设置为默认值。 可以迭代，记录，显示和执行所有属性和/或方法。

This can be done, to a lesser degree, by using the arguments object available to every JavaScript function, but beware:

通过使用每个JavaScript函数可用的arguments对象，可以在较小程度上做到这一点，但请注意：

This object is

这个对象是

like not

You cannot retrieve an argument by name (except by its index number)

您不能按名称检索参数（按索引号除外）

Missing or mis-ordered arguments cause havoc with your code

参数缺失或顺序错误会严重破坏您的代码

There are some cases where this approach does not make sense: the internal functions of a class may not need the flexibility an object provides because they are invoked within the class structure. They are not exposed to the world so the class can control what goes into and comes out of them.

在某些情况下，这种方法没有意义：类的内部函数可能不需要对象提供的灵活性，因为它们是在类结构中调用的。 他们没有暴露于世界，因此班级可以控制进入和离开他们的事物。

7.保固 (7. Warranty)

该软件按原样提供。 不会尝试诊断和/或修复由于使用此代码而引起的问题。 特此授予Experts-Exchange将代码提供给他人的权利，但我保留唯一所有权。

8.安装 (8. Installation)

存档中有五个文件：

grox.htm - Testbed for GROX

grox.htm-GROX测试台

grox.js - Code for implementing GROX

grox.js-用于实现GROX的代码

helper.js - Generic helper methods

helper.js-通用帮助器方法

grox_dark.png - Dark background for the modal <div/>

grox_dark.png-模态<div />的深色背景

grox_light.png - Light background for the modal <div/>

grox_light.png-模态<div />的浅色背景

http://YOUR_SERVER_NAME/grox/grox.htm into your browser and try it. 将http：//YOUR_SERVER_NAME/grox/grox.htm插入浏览器并尝试。

9.结论 (9. Conclusion)

将绑定方法绑定到对象的功劳完全归功于 Daniel Brockman; I simply use his idea. It is complex, but worth the time taken to grok its potential. Daniel Brockman ； 我只是用他的想法。 它很复杂，但是值得花时间挖掘其潜力。

I welcome your comments and criticism, both good and bad.

我欢迎您的评论和批评，无论好坏。

grox.zip grox.zip

翻译自: https://www.experts-exchange.com/articles/2235/GROX-A-Simple-DHTML-Greybox-For-Confirmation-Windows.html