ECSHOP中transport.js和jquery冲突的解决方法

在html文件的最后面添加下面的代码即可:

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
window.__Object_toJSONString = Object.prototype.toJSONString;
delete Object.prototype.toJSONString;
});
</script>

代码在文件中的顺序:

先导入transport.js文件

{insert_scripts files="../js/transport.js,../js/region.js"}

然后导入jquery文件

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

再加上这段代码

<script type="text/javascript">
$(function() {
window.__Object_toJSONString = Object.prototype.toJSONString;
delete Object.prototype.toJSONString;
});
</script>

最后引入自己用jquery书写的js文件:

<script type="text/javascript" src="main.js"></script>

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

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 (842)

用于修改图片大小并保持长宽比的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 (556)

js、jQuery修改CSS中expression()的方法

在本博客的博文《在IE6 position不支持fixed属性的解决方案》中使用了CSS的expression来动态改变top的算术值:
/*IE6 动态设置top位置*/
_top: expression(eval(document.documentElement.scrollTop) +  450);
那么一定有人不禁要问,如何动态改变这个top的实际值,也就是修改这个expression的内容呢?方法如下:
var domThis=$(this)[0];
domThis.style.setExpression(
'top', 'eval((document.documentElement).scrollTop + ' +  50 + ')'
);

使用以上方法就可以解决动态修改expression的内容了。