※Onsen UI + AngularJSを使用。
アプリにカラーピッカーのような機能を実現したいと思っていたところ、
Ionic Color Picker – Ionic Marketplace
というページを見つけ、早速それっぽい機能を実現してみた。
新規プロジェクトから「Onsen UI V2 Angular 1 Minimum」を作成。
$watchCollection()でcolorオブジェクトの変更を検知し、RGBのHEXコードを生成している。
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <script src="lib/angular/angular.min.js"></script> <script src="lib/onsenui/js/onsenui.min.js"></script> <script src="lib/onsenui/js/angular-onsenui.min.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> <script> ons.bootstrap() .controller("colorController", ["$scope", function($scope) { $scope.color = { hex: "#ffffff", r: 255, g: 255, b: 255 }; ons.ready(function() { $scope.setColor(); }); $scope.$watchCollection("color", function(newVal, oldVal) { if (newVal !== oldVal) { $scope.color.r = Number(newVal.r); $scope.color.g = Number(newVal.g); $scope.color.b = Number(newVal.b); $scope.color.hex = "#" + ("0" + $scope.color.r.toString(16)).slice(-2) + ("0" + $scope.color.g.toString(16)).slice(-2) + ("0" + $scope.color.b.toString(16)).slice(-2); $scope.setColor(); } }); $scope.setColor = function() { var elem = document.getElementById("div-color"); elem.style.backgroundColor = $scope.color.hex; }; }]); </script> <style> #div-color { border: 1px solid #ddd; border-radius: 10px; width: 90%; height: 40px; } .div-item { text-align: center; } .div-range { } .div-range .range { width: 100%; } </style> </head> <body> <ons-page ng-controller="colorController"> <ons-toolbar> <div class="center">Color Slider</div> </ons-toolbar> <ons-list> <ons-list-item> <ons-row align="center"> <ons-col width="30%"> <div class="div-item">Color</div> </ons-col> <ons-col width="70%"> <div id="div-color"></div> </ons-col> </ons-row> </ons-list-item> <ons-list-item> <ons-row align="center"> <ons-col width="10%"> <div class="div-item">R</div> </ons-col> <ons-col width="20%"> <div class="div-item">{{color.r}}</div> </ons-col> <ons-col width="70%"> <div class="div-range"> <input type="range" class="range" min="0" max="255" step="1" ng-model="color.r"> </div> </ons-col> </ons-row> </ons-list-item> <ons-list-item> <ons-row align="center"> <ons-col width="10%"> <div class="div-item">G</div> </ons-col> <ons-col width="20%"> <div class="div-item">{{color.g}}</div> </ons-col> <ons-col width="70%"> <div class="div-range"> <input type="range" class="range" min="0" max="255" step="1" ng-model="color.g"> </div> </ons-col> </ons-row> </ons-list-item> <ons-list-item> <ons-row align="center"> <ons-col width="10%"> <div class="div-item">B</div> </ons-col> <ons-col width="20%"> <div class="div-item">{{color.b}}</div> </ons-col> <ons-col width="70%"> <div class="div-range"> <input type="range" class="range" min="0" max="255" step="1" ng-model="color.b"> </div> </ons-col> </ons-row> </ons-list-item> </ons-list> </ons-page> </body> </html> |
