1 (function($){
2 $.triggerDropTableThead=function(obj){
3 var ths=$(obj).find("th");
4 ths.unbind("ondrop");
5 ths.bind("ondrop",function(){
6 var isDragging = false,
7 min_width=50;
8 var _this=$(this)
9 .mousedown(function() {
10 isDragging=true;
11 $(window).unbind("mouseup").unbind("mousemove");
12 $(window).mouseup(function() {
13 isDragging = false;
14 $(window).unbind("mouseup").unbind("mousemove");
15 //_this.unbind("mousemove");
16 })
17 .mousemove(function(e) {
18 if(isDragging){
19 //var x = e.pageX - this.offsetLeft;
20 //var y = e.pageY - this.offsetTop;
21 var x=e.pageX-_this.offset().left;
22 if(x>=min_width){
23 _this.width(x);
24 //console.log(x,"mousemove");
25 }
26 }
27 });
28 });
29
30 });
31 ths.trigger("ondrop");
32 }
33 $.dropTableThead=function(obj){
34 $.triggerDropTableThead(obj);
35 }
36 })($);
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
body,ul,ul,li,ol{
paddin:0;
margin:0;
}
table{
height:100%;
table-layout:fixed;
width:70%;
}
table th{
font-size:12px;
}
table td{
font-size:10px;
}
#left,#right{
display:block;
float:left;
height:100%;
}
#left{
width:70%;
}
#view th,#view td{
background:#ccc;
border: solid green 1px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
#view th:hover{
cursor:w-resize;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/dropTableThead.js"></script>
<script type="text/javascript">
//view 处理
window.onload=function(){
for(var i =0;i<100;i++){
do_something();
}
$.dropTableThead("#view thead");
}
function do_something(msg){
var o={
url:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
};
var html='<tr><td>{url}</td><td>{mehod}</td><td>{status}</td><td>{mimeType}</td><td>{bodySize}</td><td>{time}</td></tr>';
html=html.replace(/\{(\w+)\}/gm,function(a,b){
if(o[b]!=null)
return o[b];
return b;
});
$('#view tbody').append(html);
}
</script>
</head>
<body>
<body>
<div id="left">
<table id="view">
<thead><tr>
<th width="280">url</th>
<th width="80">mehod</th>
<th width="70">status</th>
<th width="130">type</th>
<th width="80">size</th>
<th width="100">time</th>
</tr></thead>
<tbody></tbody>
</table>
</div>
<div id="right">
right
</div>
</body>
</body>
</html>
