基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化

在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增、编辑、查看详细等界面使用弹出对话框层的方式进行显示数据,删除则可能使用一个提示确认框,如果操作成功,我们可以使用更丰富的提示框来处理,本篇主要对比说明在Bootstrap开发中用到的这些技术要点。

1、Bootstrap对话框的使用

常规的Bootstrap有几种尺寸的对话框,包括默认状态的小对话框,中等宽度的对话框,和全尺寸的对话框几种,Bootstrap的对话框界面非常友好, 当我们使用ESC键或者鼠标单击其他空白处,则会自动隐藏对话框的。

它们的定义只是class不同,如下面是默认的小对话框界面代码:

<!--------------------------添加/修改信息的弹出层---------------------------->
<div id="add" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-primary">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title">
          <i class="icon-pencil"></i>
          <span id="lblAddTitle" style="font-weight:bold">添加信息</span>
        </h4>
      </div>
      <form class="form-horizontal form-bordered form-row-strippe" id="ffAdd" action="" data-toggle="validator" enctype="multipart/form-data">
        <div class="modal-body">
          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                <label class="control-label col-md-2">父ID</label>
                <div class="col-md-10">
                  <select id="PID" name="PID" type="text" class="form-control select2" placeholder="父ID..." ></select>
                </div>
              </div>
            </div>
            <div class="col-md-12">
              <div class="form-group">
                <label class="control-label col-md-2">名称</label>
                <div class="col-md-10">
                  <input id="Name" name="Name" type="text" class="form-control" placeholder="名称..." />
                </div>
              </div>
            </div>
            <div class="col-md-12">
              <div class="form-group">
                <label class="control-label col-md-2">备注</label>
                <div class="col-md-10">
                  <textarea id="Note" name="Note" class="form-control" placeholder="备注..."></textarea>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer bg-info">
          <input type="hidden" id="ID" name="ID" />
          <button type="submit" class="btn blue">确定</button>
          <button type="button" class="btn green" data-dismiss="modal">取消</button>
        </div>
      </form>
    </div>
  </div>
</div>

大概的界面如下所示:

注意上面代码里面的对话框样式代码,如下:

<div class="modal-dialog">

如果是其他两个尺寸的数据库,也只需要修改这里即可,如下所示两种代码分别是:

<div class="modal-dialog modal-lg">

以及

<div class="modal-dialog modal-full">

我们可以根据界面元素的布局,来决定采用哪个尺寸的对话框层定义,不过他们这几个对话框的调用方式是一致的。

打开对话框界面如下所示:

//显示可以选择客户
$("#btnSelectCustomer").show();

关闭对话框界面如下所示:

$("#add").modal("hide");

一般情况下,我们弹出的对话框就是一个表单,可以执行类似保存数据的提交操作的,因此需要对表单的数据进行验证,如果有错误,我们可能需要在界面上提醒,因此在页面初始化的时候,需要初始化表单的验证规则,下面是我们常规的表单初始化操作。

//绑定相关事件
    function BindEvent() {
      //判断表单的信息是否通过验证
      $("#ffAdd").validate({
        meta: "validate",
        errorElement: 'span',
        errorClass: 'help-block help-block-error',
        focusInvalid: false,
        highlight: function (element) {
          $(element).closest('.form-group').addClass('has-error');
        },
        success: function (label) {
          label.closest('.form-group').removeClass('has-error');
          label.remove();
        },
        errorPlacement: function (error, element) {
          element.parent('div').append(error);
        },
        submitHandler: function (form) {
          $("#add").modal("hide");
          //构造参数发送给后台
          var postData = $("#ffAdd").serializeArray();
          $.post(url, postData, function (json) {
            var data = $.parseJSON(json);
            if (data.Success) {
              //增加肖像的上传处理
              $('#file-Portrait').fileinput('upload');
              //保存成功 1.关闭弹出层,2.刷新表格数据
              showTips("保存成功");
              Refresh();
            }
            else {
              showError("保存失败:" + data.ErrorMessage, 3000);
            }
          }).error(function () {
            showTips("您未被授权使用该功能,请联系管理员进行处理。");
          });
        }
      });
    }

但是一般这些代码都会重复很多,因此我们可以封装函数的方式,重用部分代码,从而使用更简洁的处理代码,但同样能达到目的。

 //绑定相关事件
    function BindEvent() {
      //添加、编辑记录的窗体处理
      formValidate("ffAdd", function (form) {
        $("#add").modal("hide");
        //构造参数发送给后台
        var postData = $("#ffAdd").serializeArray();
        $.post(url, postData, function (json) {
          var data = $.parseJSON(json);
          if (data.Success) {
            //保存成功 1.关闭弹出层,2.刷新表格数据
            showTips("保存成功");
            Refresh();
          }
          else {
            showError("保存失败:" + data.ErrorMessage, 3000);
          }
        }).error(function () {
          showTips("您未被授权使用该功能,请联系管理员进行处理。");
        });
      });
    } 

2、删除确认的对话框处理

1)bootbox插件的使用

