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，非常的方便使用。
它可以分别创建如下几种效果：警告、危险、成功、提示的对话框信息，效果如下所示。
它的使用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界面有帮助。如果大家想了解更多资讯敬请关注脚本之家网站！
您可能感兴趣的文章: