浏览代码

Updated examples

Dante 12 年之前
父节点
当前提交
bbcbb9e8f6
共有 3 个文件被更改,包括 65 次插入55 次删除
  1. 26 21
      examples/assets/bootstrap-dialog/js/bootstrap-dialog.js
  2. 0 33
      examples/hotkey.html
  3. 39 1
      examples/index.html

+ 26 - 21
examples/assets/bootstrap-dialog/js/bootstrap-dialog.js

@@ -30,6 +30,7 @@ var BootstrapDialog = null;
             autodestroy: true
         };
         this.indexedButtons = {};
+        this.registeredButtonHotkeys = {};
         this.realized = false;
         this.opened = false;
         this.initOptions(options);
@@ -431,8 +432,10 @@ var BootstrapDialog = null;
                 $button.addClass('btn-default');
             }
 
-            // Dynamically add extra functions to $button
-            this.enhanceButton($button);
+            // Hotkey
+            if (typeof button.hotkey !== undefined) {
+                this.registeredButtonHotkeys[button.hotkey] = $button;
+            }
 
             // Button on click
             $button.on('click', {dialog: this, $button: $button, button: button}, function(event) {
@@ -448,14 +451,8 @@ var BootstrapDialog = null;
                 }
             });
 
-            // Button hotKey
-            if (button.hotKey)
-                this.getModalDialog().on('keypress', function(event) {
-                    if (!event || !event.which)
-                        return;
-                    if (event.which === button.hotKey)
-                        $button.trigger('click');
-                });
+            // Dynamically add extra functions to $button
+            this.enhanceButton($button);
 
             return $button;
         },
@@ -546,19 +543,8 @@ var BootstrapDialog = null;
          */
         updateClosable: function() {
             if (this.isRealized()) {
-                // Backdrop, I did't find a way to change bs3 backdrop option after the dialog is popped up, so here's a new wheel.
-                var $theBigMask = this.getModal();
-                $theBigMask.off('click').on('click', {dialog: this}, function(event) {
-                    event.target === this && event.data.dialog.isClosable() && event.data.dialog.close();
-                });
-
                 // Close button
                 this.getModalHeader().find('.' + this.getNamespace('close-button')).toggle(this.isClosable());
-
-                // ESC key support
-                $theBigMask.off('keyup').on('keyup', {dialog: this}, function(event) {
-                    event.which === 27 && event.data.dialog.isClosable() && event.data.dialog.close();
-                });
             }
 
             return this;
@@ -619,6 +605,25 @@ var BootstrapDialog = null;
                 dialog.showPageScrollBar(false);
             });
 
+            // Backdrop, I did't find a way to change bs3 backdrop option after the dialog is popped up, so here's a new wheel.
+            this.getModal().on('click', {dialog: this}, function(event) {
+                event.target === this && event.data.dialog.isClosable() && event.data.dialog.close();
+            });
+
+            // ESC key support
+            this.getModal().on('keyup', {dialog: this}, function(event) {
+                event.which === 27 && event.data.dialog.isClosable() && event.data.dialog.close();
+            });
+
+            // Button hotkey
+            this.getModal().on('keyup', {dialog: this}, function(event) {
+                var dialog = event.data.dialog;
+                if (typeof dialog.registeredButtonHotkeys[event.which] !== 'undefined') {
+                    var $button = $(dialog.registeredButtonHotkeys[event.which]);
+                    !$button.prop('disabled') && $button.trigger('click');
+                }
+            });
+
             return this;
         },
         showPageScrollBar: function(show) {

+ 0 - 33
examples/hotkey.html

@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<script src="assets/jquery/jquery-1.10.2.min.js"></script>
-<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
-<script src="assets/bootstrap/js/bootstrap.min.js"></script>
-<script src="assets/prettify/run_prettify.js"></script>
-<link href="assets/bootstrap-dialog/css/bootstrap-dialog.css" rel="stylesheet" type="text/css" />
-<script src="../js/bootstrap-dialog.js"></script>
-<meta charset="utf-8" />
-<title>BootstrapDialog examples</title>
-</head>
-<body style="padding-bottom: 100px;">
-    <script>
-        BootstrapDialog.show({
-            buttons: [{
-                    label: 'Cancel',
-                    hotkey: 81,
-                    action: function(dialog){
-                        alert('Canceling...');
-                    }
-            }, {
-                    label: 'Confirm',
-                    cssClass: 'btn-primary',
-                    hotkey: 13,
-                    action: function(dialog){
-                        alert('Confirming...');
-                    }
-            }]
-        });
-    </script>
-</body>
-</html>

+ 39 - 1
examples/index.html

@@ -6,7 +6,7 @@
 <script src="assets/bootstrap/js/bootstrap.min.js"></script>
 <script src="assets/prettify/run_prettify.js"></script>
 <link href="assets/bootstrap-dialog/css/bootstrap-dialog.css" rel="stylesheet" type="text/css" />
-<script src="../js/bootstrap-dialog.js"></script>
+<script src="assets/bootstrap-dialog/js/bootstrap-dialog.js"></script>
 <meta charset="utf-8" />
 <title>BootstrapDialog examples</title>
 <style>
@@ -168,6 +168,44 @@
         });
         -->
     </div>
+    
+    <a name="button-hotkey"></a>
+    <h3>Button Hotkey</h3>
+    <p>
+        Try to press the keys that have been associated with buttons below. <br /> 
+        Please note that the <strong>last button</strong> is disabled so nothing is going to happen when you pressing its hotkey.
+    </p>
+    <div class="source-code runnable">
+        <!--
+        BootstrapDialog.show({
+            title: 'Button Hotkey',
+            message: 'Try to press some keys...',
+            onshow: function(dialog) {
+                dialog.getButton('button-c').disable();
+            },
+            buttons: [{
+                label: '(A) Button A',
+                hotkey: 65, // Keycode of keyup event of key 'A' is 65.
+                action: function() {
+                    alert('Finally, you loved Button A.');
+                }
+            }, {
+                label: '(B) Button B',
+                hotkey: 66,
+                action: function() {
+                    alert('Hello, this is Button B!');
+                }
+            }, {
+                id: 'button-c',
+                label: '(C) Button C',
+                hotkey: 67,
+                action: function(){
+                    alert('This is Button C but you won\'t see me dance.');
+                }
+            }]
+        });
+        -->
+    </div>
 
     <h3>Creating dialog instances</h3>
     <p>BootstrapDialog.show(...) is just a shortcut method, if you need dialog instances, use 'new'.</p>