Bootstrap BootstrapDialog使用详解
程序员文章站
2024-02-08 12:55:28
这里有两种展现方式
写在前面:首先你要引入的库有
css : bootstrap.min.css bootstrap-dialog.css
js : jqu...
这里有两种展现方式
写在前面:首先你要引入的库有
css : bootstrap.min.css bootstrap-dialog.css
js : jquery-1.11.1.min.js bootstrap.min.js bootstrap-dialog.js
1、通过html代码显示
<!-- button trigger modal 弹出框的触发器 --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#mymodal"> launch demo modal </button> <!-- modal 弹出框的结构 --> <div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mymodallabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="mymodallabel">modal title</h4> </div> <div class="modal-body"> ... </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> </div> </div>
这种方式简单直观; 但会增加html的‘重量',而且不够灵活,大量使用时不建议使用
2、通过js的方式展现(需要注意的地方我都写在注释里了)
(1)最简单的实现方式:
bootstrapdialog.show({ message: 'hi apple!' });
还有一种更简单的实现方式:bootstrapdialog.alert('i want banana!'); //异步加载 适合用在方法的最后
(2)buttons
bootstrapdialog.show({ message : "message", buttons : [{ label : "btn1", cssclass : "btn-primary" //给按钮添加类名 可以通过此方式给按钮添加样式 },{ label : "btn2", icon : "glyphicon glyphicon-ban-circle" //通过bootstrap的样式添加图标按钮 },{ label : "btn3", action : function(dialog){ //给当前按钮添加点击事件 dialog.close(); } } ] });
(3)操作title、message 可以通过 settitle 和 setmessage 操作title和message
bootstrapdialog.show({ title : "this is a title!", //title message : "document comtent", buttons : [{ label : "cancel", action : function(dialog){ dialog.settitle("title2"); //操作title dialog.setmessage("message1"); //操作message dialog.close(); } },{ label : "ok", action : function(dialog){ dialog.close(); } }] })
(4)按钮热键 (本人认为不常用)
bootstrapdialog.show({ title: 'button hotkey', message: 'try to press some keys...', onshow: function(dialog) { dialog.getbutton('button-c').disable(); //通过getbutton('id')获得按钮 }, 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.'); } }] })
(5)动态加载message
bootstrapdialog.show({ //message : $("<div></div>").load('content.html') //第一种方式 message : function(content){ //第二种方式 var $message = $("<div></div>"); var loaddata = content.getdata("contentfile"); $message.load(loaddata); return $message; //一定记得返回值! }, data : {"contentfile" :"content.html"} });
(6)控制弹出框右上角的关闭按钮
bootstrapdialog.show({ message: 'hi apple!', closable: true, //控制弹出框拉右上角是否显示 ‘x' 默认为true 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(); //总是能关闭弹出框 } }] });
(7) 弹出框的尺寸
bootstrapdialog.show({ title: 'more dialog sizes', message: 'hi apple!', size : bootstrapdialog.size_normal //默认尺寸 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); } }] });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。