bootstrap3-dialog 使用说明
2016-10-14 17:09
369 查看
bootstrap3-dialog 使用模态对话框
这种使用的方式键值是太不方便了涩!
2. 所以就产生了一种简单的方式进行处理
很多的默认的参数,简化了我们的操作的手段
其实创建后的结果,和我们第一步看到的那种是一样的,只是简化了我们的书写步骤!
如下,是一些参数
以及我们可以覆盖一些默认的时间
创建按钮
加载远程的数据信息,这个时候使用ajax 的load去加载远程的数据,我们还可以使用data[]这个数据存放数据
getData(key) Get data entry according to the given key, returns null if no data entry found. 这个是我们默认参数中存放的一些数据,我们可以放置一些数据信息,比如Url的连接等等,或者一些其他的数据 这种公用的方法还有很多的,文档中很详细。
http://nakupanda.github.io/bootstrap3-dialog/
获得远程的数据,而不是写在本地上面的数据信息哦!
dialog实例的初始化,获得实例的例子很多
BootstrapDialog.show(…) is just a shortcut method, if you need dialog instances, use ‘new’.
这个下面也是可以的,但是在自己自动的打开了对话框了
设置type 只是头不同而已css不一样
dialog的大小情况 设置一个相对的大小
size: BootstrapDialog.SIZE_LARGE,
自己定义dialog的形状
自己定义dialog的大小形状
Adding additional css classes to your dialog
This is useful for applying effects to specific dialogs.
For example if you would like to give your ‘login-dialog’ a smaller size, you can do this way:
处理dialog的事件的问题
特定的业务阻止去关闭对话框
Stop closing your dialog.
Option ‘onhide’ gives you an opportunity to stop closing the dialog according to some conditions, making your ‘onhide’ callback returns false to stop closing the dialog.
In the following example, the dialog closes only when your most favorite fruit is ‘banana’ (Case insensitive).
<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 -->
这种使用的方式键值是太不方便了涩!
2. 所以就产生了一种简单的方式进行处理
BootstrapDialog.show({ message: 'Hi Apple!' });
很多的默认的参数,简化了我们的操作的手段
其实创建后的结果,和我们第一步看到的那种是一样的,只是简化了我们的书写步骤!
如下,是一些参数
BootstrapDialog.defaultOptions = { type: BootstrapDialog.TYPE_PRIMARY, size: BootstrapDialog.SIZE_NORMAL, cssClass: '', title: null, message: null, nl2br: true, closable: true, closeByBackdrop: true, closeByKeyboard: true, closeIcon: '×', spinicon: BootstrapDialog.ICON_SPINNER, autodestroy: true, draggable: false, animate: true, description: '', tabindex: -1, btnsOrder: BootstrapDialog.BUTTONS_ORDER_CANCEL_OK };
以及我们可以覆盖一些默认的时间
var BootstrapDialog = function (options) { this.defaultOptions = $.extend(true, { id: BootstrapDialog.newGuid(), buttons: [], data: {},//保存的数据在dialog onshow: null,//打开之前 onshown: null,//打开完成 onhide: null,//关闭之前 onhidden: null//关闭完成 }, BootstrapDialog.defaultOptions); this.indexedButtons = {}; this.registeredButtonHotkeys = {}; this.draggableData = { isMouseDown: false, mouseOffset: {} }; this.realized = false; this.opened = false; this.initOptions(options); this.holdThisInstance(); };
创建按钮
// Button on click $button.on('click', {dialog: this, $button: $button, button: button}, function (event) { var dialog = event.data.dialog; var $button = event.data.$button; var button = $button.data('button'); if (button.autospin) { $button.toggleSpin(true); } if (typeof button.action === 'function') { return button.action.call($button, dialog, event); } });
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'); } }] });
加载远程的数据信息,这个时候使用ajax 的load去加载远程的数据,我们还可以使用data[]这个数据存放数据
getData(key) Get data entry according to the given key, returns null if no data entry found. 这个是我们默认参数中存放的一些数据,我们可以放置一些数据信息,比如Url的连接等等,或者一些其他的数据 这种公用的方法还有很多的,文档中很详细。
http://nakupanda.github.io/bootstrap3-dialog/
getData: function (key) { return this.options.data[key]; },
获得远程的数据,而不是写在本地上面的数据信息哦!
BootstrapDialog.show({ message: $('<div></div>').load('remote.html') });
BootstrapDialog.show({ message: function(dialog) { var $message = $('<div></div>'); var pageToLoad = dialog.getData('pageToLoad'); $message.load(pageToLoad); return $message; }, data: { 'pageToLoad': 'remote.html' } });
dialog实例的初始化,获得实例的例子很多
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();
这个下面也是可以的,但是在自己自动的打开了对话框了
// You can use dialogInstance later. var dialogInstance = BootstrapDialog.show({ message: 'Hello Banana!' });
设置type 只是头不同而已css不一样
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.' }] }); });
dialog的大小情况 设置一个相对的大小
size: BootstrapDialog.SIZE_LARGE,
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); } }] });
自己定义dialog的形状
var dialog = new BootstrapDialog({ message: function(dialogRef){ var $message = $('<div>OK, this dialog has no header and footer, but you can close the dialog using this button: </div>'); var $button = $('<button class="btn btn-primary btn-lg btn-block">Close the dialog</button>'); $button.on('click', {dialogRef: dialogRef}, function(event){ event.data.dialogRef.close(); }); $message.append($button); return $message; }, closable: false }); dialog.realize(); dialog.getModalHeader().hide(); dialog.getModalFooter().hide(); dialog.getModalBody().css('background-color', '#0088cc'); dialog.getModalBody().css('color', '#fff'); dialog.open();
自己定义dialog的大小形状
Adding additional css classes to your dialog
This is useful for applying effects to specific dialogs.
For example if you would like to give your ‘login-dialog’ a smaller size, you can do this way:
<style> .login-dialog .modal-dialog { width: 300px; } </style>
BootstrapDialog.show({ title: 'Sign In', message: 'Your sign-in form goes here.', cssClass: 'login-dialog', buttons: [{ label: 'Sign In Now!', cssClass: 'btn-primary', action: function(dialog){ dialog.close(); } }] });
处理dialog的事件的问题
BootstrapDialog.show({ message: 'Hello world!', onshow: function(dialogRef){ alert('Dialog is popping up, its message is ' + dialogRef.getMessage()); }, onshown: function(dialogRef){ alert('Dialog is popped up.'); }, onhide: function(dialogRef){ alert('Dialog is popping down, its message is ' + dialogRef.getMessage()); }, onhidden: function(dialogRef){ alert('Dialog is popped down.'); } });
特定的业务阻止去关闭对话框
Stop closing your dialog.
Option ‘onhide’ gives you an opportunity to stop closing the dialog according to some conditions, making your ‘onhide’ callback returns false to stop closing the dialog.
In the following example, the dialog closes only when your most favorite fruit is ‘banana’ (Case insensitive).
BootstrapDialog.show({ message: 'Your most favorite fruit: <input type="text" class="form-control">', onhide: function(dialogRef){ var fruit = dialogRef.getModalBody().find('input').val(); if($.trim(fruit.toLowerCase()) !== 'banana') { alert('Need banana!'); return false; } }, buttons: [{ label: 'Close', action: function(dialogRef) { dialogRef.close();//对于对话框内部的实例对象的引用 } }] });
相关文章推荐
- jquery.bootstrap.teninedialog.js使用说明
- 基于Bootstrap的标签页组件及bootstrap-tab使用说明
- bootstrap-dialog插件的使用
- Jquery Dialog的使用说明
- Bootstrap3 日期+时间选择控件 datetimepicker的使用方法说明
- 基于Bootstrap的分页组件bootstrap-pager使用说明
- treegrid.bootstrap使用说明
- ***文件上传控件bootstrap-fileinput的使用和参数配置说明
- 在bootstrap modal dialog中使用webupload,打不开对话框问题解决
- Bootstrap文件(图片)上传插件File Input进阶使用说明
- window.dialogArguments 使用说明
- CColorDialog , CFileDialog , CFontDialog的使用说明
- bootstrap使用说明
- WEB页子窗口(showModalDialog和showModelessDialog)使用说明
- 【原创】[Ext.ux.UploadDialog] 控件使用说明及在Ext 3.x下问题解决
- 使用BOOTSTRAP创建没有遮罩的可移动dialog
- Angular UI ngx-bootstrap 使用说明
- javascript showModalDialog模态对话框使用说明
- Ext.ux.UploadDialog 控件使用说明及在Ext 3.x下问题解决
- CFileDialog、CColorDialog、CFontDialog三个类的使用说明