欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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);
    }
  }]
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。