Bootstrap之BootstrapDialog
Posted 留ke雨
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Bootstrap之BootstrapDialog相关的知识，希望对你有一定的参考价值。
Make use of Bootstrap‘s modal more monkey-friendly.
http://nakupanda.github.io/bootstrap3-dialog/
Monkeys love the Modal Dialog from Bootstrap, but they‘re getting angry because they have to write this stuff:
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
What they want is more like this:
BootstrapDialog.alert(‘I want banana!‘);
Like it? See Available Options or try more Examples below.
Examples
Simplest
Provide only the message to show, and keep all other things default.
BootstrapDialog.show({
message: ‘Hi Apple!‘
});
Dialog Title
BootstrapDialog.show({
title: ‘Say-hello dialog‘,
message: ‘Hi Apple!‘
});
Manipulating Dialog Title
BootstrapDialog.show({
title: ‘Default Title‘,
message: ‘Click buttons below.‘,
buttons: [{
label: ‘Title 1‘,
action: function(dialog) {
dialog.setTitle(‘Title 1‘);
}
}, {
label: ‘Title 2‘,
action: function(dialog) {
dialog.setTitle(‘Title 2‘);
}
}]
});
Manipulating Dialog Message
BootstrapDialog.show({
title: ‘Default Title‘,
message: ‘Click buttons below.‘,
buttons: [{
label: ‘Message 1‘,
action: function(dialog) {
dialog.setMessage(‘Message 1‘);
}
}, {
label: ‘Message 2‘,
action: function(dialog) {
dialog.setMessage(‘Message 2‘);
}
}]
});
Loading remote page (1)
There are some workarounds for loading remote page into BootstrapDialog as message, one of those workarounds is as below.
Check out the remote.html.
BootstrapDialog.show({
message: $(‘<div></div>‘).load(‘remote.html‘)
});
Loading remote page (2)
Another solution of loading remote page into BootstrapDialog.
This one is more flexible and customizable, but it‘s also a bit more complicated to use.
BootstrapDialog.show({
message: function(dialog) {
var $message = $(‘<div></div>‘);
var pageToLoad = dialog.getData(‘pageToLoad‘);
$message.load(pageToLoad);
return $message;
},
data: {
‘pageToLoad‘: ‘remote.html‘
}
});
Buttons
BootstrapDialog.show({
message: ‘Hi Apple!‘,
buttons: [{
label: ‘Button 1‘
}, {
label: ‘Button 2‘,
cssClass: ‘btn-primary‘,
action: function(){
alert(‘Hi Orange!‘);
}
}, {
icon: ‘glyphicon glyphicon-ban-circle‘,
label: ‘Button 3‘,
cssClass: ‘btn-warning‘
}, {
label: ‘Close‘,
action: function(dialogItself){
dialogItself.close();
}
}]
});
Manipulating Buttons
Buttons that created by BootstrapDialog have some extra functions available:
$button.toggleEnable(true|false);
$button.enable(); // Equals to $button.toggleEnable(true);
$button.disable(); // Equals to $button.toggleEnable(false);
$button.toggleSpin(true|false);
$button.spin(); // Equals to $button.toggleSpin(true);
$button.stopSpin(); // Equals to $button.toggleSpin(false);
BootstrapDialog.show({
title: ‘Manipulating Buttons‘,
message: function(dialog) {
var $content = $(‘<div><button class="btn btn-success">Revert button status right now.</button></div>‘);
var $footerButton = dialog.getButton(‘btn-1‘);
$content.find(‘button‘).click({$footerButton: $footerButton}, function(event) {
event.data.$footerButton.enable();
event.data.$footerButton.stopSpin();
dialog.setClosable(true);
});
return $content;
},
buttons: [{
id: ‘btn-1‘,
label: ‘Click to disable and spin.‘,
action: function(dialog) {
var $button = this; // ‘this‘ here is a jQuery object that wrapping the <button> DOM element.
$button.disable();
$button.spin();
dialog.setClosable(false);
}
}]
});
Button Hotkey
Try to press the keys that have been associated with buttons below.
The last button is disabled so nothing is going to happen when pressing its hotkey.
Please note that if there are some components that require keyboard operations in your dialog, conflicts may occur, you can try next example.
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.‘);
}
}]
});
Keys Conflicts
Try to avoid doing similar in your code.
BootstrapDialog.show({
title: ‘Button Hotkey‘,
message: $(‘<textarea class="form-control" placeholder="Try to input multiple lines here..."></textarea>‘),
buttons: [{
label: ‘(Enter) Button A‘,
cssClass: ‘btn-primary‘,
hotkey: 13, // Enter.
action: function() {
alert(‘You pressed Enter.‘);
}
}]
});
Opening multiple dialogs
A good looking stacked dialogs. Please also note the second and the third dialog are draggable.
var shortContent = ‘<p>Something here.</p>‘;
var longContent = ‘‘;
for(var i = 1; i <= 200; i++) {
longContent += shortContent;
}
BootstrapDialog.show({
title: ‘Another long dialog‘,
message: longContent
});
BootstrapDialog.show({
title: ‘Another short dialog‘,
message: shortContent,
draggable: true
});
BootstrapDialog.show({
title: ‘A long dialog‘,
message: longContent,
draggable: true
});
BootstrapDialog.show({
title: ‘A short dialog‘,
message: shortContent
});
Creating dialog instances
BootstrapDialog.show(...) is just a shortcut method, if you need dialog instances, use ‘new‘.
// Using init options
var dialogInstance1 = new BootstrapDialog({
title: ‘Dialog instance 1‘,
message: ‘Hi Apple!‘
});
dialogInstance1.open();
// Construct by using setters
var dialogInstance2 = new BootstrapDialog();
dialogInstance2.setTitle(‘Dialog instance 2‘);
dialogInstance2.setMessage(‘Hi Orange!‘);
dialogInstance2.setType(BootstrapDialog.TYPE_SUCCESS);
dialogInstance2.open();
// Using chain callings
var dialogInstance3 = new BootstrapDialog()
.setTitle(‘Dialog instance 3‘)
.setMessage(‘Hi Everybody!‘)
.setType(BootstrapDialog.TYPE_INFO)
.open();
In fact BootstrapDialog.show(...) will also return the created dialog instance.
// You can use dialogInstance later.
var dialogInstance = BootstrapDialog.show({
message: ‘Hello Banana!‘
});
Open / Close multiple dialogs
This example demonstrates opening and closing a batch of dialogs at one time.
Dialog that created by BootstrapDialog will be in a container BootstrapDialog.dialogs before it‘s closed and destroyed, iterate BootstrapDialog.dialogs to find all dialogs that havn‘t been destroyed.
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(){
// You can also use BootstrapDialog.closeAll() to close all dialogs.
$.each(BootstrapDialog.dialogs, function(id, dialog){
dialog.close();
});
}
}]
});
dialog.open();
}
Button with identifier
var dialog = new BootstrapDialog({
message: ‘Hi Apple!‘,
buttons: [{
id: ‘btn-1‘,
label: ‘Button 1‘
}]
});
dialog.realize();
var btn1 = dialog.getButton(‘btn-1‘);
btn1.click({‘name‘: ‘Apple‘}, function(event){
alert(‘Hi, ‘ + event.data.name);
});
dialog.open();
Message types
var types = [BootstrapDialog.TYPE_DEFAULT,
BootstrapDialog.TYPE_INFO,
BootstrapDialog.TYPE_PRIMARY,
BootstrapDialog.TYPE_SUCCESS,
BootstrapDialog.TYPE_WARNING,
BootstrapDialog.TYPE_DANGER];
$.each(types, function(index, type){
BootstrapDialog.show({
type: type,
title: ‘Message type: ‘ + type,
message: ‘What to do next?‘,
buttons: [{
label: ‘I do nothing.‘
}]
});
});
Changing dialog type
var types = [BootstrapDialog.TYPE_DEFAULT,
BootstrapDialog.TYPE_INFO,
BootstrapDialog.TYPE_PRIMARY,
BootstrapDialog.TYPE_SUCCESS,
BootstrapDialog.TYPE_WARNING,
BootstrapDialog.TYPE_DANGER];
var buttons = [];
$.each(types, function(index, type) {
buttons.push({
label: type,
cssClass: ‘btn-default btn-sm‘,
action: function(dialog) {
dialog.setType(type);
}
});
});
BootstrapDialog.show({
title: ‘Changing dialog type‘,
message: ‘Click buttons below...‘,
buttons: buttons
});
Larger dialog
By default, the dialog size is ‘size-normal‘ or BootstrapDialog.SIZE_NORMAL, but you can have a larger dialog by setting option ‘size‘ to ‘size-large‘ or BootstrapDialog.SIZE_LARGE.
BootstrapDialog.show({
size: BootstrapDialog.SIZE_LARGE,
message: ‘Hi Apple!‘,
buttons: [{
label: ‘Button 1‘
}, {
label: ‘Button 2‘,
cssClass: ‘btn-primary‘,
action: function(){
alert(‘Hi Orange!‘);
}
}, {
icon: ‘glyphicon glyphicon-ban-circle‘,
label: ‘Button 3‘,
cssClass: ‘btn-warning‘
}, {
label: ‘Close‘,
action: function(dialogItself){
dialogItself.close();
}
}]
});
More dialog sizes
Please note that specifying BootstrapDialog.SIZE_WIDE is equal to using css class ‘modal-lg‘ on Bootstrap Modal.
BootstrapDialog.show({
title: ‘More dialog sizes‘,
message: ‘Hi Apple!‘,
buttons: [{
label: ‘Normal‘,
action: function(dialog){
dialog.setTitle(‘Normal‘);
dialog.setSize(BootstrapDialog.SIZE_NORMAL);
}
}, {
label: ‘Small‘,
action: function(dialog){
dialog.setTitle(‘Small‘);
dialog.setSize(BootstrapDialog.SIZE_SMALL);
}
}, {
label: ‘Wide‘,
action: function(dialog){
dialog.setTitle(‘Wide‘);
dialog.setSize(BootstrapDialog.SIZE_WIDE);
}
}, {
label: ‘Large‘,
action: function(dialog){
dialog.setTitle(‘Large‘);
dialog.setSize(BootstrapDialog.SIZE_LARGE);
}
}]
});
Rich message
BootstrapDialog supports displaying rich content, so you can even use a video clip as your message in the dialog.
var $textAndPic = $(‘<div></div>‘);
$textAndPic.append(‘Who\‘s this? <br />‘);
$textAndPic.append(‘<img src="./images/pig.ico" />‘);
BootstrapDialog.show({
title: ‘Guess who that is‘,
message: $textAndPic,
buttons: [{
label: ‘Acky‘,
action: function(dialogRef){
dialogRef.close();
}
}, {
label: ‘Robert‘,
action: function(dialogRef){
dialogRef.close();
}
}]
});
Dialog closable / unclosable
If option ‘closable‘ is set to false, the default closing behaviors will be disabled, but you can still close the dialog by using dialog.close().
BootstrapDialog.show({
message: ‘Hi Apple!‘,
closable: false,
buttons: [{
label: ‘Dialog CLOSABLE!‘,
cssClass: ‘btn-success‘,
action: function(dialogRef){
dialogRef.setClosable(true);
}
}, {
label: ‘Dialog UNCLOSABLE!‘,
cssClass: ‘btn-warning‘,
action: function(dialogRef){
dialogRef.setClosable(false);
}
}, {
label: ‘Close the dialog‘,
action: function(dialogRef){
dialogRef.close();
}
}]
});以上是关于Bootstrap之BootstrapDialog的主要内容，如果未能解决你的问题，请参考以下文章
在Symfony 4中使用WebPack Encore定义后无法识别JavaScript对象
JavaScriptBootstrap3-dialog挺好用