关于 jquery.showLoading 中 出现的 图标不在页面中间的问题
很多人喜欢 showLoading 因为 这个实在是太简单了直接
showLoading()
hideLoading()
就可以解决这个问题。
今天我们就来看一下 这个插件里面的一个错误
或者说是一个不人性化的地方
对于 showLoading() 中
hPos 和Vpos 默认的都是 center

找到 center X轴

jQuery(loadingDiv).css('left', (indicatorLeft + ((jQuery(overlayDiv).width() - parseInt(jQuery(loadingDiv).width())) / 2)).toString() + 'px');
这个是没有问题的
但是Y轴写成这样就有问题了
jQuery(loadingDiv).css('top', (indicatorTop + (($(overlayDiv).height() - parseInt(jQuery(overlayDiv).height())) / 2)).toString() + 'px');
写成这种情况下 , 在竖直方向对应的中心是 overlayDiv 的高度。
这个高度是 这个页面的高度(如果有滚动条 ,也包含带滚动条的高度)。
所以出现的图片 loading .gif 就不会在页面的正中央。简单修改一下
jQuery(loadingDiv).css('top', (indicatorTop + (($(window).height() - parseInt(jQuery(loadingDiv).height())) / 2)).toString() + 'px');
改成当前窗口的高度。
关于 jquery.showLoading 中 出现的 图标不在页面中间的问题的更多相关文章
- JQuery mobile中按钮自定义属性的改变
1..ui-mobile-viewport是jquery mobile默认给body加的class,这样的话包含选择符优先级高一点 <style> .ui-mobile-viewport ...
- JQuery EasyUI中datagrid的使用
在学习过程中,可以参照JQuery EasyUI的官方网站学习.地址:http://www.jeasyui.com/demo/main/index.php 在学习JQuery EasyUI中的Data ...
- Jquery EasyUI中treegrid
Jquery EasyUI中treegrid的中右键菜单和一般按钮同时绑定事件时的怪异事件 InChatter系统开源聊天模块前奏曲 最近在研究WCF,又因为工作中的项目需要,要为现有的系统增加一 ...
- 用字体在网页中画Icon图标
第一步,下载.IcoMoon网站选择字体图标并下载,解压后将fonts文件夹放在工程目录下.fonts文件夹内有四种格式的字体文件: 注:由于浏览器对每种字体的支持程度不一致,要想在所有浏览器中都显示 ...
- jQuery插件中的this指的是什么
在jQuery插件的范围里, this关键字代表了这个插件将要执行的jQuery对象, 但是在其他包含callback的jQuery函数中,this关键字代表了原生的DOM元素.这常常会导致开发者误将 ...
- 详解jquery插件中;(function ( $, window, document, undefined )的作用
在jquery插件中我们经常看到以下这段代码 1 2 3 ;(function ( $, window, document, undefined ){ //函数体内具体代码 })(jQuery, wi ...
- 网页中多个图标在一张图片上,使用css将各图标显示
现在的网页中显示很多图标算是常态,发现项目中页面上用到的图标都是单个图标单个文件,用的时候直接往页面上挂,这确实很常态. 如果,网站是挂在外网上,或者网速过低,又大量使用图标的情况下,由于浏览器和服务 ...
- 字体在网页中画ICON图标
用字体在网页中画ICON图标有三种小技巧: 1.用CSS Sprite在网页中画小图标 实现方法: 首先将小图片整合到一张大的图片上 然后根据具体图标在大图上的位置,给背景定位.background- ...
- 直接在 CSS 中引用 FONTAWESOME 图标(附码表)
直接在 CSS 中引用 FONTAWESOME 图标(附码表) 因此我们如果不想用 Fontawesome 提供的类,只想在 css 里面引用图标的话,可以这样子,请自行脑补: .icon:befor ...
随机推荐
- Hibernate关联关系映射
1. Hibernate关联关系映射 1.1. one to one <class name="Person"> <id name="id" ...
- 秋叶PPT-三分钟教程
http://yuedu.baidu.com/ebook/0596e5f858f5f61fb73666be <说服力-让你的PPT会说话>原创PPT分享 http://www.docin. ...
- 使用viewpager实现广告条轮询的效果
先上效果图: viewpager是google在v4-support包中提供的,使用时与listview类似,度需要提供一个adapter, 只不过viewpager提供的是PagerAdapter ...
- hdu2571 命运 动态规划Dp
转载请注明出处:http://blog.csdn.net/u012860063 题目链接:pid=2571" target="_blank">http://acm. ...
- 我们应该如何去了解JavaScript引擎的工作原理 系列
http://www.nowamagic.net/librarys/veda/detail/1579
- 给未来的你——李开复2011级大学新生演讲
2011年09月26日08:30 来源:<中国青年报> <中国青年报>的读者朋友们: 你们肩负着中华的未来,你们身上正涌动着创新的血脉! 无论你在哪所学校,哪个城市,你都是与众 ...
- 常用工具之zabbix
简介 zabbix(音同 zæbix)是一个基于WEB界面的提供分布式系统监视以及网 络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制 ...
- Linux--------------安装tomcat8
系统: CentOS 7.2x64最小化安装 IP: 192.168.0.171 二.安装JDK环境 JDK(Java Development Kit) 是 Java 语言的软件开发 ...
- Socket.io 0.7 – Sending messages to individual clients
Note that this is just for Socket.io version 0.7, and possibly higher if they don’t change the API a ...
- iOS 高级开发 runtime(三)
三 .动态添加方法 我们可以通过runtime动态地添加方法.那么到底啥叫动态添加方法呢?动态添加方法就是当我们程序运行时才知道我们应该调用哪个方法.我们首先需要了解这一点,当我们编写完一段代码后,我 ...