jQuery滑塊顏色選擇器
[英]jquery slider color picker
問題描述
var canvas2D = { canvas : undefined, canvasContext : undefined, x : undefined, y : undefined, w : undefined, h : undefined, color : undefined, red : 50, green : 50, blue : 50 }; canvas2D.start = function() { canvas2D.canvas = document.getElementById("canvas"); canvas2D.canvasContext = canvas2D.canvas.getContext("2d"); canvas2D.w = 100; canvas2D.h = 50; canvas2D.x = canvas2D.canvas.width/2; canvas2D.y = canvas2D.canvas.height/2; canvas2D.color = "rgb(" + canvas2D.red + ", " + canvas2D.green + ", " + canvas2D.blue+ ")"; canvas2D.draw(); }; canvas2D.draw = function() { canvas2D.canvasContext.fillStyle = canvas2D.color; canvas2D.canvasContext.fillRect(canvas2D.x - canvas2D.w/2,canvas2D.y - canvas2D.h/2,canvas2D.w,canvas2D.h); }; canvas2D.setRed = function(n) { canvas2D.red = n.value; canvas2D.start(); }; canvas2D.setGreen = function(n) { canvas2D.green = n.value; canvas2D.start(); }; canvas2D.setBlue = function(n) { canvas2D.blue = n.value; canvas2D.start(); };
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Color Picker</title> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <canvas width="800" height="600" id="canvas"></canvas><br> <script>canvas2D.start();</script> Red: <input type="range" id="red" value="50" min="0" max="255" data-show-value="true" oninput="canvas2D.setRed(this);"><br> Green: <input type="range" id="green" value="50" min="0" max="255" oninput="canvas2D.setGreen(this);"><br> Blue: <input type="range" id="blue" value="50" min="0" max="255" oninput="canvas2D.setBlue(this);"> </body> </html>
因此，我編寫了一個顏色選擇器程序來更改矩形的顏色。 任何人都可以向我展示如何使用jQuery Mobile中的滑塊更改矩形的RGB值？ 我一點都不了解jQuery。 任何人都可以給我看一個教程或示例嗎？ 謝謝！
1 個解決方案
解決方案1
0 2017-05-02 17:53:42
您應該創建JQM頁面的結構並在頁面創建期間初始化滑塊：
$(document).on("pagecreate", "#page-one", function() { $("#red").on("change", function() { canvas2D.setRed($(this).val()); }); $("#green").on("change", function() { canvas2D.setGreen($(this).val()); }); $("#blue").on("change", function() { canvas2D.setBlue($(this).val()); }); canvas2D.start(); }); /* Your code below */ canvas2D = {}; canvas2D.start = function() { canvas2D.canvas = document.getElementById("canvas"); canvas2D.canvasContext = canvas2D.canvas.getContext("2d"); canvas2D.w = 100; canvas2D.h = 50; canvas2D.x = canvas2D.canvas.width / 2; canvas2D.y = canvas2D.canvas.height / 2; canvas2D.red = $("#red").val(); canvas2D.green = $("#green").val(); canvas2D.blue = $("#blue").val(); canvas2D.draw(); }; canvas2D.draw = function() { canvas2D.color = "rgb(" + canvas2D.red + ", " + canvas2D.green + ", " + canvas2D.blue + ")"; canvas2D.canvasContext.fillStyle = canvas2D.color; canvas2D.canvasContext.fillRect(canvas2D.x - canvas2D.w / 2, canvas2D.y - canvas2D.h / 2, canvas2D.w, canvas2D.h); }; canvas2D.setRed = function(n) { canvas2D.red = n; canvas2D.draw(); }; canvas2D.setGreen = function(n) { canvas2D.green = n; canvas2D.draw(); }; canvas2D.setBlue = function(n) { canvas2D.blue = n; canvas2D.draw(); };
.ui-slider input { display: none !important; } .ui-slider .ui-slider-track { margin-left: 20px !important; } .ui-slider #red ~ .ui-bar-inherit { background: -moz-linear-gradient(left, #ff0000 0%, #ffffff 100%); background: -webkit-linear-gradient(left, #ff0000 0%, #ffffff 100%); background: linear-gradient(to right, #ff0000 0%, #ffffff 100%); } .ui-slider #green ~ .ui-bar-inherit { background: -moz-linear-gradient(left, #00ff00 0%, #ffffff 100%); background: -webkit-linear-gradient(left, #00ff00 0%, #ffffff 100%); background: linear-gradient(to right, #00ff00 0%, #ffffff 100%); } .ui-slider #blue ~ .ui-bar-inherit { background: -moz-linear-gradient(left, #0000ff 0%, #ffffff 100%); background: -webkit-linear-gradient(left, #0000ff 0%, #ffffff 100%); background: linear-gradient(to right, #0000ff 0%, #ffffff 100%); }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> <title>Color Picker</title> </head> <body> <div data-role="page" id="page-one"> <div data-role="main" class="ui-content"> <div class="ui-grid-a"> <div class="ui-block-a"> <canvas width="100" height="180" id="canvas"></canvas> </div> <div class="ui-block-b"> <input type="range" id="red" value="127" min="0" max="255" data-show-value="true"> <br> <input type="range" id="green" value="127" min="0" max="255" data-show-value="true"> <br> <input type="range" id="blue" value="127" min="0" max="255" data-show-value="true"> </div> </div> </div> </div> </body> </html>
剩下的只是您如何為頁面設置樣式的問題。 祝好運！
將顏色選擇器（jQuery UI滑塊）連接到Sketch.js
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.