bootstrap之BootstrapDialog
来源:互联网 发布:js input text value 编辑:程序博客网 时间:2024/06/05 23:50
模态弹框:
<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 -->
Dialog弹出层:
BootstrapDialog.alert('I want banana!');
Examples
Simplest
只提供信息显示,并保持所有其他事情默认。
BootstrapDialog.show({ message: 'Hi Apple!' });
Dialog Title
BootstrapDialog.show({ title: 'Say-hello dialog', message: 'Hi Apple!' });
操作对话标题
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'); } }] });
操作对话信息
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'); } }] });
加载远程页面(1)
BootstrapDialog.show({ message: $('<div></div>').load('remote.html') });
加载远程页面 (2)
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(); } }] });
操作Buttons
通过bootstrapdialog创建按钮有一些额外的功能:
$button.toggleEnable(true|false);
$button.enable(); // 相当于 $button.toggleEnable(true);
$button.disable(); // 相当于 $button.toggleEnable(false);
$button.toggleSpin(true|false);
$button.spin(); // 相当于 $button.toggleSpin(true);
$button.stopSpin(); // 相当于 $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); } }] });
按钮的热键
试着按下面的按钮。
最后一个按钮被禁用,所以没有事情发生,当按下热键。
请注意,如果您的对话框中有一些需要键盘操作的组件,可能会出现冲突,您可以尝试下一个示例。
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.'); } }] });
创建 dialog 实例
BootstrapDialog.show(...) 只是一个快捷方式,如果你需要对话框实例,用“新”。
// 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();
事实上BootstrapDialog.show(...) 也将返回创建的对话框实例。
// You can use dialogInstance later. var dialogInstance = BootstrapDialog.show({ message: 'Hello Banana!' });
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();
较大的对话框
默认情况下,对话框的大小是 'size-normal' 或 BootstrapDialog.SIZE_NORMAL, 但你可以通过设置选项的 'size' 的'size-large' 或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); } }] });
更多信息
bootstrapdialog支持显示丰富的内容,所以你甚至可以使用一个视频剪辑你的对话框中的消息。
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(); } }] });
关闭对话框的更多控件
默认情况下,当选择 'closable' 设置为true,对话框可以通过这些方式关闭:点击在对话框中,按ESC键,点击对话框标题右侧的关闭图标。
如果你想让你的对话框关闭时,对话框标题的关闭图标被点击,可以设置的选项 'closeByBackdrop' and 'closeByKeyboard' 为 false.
BootstrapDialog.show({ message: 'Hi Apple!', message: 'You can not close this dialog by clicking outside and pressing ESC key.', closable: true, closeByBackdrop: false, closeByKeyboard: false, buttons: [{ label: 'Close the dialog', action: function(dialogRef){ dialogRef.close(); } }] });
Confirm
BootstrapDialog.confirm('Hi Apple, are you sure?');
Confirm with callback
BootstrapDialog.confirm('Hi Apple, are you sure?', function(result){ if(result) { alert('Yup.'); }else { alert('Nope.'); } });
Available options
Please note that all options described below are optional, but you will have a weird dialog if you don't even give it a message to display.
Most options can be set via init options or property setters.
BootstrapDialog.TYPE_INFO or 'type-info'
BootstrapDialog.TYPE_PRIMARY or 'type-primary' (default)
BootstrapDialog.TYPE_SUCCESS or 'type-success'
BootstrapDialog.TYPE_WARNING or 'type-warning'
BootstrapDialog.TYPE_DANGER or 'type-danger'Give your dialog a specific look, color scheme can be seen on Bootstrap's Button.sizeBootstrapDialog.SIZE_NORMAL or 'size-normal' (default)
BootstrapDialog.SIZE_WIDE or 'size-wide'
BootstrapDialog.SIZE_LARGE or 'size-large'
-cssClass-Additional css classes that will be added to your dialog.titleString or Object(html)-messageString or Object(html)-buttonsarrayExamples:
BootstrapDialog.show({ title: 'Say-hello dialog', message: 'Hello world!', buttons: [{ id: 'btn-ok', icon: 'glyphicon glyphicon-check', label: 'OK', cssClass: 'btn-primary', autospin: false, action: function(dialogRef){ dialogRef.close(); } }]});
icon: optional, if set, the specified icon will be added to the button.
cssClass: optional, additional css class to be added to the button.
autospin: optinal, if it's true, after clicked the button a spinning icon appears.
action: optional, if provided, the callback will be invoked after the button is clicked, and the dialog instance will be passed to the callback function.closabletrue | falseWhen set to true, you can close the dialog by:
- Clicking the close icon in dialog header.
- Clicking outside the dialog.
- ESC key.
Default value is 'glyphicon glyphicon-asterisk'.Specify what icon to be used as the spinning icon when button's 'autospin' is set to true.dataKey-value object. For example {'id' : '100'}Data to be bound to the dialog.onshowfunctionIf provided, it will be invoked when the dialog is popping up.
onshownfunctionIf provided, it will be invoked when the dialog is popped up.
onhidefunctionIf provided, it will be invoked when the dialog is popping down.
onhiddenfunctionIf provided, it will be invoked when the dialog is popped down.
autodestroytrue (default) | falseWhen it's true, all modal stuff will be removed from the DOM tree after the dialog is popped down, set it to false if you need your dialog (same instance) pups up and down again and again.descriptionStringIf provided, 'aria-describedby' attribute will be added to the dialog with the description string as its value. This can improve accessibility, as the description can be read by screen readers.nl2brtrue | falseAutomatically convert line breaking character to <br /> if it's set to true, everything keeps original if it's false.
Available methods
- bootstrap之BootstrapDialog
- Bootstrap--BootstrapDialog
- BootstrapDialog 弹框用法
- ASP.NET MVC BootstrapDialog
- BootstrapDialog.show函数底层简化
- bootstrap之bootstrap&type样式
- Bootstrap库之Modals
- Tomcat 之 Bootstrap
- bootstrap 之 css
- bootstrap 之 组件
- bootstrap 之 基本知识
- bootstrap 之准备开发
- bootstrap 之 CSS样式
- bootstrap 之 LESS
- Bootstrap 之 tab 改
- Bootstrap学习之模态框
- bootstrap之初
- Bootstrap之表格
- 服务器caffe配置
- android studio中配置gradle那些事儿
- java设计模式--策略模式--规避继承的耦合度大和接口的不能复用
- linux常用命令以及全程
- poi 导出excel
- bootstrap之BootstrapDialog
- idea如何设置类头注释和方法注释
- Android View的坐标获取方法
- PopupWindow写法
- PullToRefreshListView+ViewPager无限轮播
- Ubuntu mate 树莓派3
- Ubuntu 如何直接回到桌面
- JAVA--HashCode 基础(判断对象是否相等)
- 数学家苏青云不为人知的故事