微件:GridTable:修订间差异
来自植物大战僵尸杂交版Wiki
更多操作
创建页面,内容为“<includeonly> <style> .grid-input-area { margin: 10px 0; padding: 12px; background: #f5f5f5; border-radius: 8px; } .grid-input-area textarea { width: 100%; height: 150px; padding: 8px; border: 1px solid #ccc; border-radius: 6px; font-family: monospace; font-size: 13px; resize: vertical; box-sizing: border-box; } .grid-input-area button { margin-top: 8px; padding: 8px 20px; background: #4CAF50;…” |
无编辑摘要 |
||
| 第29行: | 第29行: | ||
} | } | ||
.grid-input-area button:hover { background: #45a049; } | .grid-input-area button:hover { background: #45a049; } | ||
.grid-input-area label { font-size: 13px; color: #888; margin-right: 6px; } | |||
.grid-input-area input[type=number] { | |||
width: 50px; padding: 4px; border: 1px solid #ccc; border-radius: 4px; text-align: center; | |||
} | |||
.grid-input-area input[type=color] { | |||
width: 40px; height: 30px; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; vertical-align: middle; | |||
} | |||
.grid-preview { | .grid-preview { | ||
margin-top: 10px; | margin-top: 10px; | ||
| 第36行: | 第43行: | ||
<div class="grid-input-area"> | <div class="grid-input-area"> | ||
<p style="font-size:13px;color:#888;">每行格式:<b>植物名,列,行</b> | <p style="font-size:13px;color:#888;">每行格式:<b>植物名,列,行</b>(逗号分隔,一行一个)</p> | ||
<textarea id="grid-data" placeholder="豌豆向日葵,1,1 豌豆射手,2,1 向日葵,6,3 坚果墙,7,5"></textarea> | <textarea id="grid-data" placeholder="豌豆向日葵,1,1 豌豆射手,2,1 向日葵,6,3 坚果墙,7,5"></textarea> | ||
<br> | <br> | ||
<label>列数:<input type="number" id="grid-cols" value="9" min="1" max="20 | <label>列数:<input type="number" id="grid-cols" value="9" min="1" max="20"></label> | ||
<label>行数:<input type="number" id="grid-rows" value="5" min="1" max="15" | <label>行数:<input type="number" id="grid-rows" value="5" min="1" max="15"></label> | ||
<label>背景色:<input type="color" id="grid-bg" value="#2d2d2d"></label> | |||
<label>格子色:<input type="color" id="grid-cell" value="#3a3a3a"></label> | |||
<label>边框色:<input type="color" id="grid-border" value="#555555"></label> | |||
<button id="grid-generate">生成表格</button> | <button id="grid-generate">生成表格</button> | ||
<button id="grid-copy" style="background:#888;">复制代码</button> | <button id="grid-copy" style="background:#888;">复制代码</button> | ||
| 第53行: | 第63行: | ||
var cols = parseInt($('#grid-cols').val()) || 9; | var cols = parseInt($('#grid-cols').val()) || 9; | ||
var rows = parseInt($('#grid-rows').val()) || 5; | var rows = parseInt($('#grid-rows').val()) || 5; | ||
var bg = $('#grid-bg').val() || '#2d2d2d'; | |||
var cell = $('#grid-cell').val() || '#3a3a3a'; | |||
var border = $('#grid-border').val() || '#555555'; | |||
var lines = raw.split('\n'); | var lines = raw.split('\n'); | ||
var data = {}; | var data = {}; | ||
| 第63行: | 第76行: | ||
var row = parseInt(parts[2].trim()); | var row = parseInt(parts[2].trim()); | ||
if (name && col >= 1 && row >= 1) { | if (name && col >= 1 && row >= 1) { | ||
data[row + '-' + col] = name; | |||
} | } | ||
} | } | ||
}); | }); | ||
var table = '{| style="width:100%;max-width:900px;table-layout:fixed;text-align:center;background: | var table = '{| style="width:100%;max-width:900px;table-layout:fixed;text-align:center;background:' + bg + ';border-collapse:collapse;"\n'; | ||
table += '|-\n! !!'; | table += '|-\n! !!'; | ||
for (var c = 1; c <= cols; c++) table += ' 列' + c + ' !!'; | for (var c = 1; c <= cols; c++) table += ' 列' + c + ' !!'; | ||
| 第77行: | 第89行: | ||
table += '|-\n! 行' + r + '\n'; | table += '|-\n! 行' + r + '\n'; | ||
for (var c = 1; c <= cols; c++) { | for (var c = 1; c <= cols; c++) { | ||
var | var plant = data[r + '-' + c]; | ||
if (plant) { | if (plant) { | ||
table += '| style="height:80px;border:2px solid | table += '| style="height:80px;border:2px solid ' + border + ';background:' + cell + ';" | [[' + plant + '|50px|link=' + plant + ']]\n'; | ||
} else { | } else { | ||
table += '| style="height:80px;border:2px solid | table += '| style="height:80px;border:2px solid ' + border + ';background:' + cell + ';" | \n'; | ||
} | } | ||
} | } | ||
| 第103行: | 第114行: | ||
}); | }); | ||
generate(); | generate(); | ||
})(); | })(); | ||
</script> | </script> | ||
</includeonly> | </includeonly> | ||