jquery實現的拖動可以調整table單元格大小代碼實例:
本章節介紹一下如果利用jquery實現表格單元格可以通過鼠標拖動調整大小的效果，當然如果讓我們完全寫代碼的話，可能會比較的復雜，不過有現成的插件可以使用，只要簡單的幾個步驟就可以實現我們的要求。
一.引入相關庫文件:
要使用相關插件，那就必須要引入相關的代碼文件，如下:
<script src="/js/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="/js/store.js" type="text/Javascript"></script> <script src="/js/jquery.resizableColumns.js" type="text/javascript"></script>
上面的插件這里就不提供下載了，在網上有很多，自行搜索即可。
二.table表格簡單代碼:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>螞蟻部落</title><style type="text/CSS"> .table{ width:300px; height:100px; border:1px solid #ccc; border-collapse:collapse; } .table td,.table th { border:1px solid #ccc; padding:5px; } </style> </head> <body> <table id="thetable" class="table"> <thead> <tr> <th data-resizable-column-id="a">螞蟻部落一</th> <th data-resizable-column-id="b">螞蟻部落二</th> </tr> </thead> <tr> <td>javascript教程</td> <td>jQuery教程</td> </tr> <tr> <td>HTML教程</td> <td>div css教程</td> </tr> </table> </body> </html>
以上代碼就是我們想要拖動的表格代碼。
三.如何使用:
$(function(){ $("#thetable").resizableColumns({ store: window.store }); })
使用如上代碼就可以實現拖動效果了。
實現此效果非常的簡單，只要按部就班的按照上面的方式即可。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14056
新聞熱點
疑難解答
