【免费】jquery插件colResizable实现表格列可拖拽伸缩表格大小资源-CSDN文库

共31个文件

png：14个

html：7个

css：5个

需积分: 0 196 浏览量 2023-03-14 14:49:44 上传评论收藏 141KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jq22colResizable.zip （31个子文件）

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 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

jquery.js 89KB

img

th.png 1002B

loading.gif 1KB

dotted.png 3KB

grip.png 5KB

css

main.css 965B

<!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>

评论收藏

内容反馈