Widget:PixelBoard

选择颜色

<input class="selector" type="color" value="#000000">

<script> class PixelBoard { board = [] colors = ["#000000"] active = 0

constructor($dom, w, h) { this.dom = $dom $dom.data("PB", this) if (w && h) { for (let i = 0; i < h; i++) { let line = [] line.length = w line.fill("#ffffff") this.board.push(line) } } }

setBoard(board) { this.board = board this.createBoard() return this }

createBoard() { let $canvas = this.dom.find(".canvas").empty() this.board.forEach(line => {

let $tr = $("") line.forEach(c => { let $td = $("")

$td.css("backgroundColor", c) $tr.append($td) }) $canvas.append($tr) }) return this }

createSavedColor() { let $saved = this.dom.find(".saved").empty()

let $tr = $("") this.colors.forEach((c, i) => { let $td = $("")

$td.css("backgroundColor", c) if (i === this.active) { $td.addClass("active") } $tr.append($td) })

let $td = $("")

$td.css("backgroundColor", "#ffffff") $tr.append($td) if (this.active === this.colors.length) { $td.addClass("active") } $saved.append($tr) return this } }

$(document).on("input", ".PixelBoard .selector", function () { let PB = $(this).closest(".PixelBoard").data("PB") PB.colors[PB.active] = $(this).val() PB.createSavedColor() })

$(document).on("click", ".PixelBoard .saved td", function () { let PB = $(this).closest(".PixelBoard").data("PB") PB.active = $(this).index() $(this).addClass("active").siblings().removeClass("active") $(this).closest(".PixelBoard").find(".selector").val(PB.colors[PB.active] || "#ffffff") })

$(document).on("click", ".PixelBoard .canvas td", function () { let PB = $(this).closest(".PixelBoard").data("PB") $(this).css("backgroundColor", PB.colors[PB.active] || "#ffffff") }) </script> <style> .PixelBoard td { width: 1.5em; height: 1.5em; border: 1px solid #cccccc; }

.PixelBoard .saved td.active { border: 3px solid red; } </style> <script> (window.RLQ = window.RLQ || []).push([["jquery"], function () { $(() => { new PixelBoard($("#PixelBoard"), 30, 15).createBoard().createSavedColor() }) }]) </script>