thまたはtdに斜線を引いてみる(リキッド対応)

jQuery_img

「テーブルのセルあるじゃない。」
「うん。」
「ここにさ。斜線引きたいんだよ。」
「…なるほどね。」
「excelでできるんだからできるよね!」
「…(沈黙)…うん!excelでできるんだからね!AHAHAHA!」


そんなわけでの安請け合い!!
最初は疑似要素使った吹き出しと同じ要領でできるじゃーん?と思ったけど、
まぁリキッドには当然対応しませんよねー…

▼参考ブログ「小粋空間」| CSS で table に斜線を引く方法

 thまたはtdに斜線を引いてみる(リキッド対応)


(…しかも2009年の記事だし!)

うーん。
しかも疑似要素ってjQueryでいじれたっけ?
それならspanをappendしてどうこうもにゃもにゃすればいいんじゃないかのう…。やってみるかのう。


やってみた


テストなんでまずはdivでトライしてみよう。
<div id="test"></div>

div{
width:100px;
height:100px;
border:1px solid #ccc;
margin:0 0 5px;
position:relative;/*これないとダメ*/
}
div span{
position:absolute;/*これもないとダメ*/
top:0;
left:0;
width:0;
height:0;
}

で肝心のjQueryだけど。せっかくなのでプラグイン化。
オプション設定中途半端に色だけ…。

$(function(){
    $.fn.brdrSlash = function(options){
    options = $.extend({
    color : '#ccc'
    },options);
    this.each(function(){
        var width = $(this).width();//斜線引くオブジェクトの幅を取る
        var height = $(this).height();//同じく高さも取る
        var span = $('<span class="brdrslash"></span>');
        span.css({//この場合は右上がりの斜線
        'border-right-width':width,
        'border-right-color':options.color,
        'border-right-style':'solid',
        'border-top-width':height,
        'border-top-color':'#fff',//ここもオプションで設定できてもいいかもな
        'border-top-style':'solid',
        'border-left':'none'
        })
    .appendTo(this);
    });
    return this;
};
//実行する
$('#test').brdrSlash();
});

これで一応できました。(スクショはあとで追加しよう)
でもまだtableでテストしてない。

あとあれだ、オプションで右下がりの斜線もできるとか、あった方がいいよなー。
しかもこれあれじゃね、これリキッドっていいながらドキュメントロード時だけじゃん動くの…。



【追記】リキッド&table対応に直しました

そんなわけで、テストを経て実際にtableの中で動くように変えていきましょう。
spanを突っ込んでそこを伸ばしたり縮めたりして表示させるのは一緒ですが、
tableはblock要素じゃないのでspanの外側にさらにdivを突っ込んでます。

最終的に下記で斜線が引けました。

html

<table width="200" border="1">
<tr>
<td>もにょ</td>
<td class="empty"></td><!--このセルに斜線がつきます-->
</tr>
<tr>
<td>ぷにょ</td>
<td>ぽにょ</td>
</tr>
</table>


css

td.empty{padding:0;}
div.brdrslash{ position:relative; margin:0; padding:0;}
div.brdrslash span{ position:absolute; top:0; left:0; width:0; height:0;}

で、ファンクションの実行はload時とresize時に同時にするように実行してやりましょう。

javascript

//function側
$(function(){
$.fn.brdrSlash = function(options){
options = $.extend({
color : '#ccc'
},options);
if($(this).find('.brdrslash').length == 0){
this.each(function(){
var width = $(this).innerWidth();
var height = $(this).innerHeight();
var span = $('<div class="brdrslash"><span></span></div>');
span.css({
'border-right-width':width,
'border-right-color':options.color,
'border-right-style':'solid',
'border-top-width':height,
'border-top-color':'#fff',
'border-top-style':'solid',
'border-left':'none'
})
.appendTo(this);
});
return this;
}else{
this.each(function(){
var width = $(this).innerWidth();
var height = $(this).innerHeight();
$(this).find('.brdrslash').css({
'border-right-width':width,
'border-top-width':height
});
});
return this;
}
};
});
//実行側
$(window).bind("load resize", function(){ // ドキュメントload時とリサイズ時にそれぞれ実行
    $('td.empty').brdrSlash();
});

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>