<!DOCTYPE html>
<html>
<head>
<meta charset=\”UTF-8\”>
<title>
jquery-resizable – 表格列调整_脚本之家
</title>
<style>
html, body { height: 100%; font-family: \’Trebuchet MS\’, \’Lucida Sans Unicode\’,
\’Lucida Grande\’, \’Lucida Sans\’, Arial, sans-serif; padding: 0; margin:
0; } .page-container { margin: 20px; } table { border-collapse: collapse;
width: 600px; } td, th { padding: 8px; border: 1px solid silver; } th {
color: white; background: #535353; } pre { margin: 20px; padding: 10px;
background: #eee; border: 1px solid silver; border-radius: 4px; } /* this
is important! make sure you define this here or in jQuery codef */ .resizer
{ position: absolute; top: 0; right: -8px; bottom: 0; left: auto; width:
16px; cursor: col-resize; }
</style>
</head>
<body>
<div class=\”page-container\”>
<h1>
jquery-resizable – 表格列调整
</h1>
<table>
<thead>
<th>
col 1
</th>
<th>
col 2
</th>
<th>
col 3
</th>
<th>
col 4
</th>
</thead>
<tbody>
<tr>
<td>
Column 1
</td>
<td>
Column 2
</td>
<td>
Column 3
</td>
<td>
Column 4
</td>
</tr>
<tr>
<td>
Column 1
</td>
<td>
Column 2
</td>
<td>
Column 3
</td>
<td>
Column 4
</td>
</tr>
</tbody>
</table>
</div>
<script src=\’jquery-3.2.1.min.js\’>
</script>
<script src=\’jquery-resizable.js\’>
</script>
<script>
//$(\”td,th\”)
$(\”td:first-child,td:nth-child(2),td:nth-child(3),th:first-child,th:nth-child(2),th:nth-child(3)\”).
css({
/* 需要包含 resizer */
position: \”relative\”
})
/* 检查 .resizer CSS */
.
prepend(\”<div class=\’resizer\’></div>\”).
resizable({
resizeHeight: false,
// 通过 .resizer 元素，使用列作为句柄和筛选器
handleSelector: \”\”,
onDragStart: function(e, $el, opt) {
// 只拖拽 resizer
if (!$(e.target).hasClass(\”resizer\”))
return false;
return true;
}
});
</script>
</body>
</html>
|
查看详情
