<!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资源评论
熟悉的新风景
- 粉丝: 1865
- 资源: 29
最新资源
- 使用NetBeans连接SQLserver2008数据库教程中文WORD版最新版本
- XPath实例中文WORD版最新版本
- XPath语法规则中文WORD版最新版本
- XPath入门教程中文WORD版最新版本
- ORACLE数据库管理系统体系结构中文WORD版最新版本
- Sybase数据库安装以及新建数据库中文WORD版最新版本
- tomcat6.0配置oracle数据库连接池中文WORD版最新版本
- hibernate连接oracle数据库中文WORD版最新版本
- MyEclipse连接MySQL的方法中文WORD版最新版本
- MyEclipse中配置Hibernate连接Oracle中文WORD版最新版本
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
