Browse Source

Refs #126. Adding a data 'button' to the created button. Passing original event object to button callback action(dialog, event)

Dante 10 years ago
parent
commit
cc281892ba
3 changed files with 46 additions and 36 deletions
  1. 43 0
      play/button-event.html
  2. 0 34
      play/play.html
  3. 3 2
      src/js/bootstrap-dialog.js

+ 43 - 0
play/button-event.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <script src="../examples/assets/jquery/jquery-1.10.2.min.js"></script>
+        <link href="../examples/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
+        <script src="../examples/assets/bootstrap/js/bootstrap.min.js"></script>
+        <link href="../src/css/bootstrap-dialog.css" rel="stylesheet" type="text/css" />
+        <script src="../src/js/bootstrap-dialog.js"></script>
+        <title>Button Event</title>
+        <meta charset="utf-8" />
+    </head>
+    <body>
+        <script type="text/javascript">
+            $(function() {
+                var dialog = new BootstrapDialog({
+                    closable: false,
+                    buttons: [{
+                            label: 'Button 1',
+                            action: function(dialog, event) {
+                                // this.data('button') is the original button config
+                                console.log(this.data('button'));
+
+                                // Stop bubbling. 'event' here is the original event object of 'click'.
+                                event.stopPropagation();
+                            }
+                        }, {
+                            label: 'Button 2',
+                            action: function(dialog) {
+                                // Does nothing
+                            }
+                        }],
+                    onshown: function(dialog) {
+                        var $footer = dialog.getModalFooter();
+                        $footer.on('click', function(event) {
+                            alert('Footer was hit.');
+                        });
+                    }
+                });
+                dialog.open();
+            });
+        </script>
+    </body>
+</html>

+ 0 - 34
play/play.html

@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <script src="examples/assets/jquery/jquery-1.10.2.min.js"></script>
-        <link href="examples/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
-        <script src="examples/assets/bootstrap/js/bootstrap.min.js"></script>
-        <link href="src/css/bootstrap-dialog.css" rel="stylesheet" type="text/css" />
-        <script src="src/js/bootstrap-dialog.js"></script>
-        <title>Playing BootstrapDialog</title>
-        <meta charset="utf-8" />
-    </head>
-    <body>
-        <script type="text/javascript">
-            $(function() {
-                var dialog = new BootstrapDialog({
-                    closable: false,
-                    buttons: [{
-                            label: 'Button 1',
-                            action: function(dialog) {
-                                this.data('event').stopPropagation();
-                            }
-                        }],
-                    onshown: function(dialog) {
-                        var $footer = dialog.getModalFooter();
-                        $footer.on('click', function(event) {
-                            alert('Footer was hit.');
-                        });
-                    }
-                });
-                dialog.open();
-            });
-        </script>
-    </body>
-</html>

+ 3 - 2
src/js/bootstrap-dialog.js

@@ -764,6 +764,7 @@
         createButton: function(button) {
             var $button = $('<button class="btn"></button>');
             $button.prop('id', button.id);
+            $button.data('button', button);
 
             // Icon
             if (typeof button.icon !== 'undefined' && $.trim(button.icon) !== '') {
@@ -791,9 +792,9 @@
             $button.on('click', {dialog: this, $button: $button, button: button}, function(event) {
                 var dialog = event.data.dialog;
                 var $button = event.data.$button;
-                var button = event.data.button;
+                var button = $button.data('button');
                 if (typeof button.action === 'function') {
-                    button.action.call($button, dialog);
+                    button.action.call($button, dialog, event);
                 }
 
                 if (button.autospin) {