[js] IE pngfix

2009/07/17 (金) 02:06

Tags: IE, javascript, jQuery, plugin

Deprecated: Function split() is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-content/plugins/modPukiWiki/lib/func.php on line 75

Deprecated: Function ereg() is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-content/plugins/modPukiWiki/plugin/ref.inc.php on line 207

Deprecated: Assigning the return value of new by reference is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-content/plugins/modPukiWiki/plugin/region.inc.php on line 14

jQueryのpngFixを仕事で使ってて、どうも気に入らない点が多くてごにょごにょしてたら、中身がだいぶ原型をとどめてないかんじになったので、一応ここに載っけとく。

元々、

$(document).pngFix();

て書くだけでイチコロだよ！的なお手軽さをプッシュされてんだけど、

$('#hoge').pngFix();
$('#fuga').pngFix();

とか必要なとこだけに指定でもちゃんと動いてほしいじゃないすか。

いやね、元のでも一部指定で動くっちゃ動くんだけど色々気に入らなかたんですよ。

指定した要素自体には適用されない（指定要素の子孫のpngだけ探してる）とか、元々positionを相対/絶対指定している場合が考慮されてないだとか、まだロードされてない画像の場合に幅と高さのこと考えてないだとか、blank画像指定がinputのためだけだとかね。

てゆーか、なによりそもそもメソッドチェーンできないし。
びっくりしたわ、まじで。

てなわけで、もにょもにょしたのが以下。
説明とくになし。以前の通りdocumentまるっとも出来るし、細かく指定でもわりとちゃんと動くと思う。
＃あくまで自分が必要なふうにいじっただけだから、細かくテストしたりしてないから変なとこもあるかも！

jquerypngfix.js

ソース

(function($) {
$.fn.pngFix = function(settings) {
    if(!$.browser.msie || $.browser.version - 0 >= 7) return this;
    
    // Settings
    settings = $.extend({
          blankImg: ''
        , bgFix:     true
        , notFind:     false
    }, settings);
    
    var $this = this;
    
    var target_filter = function(filter){
        return settings.notFind ? $this.filter(filter) : $this.find(filter).add($this.filter(filter));
    };
    
    
    //img
    target_filter('img[src$=.png]').each(function(){
        
        var $png = $(this);
        var src = this.src;
        
        //blankImg
        if(settings.blankImg){
            this.src = settings.blankImg;
            this.runtimeStyle.filter = ["progid:DXImageTransform.Microsoft.AlphaImageLoader(src='", src, "',sizingMethod='scale')"].join('');
            
        //span
        }else{
            var span_attr = {
                  id:         this.id
                , 'class':     this.className
                , title:     this.title
                , alt:         $png.attr('alt')
                , align:     $png.attr('align')
            };
            
            
            var span_css = {
                  display:         'inline-block'
                //, 'white-space': 'pre-line'
                , background:     'transparent'
                , position:     'relative'
                , margin:         this.style.margin
                , padding:         this.style.padding
                , border:         this.style.border
            };
            if($png.parents('a').length) span_css['cursor'] = 'pointer';
            
            var png_pos = $png.css("position");
            if(png_pos == "absolute" || png_pos == "relative"){
                span_css['position'] = png_pos;
                span_css['top'] = $png.css("top");
                span_css['left'] = $png.css("left");
                span_css['bottom'] = $png.css("bottom");
                span_css['right'] = $png.css("right");
                span_css['z-index'] = $png.css("z-index");
            }
            
            //width & height
            var png_width = this.width ;
            var png_height = this.height;
            if(!png_width || !png_height){
                var $png_clone = $png.clone();
                var png_clone = $png_clone.get(0);
                $png_clone.appendTo($('body')).show();
                png_width = png_clone.width;
                png_height = png_clone.height;
                $png_clone.remove();
            }
            span_css['width'] = png_width;
            span_css['height'] = png_height;
            
            
            //create span
            var $span = $('<span></span>');
            var span = $span.get(0);
            //span.cssText = this.style.cssText;
            $.each(span_attr, function(i, v){
                if(v) span[i] = v;
            });
            span.runtimeStyle.filter = ["progid:DXImageTransform.Microsoft.AlphaImageLoader(src='", src, "',sizingMethod='scale')"].join('');
            $span.css(span_css);
            
            
            $png.hide().after($span);
        }
    });
    
    
    //input
    if(settings.blankImg){
        target_filter('input[src$=.png]').each(function(){
            var src = this.src;
            this.runtimeStyle.filter = ["progid:DXImageTransform.Microsoft.AlphaImageLoader(src='", src, "',sizingMethod='scale')"].join('');
            this.src = settings.blankImg;
        });
    }
    
    
    //background
    if(settings.bgFix){
        this.find('*').andSelf().each(function(){
            var $all = $(this);
            var bgIMG = $all.css('background-image');
            if(bgIMG.indexOf(".png") != -1){
                var iebg = bgIMG.split('url("')[1].split('")')[0];
                $all.css('background-image', 'none');
                this.runtimeStyle.filter = ["progid:DXImageTransform.Microsoft.AlphaImageLoader(src='", iebg, "',sizingMethod='scale')"].join('');
            }
        });
    }
    
    
    return this;
};
})(jQuery);

Comments (11) | Trackbacks (0)