在 CSS3 開始，div 也可以使用 resize的參數了～
http://www.w3schools.com/cssref/css3_pr_resize.asp
以非常簡單的設定方式，就可以得到一個隨意拖拉變大變小的區域～
BUT...又來了～
雖然CSS3 已經開放這個功能，但是tag上的onresize event 卻還沒搞好Orz...
當然是說只是單純不需要與 js 互動的話是沒問題，但是通常都還是要防呆之類的，抓不到事件觸發就很無言...
網路上有些作法討論，後來我是覺得暴力破解真是～～有點強過頭Orz...
（唯一的缺點就是，效能吃比較重吧，但是看跑起來似乎蠻流暢的就降子吧XD）
來源在
http://stackoverflow.com/questions/8082729/how-to-detect-css3-resize-events
與
http://stackoverflow.com/questions/1397251/event-detect-when-css-property-changed-using-jquery/1397500#1397500
簡單的說，就是只要css(style)的值一變動，就會跳進這個event，管你變長變短，變醜變漂亮，全都逃不掉的窮舉法～
試作的example如下：（有搭配jquery在用）
<style>
#test {
width: 200px;
height: 200px;
border: dotted 1px #888888;
resize: both;
overflow: auto;
}
</style>
<script>
$(function() {
document.getElementById('test').addEventListener('DOMAttrModified', function(e){
if (e.attrName === 'style') {
//console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
divInfo(this);
}
}, false);
});
function divInfo(elem) {
var w = $(elem).outerWidth(true);
var h = $(elem).outerHeight(true);
var x = $(elem).offset().left;
var y = $(elem).offset().top;
var msg = '('+x+','+y+')==>'+w+'*'+h;
$('#info').html(msg);
}
</script>
<body>
<div id="info">test info</div>
<div id="test" >TEST</div>
</body>
沒有留言:
張貼留言