用来处理HTML页面弹出框的jQuery插件

最近站长Tony开发了一个jquery.pop.js插件,这是一个用来处理弹出框的jQuery插件,目的是为了兼容IE6浏览器,从此不用不用为了IE6写CSS hack了,现代浏览器的fix和absolute怎么写就怎么写,无需考虑IE6一样兼容。值得注意的是jquery版本要求是1.3到1.8,HTML声明请遵循W3C标准。

使用方法:

$('#loginBox').popup();
$('#loginBox').pophide();

以上是弹出框的弹出和隐藏。

$('#loginBox').popup({
filter : '#filter'
});
$('#loginBox').pophide({
filter : '#filter'
});

如果添加了参数filter,表示弹出的同时开启滤镜,关闭的时候关闭滤镜。filter传入的值和你想要填写的选择器的内容是一样的。

demo地址:http://www.tonitech.com/demo/jquery.pop.js

jquery.pop.js插件的代码如下:

//@charset "utf-8";
/**
 * jquery版本要求:1.3 ~ 1.8,HTML声明请遵循W3C标准
 * 用来处理弹出框的jQuery插件
 * 兼容IE6浏览器,从此您再也不用担心IE6的弹框
 * 不用写css hack,否则会出问题,现代浏览器怎么写就怎么写
 * @author wangzhiangtony@qq.com
 * @version 1.2
 * @date 2013-3-27 10:09:59
 */
(function($) {
    //弹出的窗口处于屏幕中间
    $.fn.popup = function(opts) {
        var defaults = {
            filter : ''
        };
        var options = $.extend(defaults, opts);

        if(defaults.filter != '') {
            var maskHeight = $('body').height();
            $(options.filter).css('height', maskHeight);
            $(options.filter).show();
        }
        var str = $(this);

        var pos = str.css('position');
        if(pos == 'fixed') {
            var top = ($(window).height() - str.height()) / 2;
            //fix兼容ie6
            if($.browser.msie && $.browser.version == "6.0") {
                str.css('position', 'absolute');
                var dom = str[0];
                $('body').css({
                    'background-image' : 'url(about:blank)',
                    'background-attachment' : 'fixed'
                });
                dom.style.setExpression('top', 'eval((document.documentElement.scrollTop)+' + top + ')');
            }
        } else {
            var top = $(window).scrollTop() + ($(window).height() - str.height()) / 2;
        }
        if(top > 0) {
            str.css('top', top);
        } else {
            str.css('top', 0);
        }

        var width = $(window).width();
        var left = (width - str.width()) / 2;
        if(left > 0) {
            str.css('left', left);
        } else {
            str.css('left', 0);
        }
        str.css('z-index', '1000');
        str.show();
    };

    $.fn.pophide = function(opts) {
        var defaults = {
            filter : ''
        };
        var options = $.extend(defaults, opts);

        if(defaults.filter != '') {
            $(options.filter).hide();
        }
        $(this).hide();
    };
})(jQuery);

demo下载地址:jquery.pop.js (504)

select层级过高的解决办法

select是一个让人很头疼的东西,尤其是一个页面中需要悬浮一个弹窗的时候,你就会发现任怎么去设置z-index,它总是那么抢在最前面。

如何处理这个“二货”?

通常只有iframe可以降服它:

例子:

<div class="fixed-box" style="z-index:100"></div>
<iframe class="fixed-box" style="z-index:99"></div>

这样定位在页面的同一个位置,

但是总是觉得iframe是个累赘,如果页面条件允许的话,可以通过js控制select隐藏。

在IE 6 7浏览器中resize事件执行多次的解决方法

