用来处理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 (481)

IE下实现HTML5 input标签的placeholder属性的jquery.placeholer.js(Tony原创)

        最近站长Tony开发了一个jquery.placeholder.js插件,这是一个用来在IE10之前的IE浏览器下模拟HTML5 input标签的placeholder属性的插件,用上它只需要在input标签中写上placeholder属性即可,还实现了placeholder的内容字体颜色和IE相同的功能。值得注意的是jquery版本要求是1.3到1.8,HTML声明请遵循W3C标准。

使用方法:

引入jquery.placeholder.js,在input标签中写上placeholder属性即可。

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

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

//@charset "utf-8";
/**
 * jquery版本要求:1.3 ~ 1.8,HTML声明请遵循W3C标准
 * 用来模拟HTML5 input标签的placeholder属性的插件
 * 兼容IE6、7、8、9浏览器
 * @author wangzhiangtony@qq.com
 * @version 1.0
 * @date 2013-4-15 11:16:59
 */
$(function($) {
    //判断浏览器是否支持placeholder属性
    function isPlaceholder() {
        var input = document.createElement('input');
        return 'placeholder' in input;
    }

    function changeToOriginalColor(self) {
        var index = $(self).index();
        var color = originalColor[$(self).index()];
        $(self).css('color', color);
    }

    if(!isPlaceholder()) {
        var texts = $(':text');
        var len = texts.length;
        var originalColor = [];
        for(var i = 0; i < len; i++) {
            var self = texts[i];
            var placeholder = $(self).attr('placeholder');
            if($(self).val() == "" && placeholder != null) {
                $(self).val(placeholder);
                originalColor[i] = $(self).css('color');
                $(self).css('color', '#666');
            }
        }
        texts.focus(function() {
            if($(this).attr('placeholder') != null && $(this).val() == $(this).attr('placeholder')) {
                $(this).val('');
                changeToOriginalColor(this);
            }
        }).blur(function() {
            if($(this).attr('placeholder') != null && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
                $(this).val($(this).attr('placeholder'));
                $(this).css('color', '#666');
            }
        });
    }
});

demo下载地址:

jquery.placeholder.js (831)

用于修改图片大小并保持长宽比的jQuery插件(Tony原创)

        最近站长Tony开发了一个jquery.imgresize.js插件,这是一个用来修改图片大小并保持长宽比的jQuery插件,用于用户发布文章之后查看文章,如果用户的图片超过了我们容器的宽度不至于把样式搞乱,如果没有超过容器的宽度就保持原来的大小,兼容IE6、7、8浏览器。值得注意的是jquery版本要求是1.3到1.8,HTML声明请遵循W3C标准。

使用方法:

$('img').imgresize();
$('img').imgresize({width:600});

支持多张图片同时调整大小,例如选择器的元素有多张图片,让多张图片同时调整成等于或小于width的大小。没有填写width这个参数图片将保持原来的大小。

2013年9月25日优化了原来的代码,提高了插件的兼容性。

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

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

// @charset "utf-8";
/**
 * jquery版本要求:1.3 ~ 1.8,HTML声明请遵循W3C标准
 * 用来修改图片大小并保持长宽比的jQuery插件
 * 兼容IE6浏览器
 * @author wangzhiangtony@qq.com
 * @version 1.2
 * @date 2013-9-25 14:46:49
 */
(function($) {
    $.fn.imgresize = function(opts) {
        var defaults = {
            width : null
        };
        var options = $.extend(defaults, opts);

		if(options.width != null) {
            if($.browser.msie) {
				$('img').each(function(index, element){
                    var src = $(element).attr('src');
                    $(element).load(function() {
                        iresize(this);
                    });
                    $(element).attr('src', src + '?' + new Date().getTime());
				});
            } else {
                $('img').load(function() {
                    iresize(this);
                });
            }
        }

        function iresize(self) {
            var width = $(self).width();
            var height = $(self).height();
            if(width > options.width) {
                height = options.width * height / width;
                $(self).css('width', options.width);
                $(self).css('height', Math.round(height));
            }
        }
    };
})(jQuery);

demo下载地址:

jquery.imgresize.js (542)

WordPress撰写文章SEO关键词自动生成插件工具下载(1.3版本)

提示:All in One SEO这个插件如果有更新请大家不要点自动更新,否则本插件将被覆盖。

点击下面的链接完成下载:

SEO关键词自动生成插件 (502)

下载该插件的zip文件之后,然后到你的wordpress后台->插件->安装插件->上传,选择all-in-one-seo-pack.zip,点击现在安装。

注:系统生成的关键词仅供参考

1.3 描述

整合了最新版的All in One SEO 1.6.15.3

1.2 版本描述

整合了最新版的All in One SEO 1.6.15.2

修改编码格式的问题

可同时生成标签

修改了无法生成关键词的问题

1.1版本描述

修改中文词典的错误

修改了无法安装的bug

修改了路径的bug

1.0版本描述

WordPress撰写文章SEO关键词自动生成插件是由www.tonitech.com的站长Tony基于Semper Fi Web Design的Michael Torbert开发的All in One SEO进行了修改,添加了新建文章中关键词生成工具完成了开发。安装了此插件,你在写文章的时候底部会出现All in One SEO Pack,Keywords的输入框后面有一个“自动生成关键词”按钮,你只需要点击这个按钮,系统就会根据中文分词算法,按照词频自动生成这篇文章的8个关键词。

loadrunner Flights中applet插件无法显示引发的问题

虽说多遇事助成长、
可老遇老遇也很烦躁、
loadrunner录制时,默认浏览器是打开IE
可录到一半老出现下图1

然后直接用chrome浏览器打开网页运行了下、
一切正常、
但刚打开时有提示安装下图2

然后就想着IE可能是JDK的原因、
去下了jdk-7-windows-i586 、安装了、还是不行、下图3中的这个applet插件处显示为红叉、

觉得放弃吧、换默认浏览器、
loadrunner中在Vuser下的Run-Time Settings里可以选择默认浏览器的类型、
一看只有这3种、如图45

那就下载个firefox吧、结果firefox里也applet插件也不能正常显示、
坑爹啊、
但事实上、在录制的时候就可以直接选择默认浏览器!!!、图6

那直接这边设置就OK了、
这个YX猜测说、这种就是软件新旧交替的时候没有搞好、旧版只能在图45中设置、连古董级老早死掉的netscape都还放着、
而新版已经可以在录制(图6)时直接选择、

后:后来还是想着要把IEfirefox给搞搞出来、
YXJDK7太新了、
那就去先把JDK7卸了吧、控制面板中JDK6JDK7都在、之前的JDK6也没删、
卸载JDK7、反而却是在更新、更新结束后、再次打开IEFIrefox、都OK了、

很多时候都是问题很莫名其妙的来、然后又很莫名其妙地消失、、