From 6dffcdbcee056a0540d6624865a1c5649f805e3d Mon Sep 17 00:00:00 2001 From: Stefan Gabos Date: Tue, 22 Oct 2024 15:40:57 +0300 Subject: [PATCH] Updated examples --- flat.html | 136 ++++++++++++++++++++++++++++++++++++----------- index.html | 136 ++++++++++++++++++++++++++++++++++++----------- materialize.html | 136 ++++++++++++++++++++++++++++++++++++----------- 3 files changed, 315 insertions(+), 93 deletions(-) diff --git a/flat.html b/flat.html index 9c9f999..da57745 100644 --- a/flat.html +++ b/flat.html @@ -18,9 +18,9 @@ - + - Zebra Dialog - a small, compact, and highly configurable jQuery plugin for creating modal dialog boxes + Zebra Dialog - a small, compact, mobile-friendly and highly configurable jQuery plugin for creating modal dialog boxes @@ -46,7 +46,7 @@

Zebra Dialog

-

a small, compact, and highly configurable jQuery plugin for creating modal dialog boxes

+

a small, compact, mobile-friendly and highly configurable jQuery plugin for creating modal dialog boxes

Download @@ -67,7 +67,7 @@

Zebra Dialog

Zebra Dialog is a small, compact (one JavaScript file, no dependencies other than jQuery 1.7.0+) - and highly configurable jQuery plugin for creating responsive modal dialog boxes, meant to replace + mobile-friendly and highly configurable jQuery plugin for creating responsive modal dialog boxes, meant to replace native JavaScript alert, confirmation and prompt dialogs.

@@ -128,12 +128,12 @@

Zebra Dialog

The six dialog box types are: - confirmation, - error, - information, - prompt, - question and - warning + confirmation + error + information + prompt + question + warning
@@ -177,7 +177,7 @@

2. Correctly handling user input

