我的jQuery插件是否与IE8完全不兼容?

时间:2012-06-15 13:10:44

标签: jquery plugins internet-explorer-8 compatibility

所以我正在使用jQuery插件的模板,不幸的是它在IE8和IE兼容模式下无效。

我不确定我写作的方式是否兼容,或者我是否只是缺少某些内容?

HTML:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>SuperHero Demo</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/SuperSelect.js"></script>
</head>

<body>

<div class="test" style="border:1px solid #000;">
<p>Hello World!</p>
</div>
<div>
<p>Sup World</p>
</div>

<script>
$('.test').superHero({

});
</script>
</body>
</html>

SCRIPT:

// Utility
if ( typeof Object.create !== 'function' ) {
    Object.create = function( obj ) {
        function F(){};
        F.prototype = obj;
        return new F();
    };
}

(function( $, window, document, undefined ) {

    var Super = {
        init: function( options, elem ) {
            var self = this;

            self.elem = elem;
            self.$elem = $( elem );

            if ( typeof options === 'string' ) {
                self.duration = options;
            } else {
                // object was passed
                self.duration = options.duration;
            }                       

            self.options = $.extend({}, $.fn.superHero.options, options );

            self.replaceSelect();

        },

        replaceSelect: function( duration ) {
            var self = this;
            $('.test').hide();
            $('.test').after('<select><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option></select>');

        },


    };

    $.fn.superHero = function( options ){
        return this.each(function() {
            var hero = Object.create( Super );

            hero.init( options, this );

            $.data( this, 'superHero', hero);

        });

    };

    $.fn.superHero.options = {
        duration:           5000,   //Milliseconds that each slide remains on screen. Default is 5 seconds.
        transition:         'fade', //How will the slides trascend?
    };

})( jQuery, window, document );

http://jsfiddle.net/userdude/QWhPL/1/

1 个答案:

答案 0 :(得分:3)

看起来在设置选项时,转换属性后面有一个尾随逗号。 IE8不喜欢尾随逗号,将其更新为:

$.fn.superHero.options = {
        duration:           5000,   //Milliseconds that each slide remains on screen. Default is 5 seconds.
        transition:         'fade' //How will the slides trascend?
    };

......它应该有用。

在需要删除的replaceSelect:function声明之后,还有一个尾随逗号:

replaceSelect: function( duration ) {
            var self = this;
            $('.test').hide();
            $('.test').after('<select><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option></select>');

        }