除了上面的常规对话框,我们还经常碰到一种简洁的确认对话框,虽然也可以使用上面的代码来构建一个确认对话框,不过一般情况下不需要这么麻烦的,可以使用插件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帮助文档请参见:http://bootboxjs.com/documentation.html

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

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(…)

[2)

2)sweetalert插件的使用

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

这个效果是引入插件sweetalert(http://t4t5.github.io/sweetalert/)实现的。

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

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

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

3、信息提示框的处理

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

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

1)jNotify提示框的使用

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

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

jNotify的参数详细配置:

autoHide : true,        // 是否自动隐藏提示条
clickOverlay : false,      // 是否单击遮罩层才关闭提示条
MinWidth : 200,          // 最小宽度
TimeShown : 1500,         // 显示时间:毫秒
ShowTimeEffect : 200,       // 显示到页面上所需时间:毫秒
HideTimeEffect : 200,       // 从页面上消失所需时间:毫秒
LongTrip : 15,          // 当提示条显示和隐藏时的位移
HorizontalPosition : "right",   // 水平位置:left, center, right
VerticalPosition : "bottom",   // 垂直位置:top, center, bottom
ShowOverlay : true,        // 是否显示遮罩层
ColorOverlay : "#000",      // 设置遮罩层的颜色
OpacityOverlay : 0.3,      // 设置遮罩层的透明度
onClosed:fn      //关闭提示框后执行函数,可以再次调用其他jNotify。如上面的三个依次调用。

下面是我在脚本类里面封装的饿公用方法,用来实现提示效果的显示的。

//显示错误或提示信息(需要引用jNotify相关文件)
function showError(tips, TimeShown, autoHide) {
  jError(
   tips,
   {
     autoHide: autoHide || true, // added in v2.0
     TimeShown: TimeShown || 1500,
     HorizontalPosition: 'center',
     VerticalPosition: 'top',
     ShowOverlay: true,
     ColorOverlay: '#000',
     onCompleted: function () { // added in v2.0
       //alert('jNofity is completed !');
     }
   }
  );
}
//显示提示信息
function showTips(tips, TimeShown, autoHide) {
  jSuccess(
   tips,
   {
     autoHide: autoHide || true, // added in v2.0
     TimeShown: TimeShown || 1500,
     HorizontalPosition: 'center',
     VerticalPosition: 'top',
     ShowOverlay: true,
     ColorOverlay: '#000',
     onCompleted: function () { // added in v2.0
       //alert('jNofity is completed !');
     }
   }
  );
}

这样我们在使用Ajax的POST方法的时候,我们可以根据不同的需要进行提示。

  var postData = $("#ffAdd").serializeArray();
          $.post(url, postData, function (json) {
            var data = $.parseJSON(json);
            if (data.Success) {
              //增加肖像的上传处理
              $('#file-Portrait').fileinput('upload');
              //保存成功 1.关闭弹出层,2.刷新表格数据
              showTips("保存成功");
              Refresh();
            }
            else {
              showError("保存失败:" + data.ErrorMessage, 3000);
            }
          }).error(function () {
            showTips("您未被授权使用该功能,请联系管理员进行处理。");
          });

2)toastr插件的使用

toastr是一个Javascript库用于创建Gnome/Growl风格,非阻塞的页面消息提醒。,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置,在官方站可以通过勾选参数来生成JS,非常的方便使用。

插件地址是:http://codeseven.github.io/toastr/

它可以分别创建如下几种效果:警告、危险、成功、提示的对话框信息,效果如下所示。

它的使用JS代码如下所示。

//显示一个警告,没有标题
toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!')
//显示一个成功,标题
toastr.success('Have fun storming the castle!', 'Miracle Max Says')
//显示错误标题
toastr.error('I do not think that word means what you think it means.', 'Inconceivable!')
//清除当前的列表
toastr.clear() 

这个插件的参数定义说明如下所示。

//参数设置,若用默认值可以省略以下面代
  toastr.options = {
    "closeButton": false, //是否显示关闭按钮
    "debug": false, //是否使用debug模式
    "positionClass": "toast-top-full-width",//弹出窗的位置
    "showDuration": "300",//显示的动画时间
    "hideDuration": "1000",//消失的动画时间
    "timeOut": "5000", //展现时间
    "extendedTimeOut": "1000",//加长展示时间
    "showEasing": "swing",//显示时的动画缓冲方式
    "hideEasing": "linear",//消失时的动画缓冲方式
    "showMethod": "fadeIn",//显示时的动画方式
    "hideMethod": "fadeOut" //消失时的动画方式
    };
    //成功提示绑定
    $("#success").click(function(){
    toastr.success("祝贺你成功了");
    })

以上就是我在项目里面,对对话框及提示框的处理和优化的经验总结,希望对大家学习改进Web界面有帮助。如果大家想了解更多资讯敬请关注我们网站!

时间: 2016-05-10

JS组件Bootstrap实现弹出框和提示框效果代码

前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信息提示框.本篇就结合这三种类型分别来介绍下它们的使用. 一.Bootstrap弹出框

