为NProgress增加模态层,更完美的应用于复杂网页的细长进度条
2016-08-01 19:09
232 查看
NProgress是一款在网页顶部添加细长进度条的工具,非常轻巧,使用起来也非常便捷,灵感来源于Google, YouTube。我是在用github时发现这一特性的,就想应用到我的网站上,经过层层筛选找到了NProgress,感觉非常棒,另外我又为NProgress添加了模态层,因为我不希望一个请求响应未结束前,当前页面再去请求服务。
也可以看到演示效果,我就不再贴我网站的效果图了,就是多了一层模态。
我的项目中有模态框,所以弹出模态框的上面应用模态层的话,就将模态层置于弹出模态框的上面,而不再是body上。
ajaxStart、ajaxStop 两个方法就可以实现请求的进度条的开始和结束。
模态层的样式
使用起来非常简单,最关键的在于找到合理的方案,而这篇博文就可以为你提供解决方案。
一、组件下载
官网http://ricostacruz.com/nprogress/也可以看到演示效果,我就不再贴我网站的效果图了,就是多了一层模态。
二、应用
1、导入组件
<link type="text/css" rel="stylesheet" href="${ctx}/components/nprogress/nprogress.css" /> <script type="text/javascript" src="${ctx}/components/nprogress/nprogress.js"></script>
2、使用组件
// 配置 NProgress.configure({ // 不显示转动的小圆圈 showSpinner : false }); // 将模态层添加到body中 var ajaxbg = $('<div id="background" class="background"></div>').appendTo("body"); ajaxbg.hide(); // 页面绑定ajaxStart、ajaxStop方法 $(document).ajaxStart(function() { // 启动 NProgress.start(); // 如果存在模态框ajax,则将背景层添加到当前模态框上 if ($("#pop_ajax_dialog").length > 0) { $("#pop_ajax_dialog").append(ajaxbg); } else { $("body").append(ajaxbg); } // 模态层 ajaxbg.show(); }).ajaxStop(function() { // 结束、隐藏模态层 NProgress.done(); ajaxbg.hide(); });
我的项目中有模态框,所以弹出模态框的上面应用模态层的话,就将模态层置于弹出模态框的上面,而不再是body上。
ajaxStart、ajaxStop 两个方法就可以实现请求的进度条的开始和结束。
模态层的样式
.background { display:block; width:100%; height:100%; opacity:0.4; filter:alpha(opacity=40); background:#FFF; position:absolute; top:0; left:0; z-index:2000;}
使用起来非常简单,最关键的在于找到合理的方案,而这篇博文就可以为你提供解决方案。
相关文章推荐
- 为NProgress增加模态层,更完美的应用于复杂网页的细长进度条
- WebView之加载网页时增加进度提示
- 很完美的jquery网页加载进度条
- css javascript div实现网页的模态对话框
- qt增加进度对话框
- javascript 网页进度条简单实例
- Python爬虫之路——简单网页抓图升级版(增加多线程支持)
- delphi之完美Splash方案(在TfrmMain.FormCreate里不断调用TfrmSplash显示加载进度文字,并且及时Update显示)
- 利用Nginx的上传模块和上传进度模块实现网页上传文件
- Android webview里加载显示网页,显示进度,点击网页链接跳转到app页面
- 网页内嵌多媒体内容的完美实现
- 贴一例:当所有图片下载完毕时,然后显示网页(有进度)
- 复杂的网页爬虫,python获取网页指的格式数据
- 使用javascript为网页增加夜间模式
- js实现非模态窗口增加数据后刷新父窗口数据
- .net调用支付宝的沙箱测试接口 完美调通(网页支付)
- iOS 网页进度条 NJKWebViewProgress
- 20个jQuery插件,帮你打造完美网页表单
- php+apc完美实现上传进度条,上传进度条在IE7下不显示的解决办法
- DEDECMS栏目增加缩略图的完美方法