おれせか

なんかそれっぽいのをうにうに。

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

元々、

$(document).pngFix();

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

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

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

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

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

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

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

ソース
(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);
PAGETOP
PAGETOP
PAGETOP

Comments (11)

私は良い、長い時間のためにこのような良い記事を参照していない!

[2013/04/07 (日) 17:52]

それは非常に良い記事と共有するためのおかげです!

[2013/04/09 (火) 16:50]

グッチは決して孤軍奮闘するのではなくて。

香港で発売した重要綿糸供給業者の列。

上海天虹紡織のグッチ激安グループ有限会社。

年もトルコで工場を設立するのを行って。

ヨーロッパのグッチ激安取引先のもっと良いサービスを提供して。

ただこの会社は主に依然としてベトナムでピントを合わせて。
グッチ激安http://www.negucci.com/

そしてすでに2006年から開いて営業します。

[2015/04/07 (火) 18:44]

’sed titles, and shouldn’t be undertaken by those with less than administration

[2015/08/13 (木) 16:33]

trueにしたら元の画像の範囲はそのままにしておく。(こっちがcssのclipのふつーな動作だと思ってもらえれば。)

[2015/09/16 (水) 15:54]

l直書きでネスト作るこ

[2015/10/13 (火) 17:12]

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

[2016/01/06 (水) 18:07]

画面中央にこのボックスが表示されるサンプルで、ポップアップされたウィンドウ内でスクロールができるようにしたいのですが、どうしたらよいものか、と困っております。

[2016/01/07 (木) 11:02]

まぁなんかあるでしょ。

[2016/01/15 (金) 17:46]

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

[2016/06/20 (月) 12:17]

宝のスーパーコピーめでたい(ミュウミュウ)。

[2016/06/27 (月) 18:40]
PAGETOP

Comment Form

PAGETOP

Trackbacks (0)

トラックバックはありません。

PAGETOP

Trackback URL

PAGETOP

Search