基于BootStrap Metronic开发框架经验小结【六】对话(2)

除了上面的常规对话框,我们还经常碰到一种简洁的确认对话框,虽然也可以使用上面的代码来构建一个确认对话框,不过一般情况下不需要这么麻烦的,可以使用插件bootbox的确认对话框来进行处理。

Bootbox.js是一个小的JavaScript库,它帮助您在使用bootstrap框架的时候快速的创建一个对话框,也可以帮您创建,管理或删除任何所需的DOM元素或js事件处理程序。

bootbox.js使用三方法设计模仿他们的本地JavaScript一些方法。他们确切的方法签名是灵活的每个可以采取各种参数定制标签和指定缺省值,但它们通常被称为一样:

bootbox.alert(message, callback)

bootbox.prompt(message, callback)

bootbox.confirm(message, callback)

唯一需要的参数是alert是 message; callback是必需的 confirm 和 prompt 调用以确定用户的响应。甚至当调用警报回调是确定当用户 驳回对话框由于我们的包装方法不能不要块 像他们的母语是有用的:他们是异步而非同步。

这三种方法调用四分之一个公共方法,你也可以使用你自己的自定义对话框创建 :

bootbox.dialog(options)

更多api帮助文档请参见:

Alert

bootbox.alert("Hello world!", function() { Example.show("Hello world callback"); });

Confirm

bootbox.confirm("Are you sure?", function(result) { Example.show("Confirm result: "+result); });

或者代码:

bootbox.confirm("您确认删除选定的记录吗?", function (result) { if (result) { //最后去掉最后的逗号, ids = ids.substring(0, ids.length - 1); //然后发送异步请求的信息到后台删除数据 var postData = { Ids: ids }; $.get("/Province/DeletebyIds", postData, function (json) { var data = $.parseJSON(json); if (data.Success) { showTips("删除选定的记录成功"); Refresh();//刷新页面数据 } else { showTips(data.ErrorMessage); } }); } });

基于BootStrap Metronic开发框架经验小结【六】对话

Prompt

bootbox.prompt("What is your name?", function(result) { if (result === null) { Example.show("Prompt dismissed"); } else { Example.show("Hi <b>"+result+"</b>"); } });

Custom Dialog

使用代码和界面效果如下所示:

bootbox.dialog(…)

[

基于BootStrap Metronic开发框架经验小结【六】对话

2)

2)sweetalert插件的使用

虽然上面的效果非常符合Bootstrap的风格,不过界面略显单调。上面的效果不是我很喜欢这种风格,我遇到一个看起来更加美观的效果,如下所示。

基于BootStrap Metronic开发框架经验小结【六】对话

这个效果是引入插件sweetalert()实现的。

swal({ title: "操作提示", text: newtips, type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", cancelButtonText: "取消", confirmButtonText: "是的,执行删除!", closeOnConfirm: true }, function () { delFunction(); });

上面的界面效果类似的实现代码如下所示:

基于BootStrap Metronic开发框架经验小结【六】对话

基于BootStrap Metronic开发框架经验小结【六】对话

一般它的弹出框代码可以做的很简单,如下所示。

基于BootStrap Metronic开发框架经验小结【六】对话

3、信息提示框的处理

上面两种处理,都是利用弹出对话框进行实现的,而且对界面有阻塞的,一般情况下,我们做信息提示效果,希望它不要影响我们进一步的操作,或者至少提供一个很短的自动消失效果。

那么这里我们就来介绍下jNotify插件和toastr插件了。

1)jNotify提示框的使用

jNotify提示框,一款优秀的jQuery结果提示框插件。我们在提交表单后,通过Ajax响应后台返回结果,并在前台显示返回信息,jNotify能非常优雅的显示操作结果信息。jNotify是一款基于jQuery的信息提示插件,它支持操作成功、操作失败和操作提醒三种信息提示方式。jNotify浏览器兼容性非常好,支持更改提示内容,支持定位提示框的位置,可配置插件参数。

jSuccess(message,{option}); jError("操作失败,请重试!!"); jNotify("注意:请完善你的<strong>个人资料!</strong>");

jNotify的参数详细配置:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzpxwx.html