if (undefined !== prompt && (caption === true || caption === "Ok")) new $.Zebra_Dialog("Input value was:

\"" + prompt + "\"", { - auto_close: 2000, + auto_close: 1000, buttons: false, modal: false, type: "confirmation" @@ -186,7 +186,7 @@

2. Correctly handling user input

else new $.Zebra_Dialog("Input was cancelled", { - auto_close: 2000, + auto_close: 1000, buttons: false, modal: false, type: "error" @@ -198,7 +198,7 @@

2. Correctly handling user input

- Open dialog box. + Open dialog box

Handle user input via button callback:

@@ -212,6 +212,7 @@

2. Correctly handling user input

{ title: "Prompt", type: "prompt", + placeholder: "Type anything here", buttons: [ "Cancel", { @@ -229,7 +230,7 @@

2. Correctly handling user input

callback: function($dialog, prompt) { new $.Zebra_Dialog("Input value was:

\"" + prompt + "\"", { - auto_close: 2000, + auto_close: 1000, buttons: false, modal: false, type: "confirmation" @@ -244,7 +245,73 @@

2. Correctly handling user input

- Open dialog box. + Open dialog box +
+ +

Handle user input validation via the onBeforeClose callback:

+ + 
+                    new $.Zebra_Dialog("The input's value will be considered valid only if it contains 6 digits.", {
+                        title: "Prompt",
+                        type: "prompt",
+                        placeholder: "Enter a 6 digit number",
+                        onBeforeClose: function(caption, prompt) {
+
+                            //  "prompt" will be undefined if the user closes the dialog box by clicking on the overlay, by clicking
+                            //  on the "x" button, or pressing the ESC key
+                            //
+                            //  additionally, for all the cases above, "caption" will be FALSE.
+                            //
+                            // "prompt" will contain the input's value if the user presses ENTER while inside the input box - case in
+                            //  which, because there's no button clicked, the value of "caption" will be boolean TRUE
+                            //
+                            //  "prompt" will also contain the input's value when clicking ANY of the buttons - case in which we need
+                            //  to check if the appropriate button was clicked
+                            //
+                            //  note that if you have custom buttons you'll have to replace "Ok" with the caption of whatever button
+                            //  you are using as the confirmation button
+
+                            // if user tries to submit the value
+                            if (undefined !== prompt && (caption === true || caption === "Ok")) {
+
+                                // if the input is not valid
+                                if (prompt.match(/^[0-9]{6}$/) === null) {
+
+                                    // show an error message and don't close the dialog box
+                                    new $.Zebra_Dialog("You must enter 6 digits", {
+                                        auto_close: 1000,
+                                        buttons: false,
+                                        modal: false,
+                                        type: "error"
+                                    });
+
+                                    return false;
+
+                                }
+
+                                // if input was correct, close the dialog box and show the user's input
+                                new $.Zebra_Dialog("Input value was:

" + prompt,
+                                    auto_close: 1000,
+                                    buttons: false,
+                                    modal: false,
+                                    type: "confirmation"
+                                );
+
+                            // if user cancels input by pressing ESC, clicking the "x", clicking the overlay, or the "Cancel" button
+                            } else new $.Zebra_Dialog("Input was cancelled",
+                                auto_close: 1000,
+                                buttons: false,
+                                modal: false,
+                                type: "information"
+                            );
+
+                        }
+
+                    });
+
+ +
+ Open dialog box
@@ -272,7 +339,7 @@

3. Custom buttons and the onClose event

// "caption" will be empty when the dialog box is closed by pressing ESC, by clicking the // dialog box's close button, or by clicking the overlay new $.Zebra_Dialog((caption != "" ? "\"" + caption + "\"" : "no") + " button was clicked", { - auto_close: 2000, + auto_close: 1000, buttons: false, modal: false }); @@ -288,7 +355,7 @@

3. Custom buttons and the onClose event

- Click here to open. + Open dialog box
@@ -312,21 +379,21 @@

4. Custom buttons with callback functions

buttons: [ {caption: "Yes", callback: function() { new $.Zebra_Dialog("\"Yes\" button was clicked", { - auto_close: 2000, + auto_close: 1000, buttons: false, modal: false }); }}, {caption: "No", callback: function() { new $.Zebra_Dialog("\"No\" button was clicked", { - auto_close: 2000, + auto_close: 1000, buttons: false, modal: false }); }}, {caption: "Cancel", callback: function() { new $.Zebra_Dialog("\"Cancel\" button was clicked", { - auto_close: 2000, + auto_close: 1000, buttons: false, modal: false }); @@ -342,7 +409,7 @@

4. Custom buttons with callback functions

- Click here to open. + Open dialog box
@@ -387,14 +454,19 @@

5. Positioning

6. No title bar

+

Note that in this case the dialog box is not draggable by default - therefore, + we set the draggable property to force to make it so!

+ 
                     new $.Zebra_Dialog(
-                        "<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery"
+                        "<strong>Zebra_Dialog</strong>, a small, compact, mobile-friendly and highly configurable dialog box plugin for jQuery", {
+                            draggable: "force"
+                        }
                     );
- Click here to open. + Open dialog box
@@ -420,7 +492,7 @@

7. Use as notification widget

);
- Click here to open. + Open dialog box
@@ -436,6 +508,7 @@

8. Content loaded from an element on the page

                     // unless explicitly specified, the height of the dialog box will
                     // be automatically computed to fit the loaded content's height
+                    // (use `margin` or `max_height` to handle content that takes up the viewport's height)
 
                     new $.Zebra_Dialog({
                         source: {
@@ -446,7 +519,7 @@ 
8. Content loaded from an element on the page

                     });
- Click here to open. + Open dialog box
@@ -462,6 +535,7 @@

9. Content loaded via AJAX

                     // unless explicitly specified, the height of the dialog box will
                     // be automatically computed to fit the loaded content's height
+                    // (use `margin` or `max_height` to handle content that takes up the viewport's height)
 
                     new $.Zebra_Dialog({
                         source: {
@@ -472,7 +546,7 @@ 
9. Content loaded via AJAX

                     });
- Click here to open. + Open dialog box
@@ -504,7 +578,7 @@

10. Content loaded in an iFrame

- Click here to open. + Open dialog box
@@ -589,7 +663,7 @@

11. Overlapping dialogs

});
- Click here to open. + Open dialog box
@@ -626,7 +700,7 @@

12. Customizing the appearance

});
- Click here to open. + Open dialog box
@@ -662,9 +736,9 @@

12. Customizing the appearance

auctor. Quis sem pellentesque quis dui ligula vitae leo velit semper euismod.

- - + + diff --git a/index.html b/index.html index 31f4907..ea6ca1c 100644 --- a/index.html +++ b/index.html @@ -18,9 +18,9 @@ - + - Zebra Dialog - a small, compact, and highly configurable jQuery plugin for creating modal dialog boxes + Zebra Dialog - a small, compact, mobile-friendly and highly configurable jQuery plugin for creating modal dialog boxes @@ -46,7 +46,7 @@

Zebra Dialog

-

a small, compact, and highly configurable jQuery plugin for creating modal dialog boxes

+

a small, compact, mobile-friendly and highly configurable jQuery plugin for creating modal dialog boxes

Download @@ -67,7 +67,7 @@

Zebra Dialog

Zebra Dialog is a small, compact (one JavaScript file, no dependencies other than jQuery 1.7.0+) - and highly configurable jQuery plugin for creating responsive modal dialog boxes, meant to replace + mobile-friendly and highly configurable jQuery plugin for creating responsive modal dialog boxes, meant to replace native JavaScript alert, confirmation and prompt dialogs.

@@ -128,12 +128,12 @@

Zebra Dialog

The six dialog box types are: - confirmation, - error, - information, - prompt, - question and - warning + confirmation + error + information + prompt + question + warning
@@ -177,7 +177,7 @@

2. Correctly handling user input

if (undefined !== prompt && (caption === true || caption === "Ok")) new $.Zebra_Dialog("Input value was:

\"" + prompt + "\"", { - auto_close: 2000, + auto_close: 1000, buttons: false, modal: false, type: "confirmation" @@ -186,7 +186,7 @@

2. Correctly handling user input

else new $.Zebra_Dialog("Input was cancelled", { - auto_close: 2000, + auto_close: 1000, buttons: false, modal: false, type: "error" @@ -198,7 +198,7 @@

2. Correctly handling user input

- Open dialog box. + Open dialog box

Handle user input via button callback:

@@ -212,6 +212,7 @@

2. Correctly handling user input

{ title: "Prompt", type: "prompt", + placeholder: "Type anything here", buttons: [ "Cancel", { @@ -229,7 +230,7 @@

2. Correctly handling user input

callback: function($dialog, prompt) { new $.Zebra_Dialog("Input value was:

\"" + prompt + "\"", { - auto_close: 2000, + auto_close: 1000, buttons: false, modal: false, type: "confirmation" @@ -244,7 +245,73 @@

2. Correctly handling user input

- Open dialog box. + Open dialog box +
+ +

Handle user input validation via the onBeforeClose callback:

+ + 
+                    new $.Zebra_Dialog("The input's value will be considered valid only if it contains 6 digits.", {
+                        title: "Prompt",
+                        type: "prompt",
+                        placeholder: "Enter a 6 digit number",
+                        onBeforeClose: function(caption, prompt) {
+
+                            //  "prompt" will be undefined if the user closes the dialog box by clicking on the overlay, by clicking
+                            //  on the "x" button, or pressing the ESC key
+                            //
+                            //  additionally, for all the cases above, "caption" will be FALSE.
+                            //
+                            // "prompt" will contain the input's value if the user presses ENTER while inside the input box - case in
+                            //  which, because there's no button clicked, the value of "caption" will be boolean TRUE
+                            //
+                            //  "prompt" will also contain the input's value when clicking ANY of the buttons - case in which we need
+                            //  to check if the appropriate button was clicked
+                            //
+                            //  note that if you have custom buttons you'll have to replace "Ok" with the caption of whatever button
+                            //  you are using as the confirmation button
+
+                            // if user tries to submit the value
+                            if (undefined !== prompt && (caption === true || caption === "Ok")) {
+
+                                // if the input is not valid
+                                if (prompt.match(/^[0-9]{6}$/) === null) {
+
+                                    // show an error message and don't close the dialog box
+                                    new $.Zebra_Dialog("You must enter 6 digits", {
+                                        auto_close: 1000,
+                                        buttons: false,
+                                        modal: false,
+                                        type: "error"
+                                    });
+
+                                    return false;
+
+                                }
+
+                                // if input was correct, close the dialog box and show the user's input
+                                new $.Zebra_Dialog("Input value was:

" + prompt,
+                                    auto_close: 1000,
+                                    buttons: false,
+                                    modal: false,
+                                    type: "confirmation"
+                                );
+
+                            // if user cancels input by pressing ESC, clicking the "x", clicking the overlay, or the "Cancel" button
+                            } else new $.Zebra_Dialog("Input was cancelled",
+                                auto_close: 1000,
+                                buttons: false,
+                                modal: false,
+                                type: "information"
+                            );
+
+                        }
+
+                    });
+
+ +
+ Open dialog box
@@ -272,7 +339,7 @@

3. Custom buttons and the onClose event

// "caption" will be empty when the dialog box is closed by pressing ESC, by clicking the // dialog box's close button, or by clicking the overlay new $.Zebra_Dialog((caption != "" ? "\"" + caption + "\"" : "no") + " button was clicked", { - auto_close: 2000, + auto_close: 1000, buttons: false, modal: false }); @@ -288,7 +355,7 @@

3. Custom buttons and the onClose event

- Click here to open. + Open dialog box
@@ -312,21 +379,21 @@

4. Custom buttons with callback functions

buttons: [ {caption: "Yes", callback: function() { new $.Zebra_Dialog("\"Yes\" button was clicked", { - auto_close: 2000, + auto_close: 1000, buttons: false, modal: false }); }}, {caption: "No", callback: function() { new $.Zebra_Dialog("\"No\" button was clicked", { - auto_close: 2000, + auto_close: 1000, buttons: false, modal: false }); }}, {caption: "Cancel", callback: function() { new $.Zebra_Dialog("\"Cancel\" button was clicked", { - auto_close: 2000, + auto_close: 1000, buttons: false, modal: false }); @@ -342,7 +409,7 @@

4. Custom buttons with callback functions

- Click here to open. + Open dialog box
@@ -387,14 +454,19 @@

5. Positioning

6. No title bar

+

Note that in this case the dialog box is not draggable by default - therefore, + we set the draggable property to force to make it so!

+ 
                     new $.Zebra_Dialog(
-                        "<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery"
+                        "<strong>Zebra_Dialog</strong>, a small, compact, mobile-friendly and highly configurable dialog box plugin for jQuery", {
+                            draggable: "force"
+                        }
                     );
- Click here to open. + Open dialog box
@@ -420,7 +492,7 @@

7. Use as notification widget

);
- Click here to open. + Open dialog box
@@ -436,6 +508,7 @@

8. Content loaded from an element on the page

                     // unless explicitly specified, the height of the dialog box will
                     // be automatically computed to fit the loaded content's height
+                    // (use `margin` or `max_height` to handle content that takes up the viewport's height)
 
                     new $.Zebra_Dialog({
                         source: {
@@ -446,7 +519,7 @@ 
8. Content loaded from an element on the page

                     });
- Click here to open. + Open dialog box
@@ -462,6 +535,7 @@

9. Content loaded via AJAX

                     // unless explicitly specified, the height of the dialog box will
                     // be automatically computed to fit the loaded content's height
+                    // (use `margin` or `max_height` to handle content that takes up the viewport's height)
 
                     new $.Zebra_Dialog({
                         source: {
@@ -472,7 +546,7 @@ 
9. Content loaded via AJAX

                     });
- Click here to open. + Open dialog box
@@ -504,7 +578,7 @@

10. Content loaded in an iFrame

- Click here to open. + Open dialog box
@@ -589,7 +663,7 @@

11. Overlapping dialogs

});
- Click here to open. + Open dialog box
@@ -626,7 +700,7 @@

12. Customizing the appearance

});
- Click here to open. + Open dialog box
@@ -662,9 +736,9 @@

12. Customizing the appearance

auctor. Quis sem pellentesque quis dui ligula vitae leo velit semper euismod.

- - + + diff --git a/materialize.html b/materialize.html index c40eabd..31c2b46 100644 --- a/materialize.html +++ b/materialize.html @@ -18,9 +18,9 @@ - + - Zebra Dialog - a small, compact, and highly configurable jQuery plugin for creating modal dialog boxes + Zebra Dialog - a small, compact, mobile-friendly and highly configurable jQuery plugin for creating modal dialog boxes @@ -46,7 +46,7 @@

Zebra Dialog

-

a small, compact, and highly configurable jQuery plugin for creating modal dialog boxes

+

a small, compact, mobile-friendly and highly configurable jQuery plugin for creating modal dialog boxes

Download @@ -67,7 +67,7 @@

Zebra Dialog

Zebra Dialog is a small, compact (one JavaScript file, no dependencies other than jQuery 1.7.0+) - and highly configurable jQuery plugin for creating responsive modal dialog boxes, meant to replace + mobile-friendly and highly configurable jQuery plugin for creating responsive modal dialog boxes, meant to replace native JavaScript alert, confirmation and prompt dialogs.

@@ -128,12 +128,12 @@

Zebra Dialog

The six dialog box types are: - confirmation, - error, - information, - prompt, - question and - warning + confirmation + error + information + prompt + question + warning
@@ -177,7 +177,7 @@

2. Correctly handling user input

if (undefined !== prompt && (caption === true || caption === "Ok")) new $.Zebra_Dialog("Input value was:

\"" + prompt + "\"", { - auto_close: 2000, + auto_close: 1000, buttons: false, modal: false, type: "confirmation" @@ -186,7 +186,7 @@

2. Correctly handling user input

else new $.Zebra_Dialog("Input was cancelled", { - auto_close: 2000, + auto_close: 1000, buttons: false, modal: false, type: "error" @@ -198,7 +198,7 @@

2. Correctly handling user input

- Open dialog box. + Open dialog box

Handle user input via button callback:

@@ -212,6 +212,7 @@

2. Correctly handling user input

{ title: "Prompt", type: "prompt", + placeholder: "Type anything here", buttons: [ "Cancel", { @@ -229,7 +230,7 @@

2. Correctly handling user input

callback: function($dialog, prompt) { new $.Zebra_Dialog("Input value was:

\"" + prompt + "\"", { - auto_close: 2000, + auto_close: 1000, buttons: false, modal: false, type: "confirmation" @@ -244,7 +245,73 @@

2. Correctly handling user input

- Open dialog box. + Open dialog box +
+ +

Handle user input validation via the onBeforeClose callback:

+ + 
+                    new $.Zebra_Dialog("The input's value will be considered valid only if it contains 6 digits.", {
+                        title: "Prompt",
+                        type: "prompt",
+                        placeholder: "Enter a 6 digit number",
+                        onBeforeClose: function(caption, prompt) {
+
+                            //  "prompt" will be undefined if the user closes the dialog box by clicking on the overlay, by clicking
+                            //  on the "x" button, or pressing the ESC key
+                            //
+                            //  additionally, for all the cases above, "caption" will be FALSE.
+                            //
+                            // "prompt" will contain the input's value if the user presses ENTER while inside the input box - case in
+                            //  which, because there's no button clicked, the value of "caption" will be boolean TRUE
+                            //
+                            //  "prompt" will also contain the input's value when clicking ANY of the buttons - case in which we need
+                            //  to check if the appropriate button was clicked
+                            //
+                            //  note that if you have custom buttons you'll have to replace "Ok" with the caption of whatever button
+                            //  you are using as the confirmation button
+
+                            // if user tries to submit the value
+                            if (undefined !== prompt && (caption === true || caption === "Ok")) {
+
+                                // if the input is not valid
+                                if (prompt.match(/^[0-9]{6}$/) === null) {
+
+                                    // show an error message and don't close the dialog box
+                                    new $.Zebra_Dialog("You must enter 6 digits", {
+                                        auto_close: 1000,
+                                        buttons: false,
+                                        modal: false,
+                                        type: "error"
+                                    });
+
+                                    return false;
+
+                                }
+
+                                // if input was correct, close the dialog box and show the user's input
+                                new $.Zebra_Dialog("Input value was:

" + prompt,
+                                    auto_close: 1000,
+                                    buttons: false,
+                                    modal: false,
+                                    type: "confirmation"
+                                );
+
+                            // if user cancels input by pressing ESC, clicking the "x", clicking the overlay, or the "Cancel" button
+                            } else new $.Zebra_Dialog("Input was cancelled",
+                                auto_close: 1000,
+                                buttons: false,
+                                modal: false,
+                                type: "information"
+                            );
+
+                        }
+
+                    });
+
+ +
+ Open dialog box
@@ -272,7 +339,7 @@

3. Custom buttons and the onClose event

// "caption" will be empty when the dialog box is closed by pressing ESC, by clicking the // dialog box's close button, or by clicking the overlay new $.Zebra_Dialog((caption != "" ? "\"" + caption + "\"" : "no") + " button was clicked", { - auto_close: 2000, + auto_close: 1000, buttons: false, modal: false }); @@ -288,7 +355,7 @@

3. Custom buttons and the onClose event

- Click here to open. + Open dialog box
@@ -312,21 +379,21 @@

4. Custom buttons with callback functions

buttons: [ {caption: "Yes", callback: function() { new $.Zebra_Dialog("\"Yes\" button was clicked", { - auto_close: 2000, + auto_close: 1000, buttons: false, modal: false }); }}, {caption: "No", callback: function() { new $.Zebra_Dialog("\"No\" button was clicked", { - auto_close: 2000, + auto_close: 1000, buttons: false, modal: false }); }}, {caption: "Cancel", callback: function() { new $.Zebra_Dialog("\"Cancel\" button was clicked", { - auto_close: 2000, + auto_close: 1000, buttons: false, modal: false }); @@ -342,7 +409,7 @@

4. Custom buttons with callback functions

- Click here to open. + Open dialog box
@@ -387,14 +454,19 @@

5. Positioning

6. No title bar

+

Note that in this case the dialog box is not draggable by default - therefore, + we set the draggable property to force to make it so!

+ 
                     new $.Zebra_Dialog(
-                        "<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery"
+                        "<strong>Zebra_Dialog</strong>, a small, compact, mobile-friendly and highly configurable dialog box plugin for jQuery", {
+                            draggable: "force"
+                        }
                     );
- Click here to open. + Open dialog box
@@ -420,7 +492,7 @@

7. Use as notification widget

);
- Click here to open. + Open dialog box
@@ -436,6 +508,7 @@

8. Content loaded from an element on the page

                     // unless explicitly specified, the height of the dialog box will
                     // be automatically computed to fit the loaded content's height
+                    // (use `margin` or `max_height` to handle content that takes up the viewport's height)
 
                     new $.Zebra_Dialog({
                         source: {
@@ -446,7 +519,7 @@ 
8. Content loaded from an element on the page

                     });
- Click here to open. + Open dialog box
@@ -462,6 +535,7 @@

9. Content loaded via AJAX

                     // unless explicitly specified, the height of the dialog box will
                     // be automatically computed to fit the loaded content's height
+                    // (use `margin` or `max_height` to handle content that takes up the viewport's height)
 
                     new $.Zebra_Dialog({
                         source: {
@@ -472,7 +546,7 @@ 
9. Content loaded via AJAX

                     });
- Click here to open. + Open dialog box
@@ -504,7 +578,7 @@

10. Content loaded in an iFrame

- Click here to open. + Open dialog box
@@ -589,7 +663,7 @@

11. Overlapping dialogs

});
- Click here to open. + Open dialog box
@@ -626,7 +700,7 @@

12. Customizing the appearance

});
- Click here to open. + Open dialog box
@@ -662,9 +736,9 @@

12. Customizing the appearance

auctor. Quis sem pellentesque quis dui ligula vitae leo velit semper euismod.

- - + +