Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
[JavaScript] テーブルのセルとかに斜めの線(打ち消し線?)をひくjQueryプラグインです。CSSのtransformが使えるブラウザのみ。
/*
$('table thead th').diagonaline({
color:'#666',//線の色
leftTop:true//線を左上から右下にひく場合はtrue、逆はfalse
});
*/
(function($){
// CSS3 Transformに対応しているかどうか
var ds = document.createElement("div").style,
notSupport=(
!('transform' in ds)
&& !('webkitTransform' in ds)
&& !('mozTransform' in ds)
&& !('oTransform' in ds)
&& !('msTransform' in ds)
);
$.fn.diagonaline = function (conf) {
if(notSupport){
return false;
}
var c = $.extend({
color:'#666',
leftTop:true
},conf),
color = c.color,
base = (c.leftTop ? '' : '-');
return this.each(function(){
var cell = $(this);
if(cell.is(':empty')){
cell.html(' ');
}
var pt = Number(cell.css('paddingTop').replace('px','')),
pl = Number(cell.css('paddingLeft').replace('px','')),
cw = cell.outerWidth(),
ch = cell.outerHeight(),
nh = Math.sqrt(cw*cw + ch*ch),
nr = Math.atan2(ch,cw),
ns = (nr*360/(2*Math.PI)),
nhm = (nh/2),
op = Math.sin(nr)*nhm,
ad = Math.sqrt((nhm*nhm) - (op*op)),
html = '<s style="';
html += 'height:1px;';
html += 'display:block;';
html += 'position:absolute;';
html += 'background:'+color+';';
html += 'width:'+nh+'px;';
html += '-webkit-transform:rotate('+base+ns+'deg);';
html += '-moz-transform:rotate('+base+ns+'deg);';
html += '-ms-transform:rotate('+base+ns+'deg);';
html += '-o-transform:rotate('+base+ns+'deg);';
html += 'transform:rotate('+base+ns+'deg);';
html += '-sand-transform:rotate('+base+ns+'deg);';
html += 'margin-top:-'+(pt==0 ? Math.floor(op/2) : op-pt)+'px;';
html += 'margin-left:-'+(pt==0 ? Math.floor((nhm-ad)/2) : nhm-ad+pl)+'px;';
html += '"></s>';
cell.append(html);
});
};
})(window.jQuery);
(function(c){var b=document.createElement("div").style,a=(!("transform" in b)&&!("webkitTransform" in b)&&!("mozTransform" in b)&&!("oTransform" in b)&&!("msTransform" in b));c.fn.diagonaline=function(e){if(a){return false}var g=c.extend({color:"#666",leftTop:true},e),d=g.color,f=(g.leftTop?"":"-");return this.each(function(){var p=c(this);if(p.is(":empty")){p.html("&nbsp;")}var s=Number(p.css("paddingTop").replace("px","")),j=Number(p.css("paddingLeft").replace("px","")),k=p.outerWidth(),h=p.outerHeight(),i=Math.sqrt(k*k+h*h),o=Math.atan2(h,k),n=(o*360/(2*Math.PI)),r=(i/2),m=Math.sin(o)*r,q=Math.sqrt((r*r)-(m*m)),l='<s style="';l+="height:1px;";l+="display:block;";l+="position:absolute;";l+="background:"+d+";";l+="width:"+i+"px;";l+="-webkit-transform:rotate("+f+n+"deg);";l+="-moz-transform:rotate("+f+n+"deg);";l+="-ms-transform:rotate("+f+n+"deg);";l+="-o-transform:rotate("+f+n+"deg);";l+="transform:rotate("+f+n+"deg);";l+="-sand-transform:rotate("+f+n+"deg);";l+="margin-top:-"+(s==0?Math.floor(m/2):m-s)+"px;";l+="margin-left:-"+(s==0?Math.floor((r-q)/2):r-q+j)+"px;";l+='"></s>';p.append(l)})}})(window.jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.