今天在工作中有一个悬浮的意见反馈窗口需要根据页面大小自适应显示,当用户打开收藏夹使得页面变化之后也要跟着变化,于是用到了jquery的resize函数,但是我发现在我电脑里,IE 6下回运行resize中的内容3次,IE 8只运行了1次,也就是说IE 6下的会触发很多次resize事件。而且我还听说resize事件中包含某些页面内容处理或计算导致resize事件再次被触发的时候,IE会随机陷入假死状态。
到jquery的官网上发现了一个叫做wresize的plugin( http://noteslog.com/post/how-to-fix-the-resize-event-in-ie/  ),找到了一个解决方法:
/*  
===================================================================
WResize is the jQuery plugin for fixing the IE window resize bug
...................................................................
                                Copyright 2007 / Andrea Ercolino
-------------------------------------------------------------------
LICENSE: http://www.opensource.org/licenses/mit-license.php
WEBSITE: http://noteslog.com/
===================================================================
*/

(function($){
	$.fn.wresize = function(f) {
		version = '1.1';
		wresize = {fired: false, width: 0};

		function resizeOnce() 
		{
			if ($.browser.msie) {
				if (!wresize.fired) {
					wresize.fired = true;
				} else {
					var version = parseInt($.browser.version, 10);
					wresize.fired = false;
					if (version < 7) {
						return false;
					} else if (version == 7) {
						//a vertical resize is fired once, 
                        //an horizontal resize twice
						var width = $(window).width();
						if (width != wresize.width) {
							wresize.width = width;
							return false;
						}
					}
				}
			}
			return true;
		}
		function handleWResize(e) 
		{
			if (resizeOnce()) {
				return f.apply(this, [e]);
			}
		}
		this.each(function() 
		{
			if (this == window) {
				$(this).resize(handleWResize);
			} else {
				$(this).resize(f);
			}
		});
		return this;
	};
}) (jQuery);
将以上代码放在一个jquery.wresize.js文件中引入或者放在你的代码后面都没有关系,这样就可以解决IE 6 7下触发很多次resize事件的问题了。

网站优化的方法(给你的网站减肥)

         如果你的网站刚刚拿去检测了之后,发现结果不满意,怎么办?有几个方法可以帮你解决问题。

        1.给图片瘦身。如果你网站的图片加载速度特别慢,谷歌会把你的页面置于非常靠后的位置。你可以考虑下格式,如果是一张需要表现细节的照片,你可以将它设置为位图,不过,如果是线条或者图标,你可以使用更小的矢量图。几乎所有的图片都可以减肥,你可以尝试让图片使用更少的色彩、图像大小压缩技术。比如,Photoshop里,点击文件->存储为Web和设备所用格式,可以优化和编辑图片,并可以显示大小变化多少。

        2.清理网页。很多人创建网站的时候会走捷径,会去使用别人的代码,会用模板,而不是重零开始纯手工打造,这样会付出代价的。这些方法往往会在页面上留下许多短字节的废话或遗留的代码。所以,要找一个有经验的工程师看看你的页面,删除部分没用的代码。

        3.利用CSS。你的页面用很多的表格?可以利用CSS去掉一些笨重的HTML,当然啦,本人已经很少使用table了,都是利用DIV+CSS来制作网页。如果你使用了CSS,你还要对CSS进行优化,如果你不知道怎么优化,那我就推荐一个工具给你——雅虎的YUI Compressor,你可以到http://yuilibrary.com/download/yuicompressor/这个网址下载它。它的效果你可以看看,刚刚开始的时候你的CSS代码是:

.color-me { color: rgb(123, 123, 123); border-color: #ffeedd; background: none repeat scroll 0 0 rgb(255, 0,0);}

优化之后:

.color-me{color:#7b7b7b;border-color:#fed;background:none repeat scroll 0 0 #f00}

可以看出,RGB颜色的值被优化了,然后代码紧凑了之后减少了空格占用的空间。

        你需要扪心自问下,你的主页真的需要欢迎动画吗?人们来你的网站就是为了看这些超大的图片吗?你的网站是否堆满了导致它无法正常运行的垃圾?你要抽出时间来个大扫除了!

网站地图的作用

        很多网站管理员认为添加网站地图会使用户绕过他们精心设计的导航路径,导致用户无法领略网站的魅力。实际上,如果你的访客无法在有限时间内找到他们想要的东西,他们会选择离开,而且不太可能会回来,如果Googlebot在你网站上辨不清方向,它不会停留太长时间,而且谷歌不会给你电话确认你的网站有没有问题,你只有一次机会。所以当那些辨不清方向的访客和迷路的搜索引擎感到孤独无助的时候,你要尽最大努力去帮助他们。

        你提供网站地图可能会让用户错过一些妙趣横生的文字和美丽的图片,不过他们却找到了他们想要的东西,他们可能会参加你的推广活动,并对你进行全面的了解。如果Googlebot能够通过你的网站地图索引你的整个网站,你的排名也会得到提升,这不是你想要的结果吗?谷歌无法看懂你的Javascript导航,使用网站地图能够确保每个页面上都有一个明显的链接,Googlebot可以采用你提供的简单路径。

        把网站地图放在帮助页面也不失为一种精明的做法,即便你已经在这也上设置了网站地图的链接或者按钮。有些用户会看到主页上的链接,而有些人可能认为你把它隐藏在帮助页面里了。更重要的,你一定要确保主页和索引页面上有直接通向网站地图的链接。