Bootstrap基本插件学习笔记之Popover提示框(19)

Tooltip采用的是hover方式弹出提示框(参见前一篇:Bootstrap学习总结笔记(18)– 基本插件之Tooltip提示工具),适合提示内容比较少的情况,要是内容较多,就可以应用Popover提示框. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" cont

BootStrap的alert提示框的关闭后再显示怎么解决

bootstrap中有alert组件,如果点击关闭按钮后该组件会被删除而不是被隐藏,想再显示怎么办呢? bootstrap-alert.js源码片段: function removeElement() { $parent .trigger('closed') .remove() } 理论上把.remove()改为.hide(),然后在需要重新显示的地方,加上$('#alert').show();就可以了. 但实际应用中,可以把 close button 的 data-dismiss 去掉,加上

BootStrap tooltip提示框使用小结

提示框 提示框的基本使用方式为: 复制代码 代码如下: <span data-toggle="tooltip" data-original-title="this is alert content">test message</span> data-original-title可以直接写为title,仍然能正常使用,源码中优先查找前者,前者不存在就会查找title 提示框不提供HTML触发方式只能通过JS来进行触发: $("[dat

Bootstrap实现提示框和弹出框效果

首先讲一讲提示框(Tooltip) 的使用方法 样式文件: LESS版本:对应源文件 tooltips.less <style id="jsbin-css"> body { padding: 100px; } .btn { margin: 20px 10px 20px; } </style> </head> <body> <h3>按钮做的提示框</h3> <button type="button&q

Bootstrap提示框效果的实例代码

本文介绍了Bootstrap提示框,分享给大家,顺便也给自己留个笔记 前面的话 提示框是一个比较常见的功能,一般来说是鼠标移动到特定元素上时,显示相关的提示语.本文将详细介绍Bootstrap提示框 基本用法 Bootstrap框架中的提示框,结构非常简单,常常使用的是按钮<button>标签或者链接<a>标签来制作.不管是使用按钮还是链接来制作提示框,他们都需要满足下列条件: 1.通过 title 属性的值来定义提示信息(也可以使用自定义属性 data-original-titl

bootstrap提示标签、提示框实现代码

首先聊一聊提示标签: <body> <div class="container"> <div class="row"> <div class="col-lg-6"> <p> <a href="#" class="tool" data-toggle="tooltip" data-placement="top&quo

JavaScript实现带自动提示的文本框效果代码

示例一:直接编写AJAX 实现. 客户端: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Ajax实现自动提示的文本框</title> <st

JS组件Bootstrap实现弹出框效果代码

为页面内容添加一个小的覆盖层,就像iPad上的效果一样,为页面元素增加额外的信息. 插件依赖 弹出框依赖工具提示插件,因此需要先加载工具提示插件. 选择性加入的功能 出于性能方面的考虑,工具提示和弹框组件的data属性api是选择性加入的,也就是说你必须自己初始化他们. 弹出框在按钮组和输入框组中使用时,需要额外的设置 当提示框与.btn-group 或 .input-group联合使用时,你需要指定container: 'body'选项(见下面的文档)以避免不需要的副作用(例如,当弹出框显示之

Bootstrap实现弹性搜索框

Bootstrap是Twitter推出的一个用于前端开发的开源工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架. 接下来通过本文给大家介绍Bootstrap实现弹性搜索框的代码,一起看下吧. <form action="" method="get" class="form-horizontal"> <div class="input-group se

基于jQuery实现弹出可关闭遮罩提示框实例代码

jquery CSS3遮罩弹出层动画效果,使用非常简单,就两个标签,里面自定义内容和样式,四种常见效果,懂的朋友还可以修改源代码修改成自己想要的效果 先给大家展示下效果图,如果大家感觉还不错,请参考实现代码. 效果演示 关键代码如下所示: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo

js右下角弹出提示框示例代码

本文实例讲解了网页右下角弹出广告信息框实例代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>网页右下角的信息框</title> </head> <style type="text/css"> #winpop { width:200px;

JS实时弹出新消息提示框并有提示音响起的实现代码

在java web认证系统开发中,客户要求有数据更新时要在页面弹出提示框,这样方便在旁边的工作人员可以及时的知道有新数据提交了,我们除了使用及时的推送技术外还可以使用ajax来实现这些功能. 代码实现的原理,在页面启用定时执行ajax请求,如果获得数据是最新状态的,要执行语音提示和弹出框提示,这样实现的弊端是频繁的调用数据库,该方法只适合于使用人数较少的系统. 1.加入语音提示 <audio id="sound" autoplay="autoplay">

Android AutoCompleteTextView自动提示文本框实例代码

自动提示文本框(AutoCompleteTextView)可以加强用户体验,缩短用户的输入时间(百度的搜索框就是这个效果). 先给大家展示下效果图,如果大家感觉还不错,请参考实现代码: 最后一张获取文本框里面的值(其实就跟TextView.EditText一样): 首先,在xml中定义AutoCompleteTextView控件: activity_main.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/r