BootstrapBootstrapDialog使用详解
这里有两种展现方式
10余年的泽库网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。营销型网站建设的优势是能够根据用户设备显示端的尺寸不同,自动调整泽库建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。成都创新互联公司从事“泽库网站设计”,“泽库网站推广”以来,每个客户项目都认真落实执行。
写在前面:首先你要引入的库有
css : bootstrap.min.css bootstrap-dialog.css
js : jquery-1.11.1.min.js bootstrap.min.js bootstrap-dialog.js
1、通过html代码显示
这种方式简单直观; 但会增加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 : $("").load('content.html') //第一种方式 message : function(content){ //第二种方式 var $message = $(""); 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); } }] });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
当前题目:BootstrapBootstrapDialog使用详解
转载来于:http://myzitong.com/article/jijgoo.html