Browse Source

Updated examples

Dante 12 years ago
parent
commit
af29944199
2 changed files with 47 additions and 7 deletions
  1. 17 6
      assets/bootstrap-dialog/js/bootstrap-dialog.js
  2. 30 1
      index.html

+ 17 - 6
assets/bootstrap-dialog/js/bootstrap-dialog.js

@@ -28,6 +28,7 @@ var BootstrapDialog = null;
         };
         };
         this.indexedButtons = {};
         this.indexedButtons = {};
         this.realized = false;
         this.realized = false;
+        this.opened = false;
         this.initOptions(options);
         this.initOptions(options);
         this.holdThisInstance();
         this.holdThisInstance();
     };
     };
@@ -442,7 +443,7 @@ var BootstrapDialog = null;
          */
          */
         updateClosable: function() {
         updateClosable: function() {
             if (this.isRealized()) {
             if (this.isRealized()) {
-                // Backdrop, I did't find a way to change bs3 backdrop option after the dialog is poped up, so here's a new wheel.
+                // 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();
                 var $theBigMask = this.getModal();
                 $theBigMask.off('click').on('click', {dialog: this}, function(event) {
                 $theBigMask.off('click').on('click', {dialog: this}, function(event) {
                     event.target === this && event.data.dialog.isClosable() && event.data.dialog.close();
                     event.target === this && event.data.dialog.isClosable() && event.data.dialog.close();
@@ -491,11 +492,19 @@ var BootstrapDialog = null;
 
 
             return this;
             return this;
         },
         },
+        isOpened: function() {
+            return this.opened;
+        },
+        setOpened: function(opened) {
+            this.opened = opened;
+
+            return this;
+        },
         handleModalEvents: function() {
         handleModalEvents: function() {
             this.getModal().on('show.bs.modal', {dialog: this}, function(event) {
             this.getModal().on('show.bs.modal', {dialog: this}, function(event) {
                 var dialog = event.data.dialog;
                 var dialog = event.data.dialog;
                 typeof dialog.options.onshow === 'function' && dialog.options.onshow(dialog);
                 typeof dialog.options.onshow === 'function' && dialog.options.onshow(dialog);
-                dialog.showScrollBar(true);
+                dialog.showPageScrollBar(true);
             });
             });
             this.getModal().on('hide.bs.modal', {dialog: this}, function(event) {
             this.getModal().on('hide.bs.modal', {dialog: this}, function(event) {
                 var dialog = event.data.dialog;
                 var dialog = event.data.dialog;
@@ -504,12 +513,12 @@ var BootstrapDialog = null;
             this.getModal().on('hidden.bs.modal', {dialog: this}, function(event) {
             this.getModal().on('hidden.bs.modal', {dialog: this}, function(event) {
                 var dialog = event.data.dialog;
                 var dialog = event.data.dialog;
                 dialog.isAutodestroy() && $(this).remove();
                 dialog.isAutodestroy() && $(this).remove();
-                dialog.showScrollBar(false);
+                dialog.showPageScrollBar(false);
             });
             });
 
 
             return this;
             return this;
         },
         },
-        showScrollBar: function(show){
+        showPageScrollBar: function(show) {
             $(document.body).toggleClass('modal-open', show);
             $(document.body).toggleClass('modal-open', show);
         },
         },
         realize: function() {
         realize: function() {
@@ -534,15 +543,17 @@ var BootstrapDialog = null;
             !this.isRealized() && this.realize();
             !this.isRealized() && this.realize();
             this.updateClosable();
             this.updateClosable();
             this.getModal().modal('show');
             this.getModal().modal('show');
+            this.setOpened(true);
 
 
             return this;
             return this;
         },
         },
         close: function() {
         close: function() {
             this.getModal().modal('hide');
             this.getModal().modal('hide');
-            if(this.isAutodestroy()) {
+            if (this.isAutodestroy()) {
                 delete BootstrapDialog.dialogs[this.getId()];
                 delete BootstrapDialog.dialogs[this.getId()];
             }
             }
-            
+            this.setOpened(false);
+
             return this;
             return this;
         }
         }
     };
     };

+ 30 - 1
index.html

@@ -110,6 +110,35 @@
         -->
         -->
     </div>
     </div>
     
     
+    <h3>Open / Close multiple dialogs</h3>
+    <p>This example demonstrates opening and closing a batch of dialogs at one time. <br />Dialog that created by BootstrapDialog will be in a container <strong>BootstrapDialog.dialogs</strong> before it's closed and destroyed, iterate <strong>BootstrapDialog.dialogs</strong> to find all dialogs that havn't been destroyed.</p>
+    <div class="source-code runnable">
+        <!--
+        var howManyDialogs = 5;
+        for(var i = 1; i <= howManyDialogs; i++) {
+            var dialog = new BootstrapDialog({
+                title: 'Dialog No.' + i,
+                message: 'Hello Houston, this is dialog No.' + i,
+                buttons: [{
+                    label: 'Close this dialog.',
+                    action: function(dialogRef){
+                        dialogRef.close();
+                    }
+                }, {
+                    label: 'Close ALL opened dialogs',
+                    cssClass: 'btn-warning',
+                    action: function(){
+                        $.each(BootstrapDialog.dialogs, function(id, dialog){
+                            dialog.close();
+                        });
+                    }
+                }]
+            });
+            dialog.open();
+        }
+        -->
+    </div>
+    
     <h3>Button with identifier</h3>
     <h3>Button with identifier</h3>
     <div class="source-code runnable">
     <div class="source-code runnable">
         <!--
         <!--
@@ -560,7 +589,7 @@ BootstrapDialog.show({
                     <strong>Default value is 'glyphicon glyphicon-asterisk'.</strong>
                     <strong>Default value is 'glyphicon glyphicon-asterisk'.</strong>
                 </td>
                 </td>
                 <td>
                 <td>
-                    When set to <strong>true</strong>, after clicked on a button, a spinning icon appears in which button you have clicked automatically.
+                    Specify what icon to be used as the spinning icon when button's 'autospin' is set to true.
                 </td>
                 </td>
             </tr>
             </tr>
             <tr>
             <tr>