<!DOCTYPE html>
<html lang="en">
<head>
<title>colResizable demo</title>
<link rel="stylesheet" type="text/css" href="postback.Demo/css/main.css" />
<style>
.scroll{
overflow-x:scroll;
max-width:100%;
position:relative;
}
</style>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="colResizable-1.6.js"></script>
<script type="text/javascript">
$(function(){
var innerHTML = $("#updatePanel").html();
var onTablesCreated = function(){
$("#normal").colResizable({
liveDrag:true,
gripInnerHtml:"<div class='grip'></div>",
draggingClass:"dragging",
resizeMode:'fit',
postbackSafe:true,
partialRefresh:true});
$("#flex").colResizable({
liveDrag:true,
gripInnerHtml:"<div class='grip'></div>",
draggingClass:"dragging",
resizeMode:'flex',
postbackSafe:true,
partialRefresh:true});
$("#overflow").colResizable({
liveDrag:true,
gripInnerHtml:"<div class='grip'></div>",
draggingClass:"dragging",
resizeMode:'overflow',
postbackSafe:true,
partialRefresh:true});
}
var fakePostback = function(){
$("#updatePanel").html('<img src="img/loading.gif"/>');
setTimeout(function(){
$("#updatePanel").html(innerHTML);
onPostbackOver();
}, 700);
};
var onPostbackOver = function(){
onTablesCreated();
};
$("#postback").click(fakePostback);
onPostbackOver();
});
</script>
</head>
<body>
<div class="center" >
<h3>Click on 'Partial refresh' to simulate a postback</h3>
<button id="postback">Partial refresh</button >
<div id="updatePanel">
<br/>
<p><strong>resizeMode: 'fit'</strong> table width adapts to the container width. Columns resize using their neighbour's width</p>
<table id="normal" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<th>header</th><th>header</th><th>header</th>
</tr>
<tr>
<td class="left">cell</td><td>cell</td><td class="right">cell</td>
</tr>
<tr>
<td class="left">cell</td><td>cell</td><td class="right">cell</td>
</tr>
<tr>
<td class="left bottom">cell</td><td class="bottom">cell</td><td class="bottom right">cell</td>
</tr>
</table>
<p><strong>resizeMode: 'flex'</strong> columns are sized independently unless there is not enought space in the container</p>
<table id="flex" width="50%" border="0" cellpadding="0" cellspacing="0">
<tr>
<th>header</th><th>header</th><th>header</th>
</tr>
<tr>
<td class="left">cell</td><td>cell</td><td class="right">cell</td>
</tr>
<tr>
<td class="left">cell</td><td>cell</td><td class="right">cell</td>
</tr>
<tr>
<td class="left bottom">cell</td><td class="bottom">cell</td><td class="bottom right">cell</td>
</tr>
</table>
<p><strong>resizeMode: 'overflow'</strong> columns are sized independently. Table width can exceed its container </p>
<div class="scroll">
<table id="overflow" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<th>header</th><th>header</th><th>header</th>
</tr>
<tr>
<td class="left">cell</td><td>cell</td><td class="right">cell</td>
</tr>
<tr>
<td class="left">cell</td><td>cell</td><td class="right">cell</td>
</tr>
<tr>
<td class="left bottom">cell</td><td class="bottom">cell</td><td class="bottom right">cell</td>
</tr>
</table>
</div>
<br/>
</div>
<br/>
<br/><br/>
</div>
</body>
</html>
colResizable.zip （32个子文件） 
colResizable 
jquery-1.12.2.min.js 95KB colResizable-1.6.min.js 6KB dynamicContent.Demo img 
th.png 5KB dotted.png 3KB grip.png 5KB css main.css 1KB
dynamic.html 3KB 简单实例.html 2KB colResizable.Demo img th.png 5KB dotted.png 3KB grip.png 5KB css main.css 1KB demo.html 2KB demo copy.html 4KB colResizable-1.6.js 22KB rangeSlider.Demo2 img rangeBar.png 3KB slider.png 3KB range.png 4KB css main.css 1KB range2.html 1KB rangeSlider.Demo img rangeBar.png 3KB slider.png 3KB css main.css 687B range.html 1KB index.html 5KB postback.Demo postback.html 5KB js jquery.js 89KB img th.png 1002B
loading.gif 1KB dotted.png 3KB grip.png 5KB css main.css 965B资源评论
熟悉的新风景
- 粉丝: 1863
- 资源: 29
