backbone.js の練習で作った colorpicker です。
もうちょっとうまいやり方がある気がします。
クリックで背景色が変わって
ダブルクリックで、パレットの色を変更できます。
localstorage にパレットを保存します。
backbone.js の例の中のひとつとしてみてください。
（荒削りですが）
colorpicker.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
<!--
a.colorpicker
{
display: block;
text-decoration:none;
width: 12px;
height: 12px;
border: solid 1px #888888;
}
a.colorpicker:hover
{
border: solid 1px #aaaaaa;
}
div.class01
{
position: absolute;
top:17px; left:20px;
display: none;
}
a.class02
{
position: relative;
top: 0px; left: 0px;
}
-->
</style>
<script language="JavaScript" type="text/javascript" src="javascripts/jquery-1.9.0.min.js"></script>
<script language="JavaScript" type="text/javascript" src="javascripts/underscore-min.js"></script>
<script language="JavaScript" type="text/javascript" src="javascripts/backbone-min.js"></script>
<script language="JavaScript" type="text/javascript" src="javascripts/backbone.localStorage-min.js"></script>
<script type="text/javascript" language="JavaScript">
<!--
function showColorpicker() {
document.getElementById('pickupcolor').style.display = 'block';
document.getElementById('changecolor').style.display = 'none';
}
//-->
</script>
</head>
<body>
<script type="text/template" id="colorink">
<a href='#' class='colorpicker' style='background-color: <%- name %>'></a>
</script>
<a href="#" class="class02" onclick="showColorpicker();"> ■ </a>
<div style="position:absolute;display:none;float:left;border:1px solid #000000;" id="pickupcolor">
<table>
<tr>
<td colspan="8" align="right">
<input type="button" value="×" style="width:16px;height:16px;padding: 0px;" onclick="document.getElementById('pickupcolor').style.display='none';">
</td>
</tr>
<tbody id="palette">
</tbody>
</table>
<div style="position:absolute;none;float:left;border:1px solid #000000;" id="changecolor">
<table>
<tr>
<td colspan="2" align="right">
<input type="button" value="×" style="width:16px;height:16px;padding: 0px;" onclick="document.getElementById('changecolor').style.display='none';">
</td>
</tr>
<tr>
<td>
<input type="text" value="#ffffff" id="inkcode" onchange="setColor(this);" />
</td>
<td>
<input type="button" value="OK" onclick="changeInk(document.getElementById('inkcode').value);document.getElementById('changecolor').style.display='none';"/>
</td>
</tr>
</table>
</div>
</div>
<script src="javascripts/colorpicker.js"></script>
</body>
</html>
colorpicker.js
var colorarray =
[
['#000000',1,'black']
,['#0000CD',1,'mediumblue']
,['#0000FF',1,'blue']
,['#006400',1,'darkgreen']
,['#008000',1,'green']
,['#008080',1,'teal']
,['#008B8B',1,'darkcyan']
,['#00BFFF',1,'deepskyblue']
,['#00CED1',1,'darkturquoise']
,['#00FA9A',1,'mediumspringgreen']
,['#00FF00',1,'lime']
,['#00FF7F',1,'springgreen']
,['#00FFFF',1,'aqua']
,['#00FFFF',1,'cyan']
,['#8B0000',1,'darkred']
,['#800000',1,'maroon']
,['#F08080',1,'lightcoral']
,['#BC8F8F',1,'rosybrown']
,['#CD5C5C',1,'indianred']
,['#B22222',1,'firebrick']
,['#A52A2A',1,'brown']
,['#FFE4E1',1,'mistyrose']
,['#FA8072',1,'salmon']
,['#FF6347',1,'tomato']
,['#E9967A',1,'darksalmon']
,['#FF7F50',1,'coral']
,['#FF4500',1,'orangered']
,['#FFA07A',1,'lightsalmon']
,['#A0522D',1,'sienna']
,['#FFF5EE',1,'seashell']
,['#8B4513',1,'saddlebrown']
,['#F4A460',1,'sandybrown']
,['#FFDAB9',1,'peachpuff']
,['#CD8541',1,'peru']
,['#FAF0E6',1,'linen']
,['#D2691E',1,'chocolate']
,['#FFE4C4',1,'bisque']
,['#FF8C00',1,'darkorange']
,['#DEB887',1,'burlywood']
,['#D2B48C',1,'tan']
,['#FAEBD7',1,'antiquewhite']
,['#FFDEAD',1,'navajowhite']
,['#FFEBCD',1,'blanchedalmond']
,['#FFEFD5',1,'papayawhip']
,['#FFE4B5',1,'moccasin']
,['#FFA500',1,'orange']
,['#FDF5E6',1,'oldlace']
,['#F5DEB3',-1,'wheat']
,['#FFFAF0',-1,'floralwhite']
,['#B8860B',-1,'darkgoldenrod']
,['#DAA520',-1,'goldenrod']
,['#FFF8DC',-1,'cornsilk']
,['#FFD700',-1,'gold']
,['#FFFACD',-1,'lemonchiffon']
,['#EEE8AA',-1,'palegoldenrod']
,['#F0E68C',-1,'khaki']
,['#BDB76B',-1,'darkkhaki']
,['#FFFFF0',-1,'ivory']
,['#FFFFE0',-1,'lightyellow']
,['#F5F5DC',-1,'beige']
,['#FAFAD2',-1,'lightgoldenrodyellow']
,['#FFFF00',-1,'yellow']
,['#808000',-1,'olive']
,['#9ACD32',-1,'yellowgreen']
,['#6B8E23',-1,'olivedrab']
,['#556B2F',-1,'darkolivegreen']
,['#B1FF2F',-1,'greenyellow']
,['#7FFF00',-1,'chartreuse']
,['#7CFC00',-1,'lawngreen']
,['#F0FFF0',-1,'honeydew']
,['#98FB98',-1,'palegreen']
,['#90EE90',-1,'lightgreen']
,['#32CD32',-1,'limegreen']
,['#8FBC8F',-1,'darkseagreen']
,['#228B22',-1,'forestgreen']
,['#3CB371',-1,'mediumseagreen']
,['#2E8B57',-1,'seagreen']
,['#F5FFFA',-1,'mintcream']
,['#66CDAF',-1,'mediumaquamarine']
,['#7FFFD4',-1,'aquamarine']
,['#40E0D0',-1,'turquoise']
,['#20B2AA',-1,'lightseagreen']
,['#48D1CC',-1,'mediumturquoise']
,['#FAFFFF',-1,'azure']
,['#E0FFFF',-1,'lightcyan']
,['#2F4F4F',-1,'darkslategray']
,['#AFEEEE',-1,'paleturquoise']
,['#5F9EA0',-1,'cadetblue']
,['#B0E0E6',-1,'powderblue']
,['#ADD8E6',-1,'lightblue']
,['#87CEEB',-1,'skyblue']
,['#87CEFA',-1,'lightskyblue']
,['#F0F8FF',-1,'aliceblue']
,['#4682B4',-1,'steelblue']
,['#1E90FF',-1,'dodgerblue']
,['#778899',-1,'lightslategray']
,['#708090',-1,'slategray']
,['#B0C4DE',-1,'lightsteelblue']
,['#6495ED',-1,'cornflowerblue']
,['#4169E1',-1,'royalblue']
,['#FF0000',0,'red']
];
/*
* 色名が正しいかどうか
* str : 色名
* array : 使用できる色名の配列
*/
function colorformat(str,array)
{
if(str.match(/^#[0-9|a-f|A-F]{6}/))
return true;
else if(str.match(/^#[0-9|a-f|A-F]{3}/))
return true;
else
for(i=0;i<array.length;i++)
if(str.toLowerCase() == array[i][2])
return true;
return false;
}
function setColor(obj)
{
if(colorformat(obj.value,colorarray))
{
obj.style.backgroundColor = obj.value;
}
}
function changeInk(inkcode)
{
if(colorformat(inkcode,colorarray))
{
colorbuffer.model.set('code',inkcode);
colorbuffer.model.set('name',inkcode);
colorbuffer.el.childNodes[1].style.backgroundColor = inkcode;
colorbuffer.model.save();
}
}
/*
* use backbone.js
*/
var colorbuffer;
var colors;
(function(){
/* model */
var Color = Backbone.Model.extend({
defaults:
{
code: "#ffffff"
,order: -1
,name: "white"
}
});
/* model view */
var ColorView = Backbone.View.extend({
tagName: 'td'
,events:{
"dblclick": "showChangeInkColor"
,"click": "setColor"
}
,showChangeInkColor: function(){
colorbuffer = this;
$('#changecolor').show();
}
,setColor: function(){
console.log(this.model.get('code'));
$('body').css('background', this.model.get('code'));
}
,template: _.template($('#colorink').html())
,render: function()
{
var template = this.template(this.model.toJSON());
this.$el.html(template);
return this;
}
});
/* collection */
var ColorList = Backbone.Collection.extend({
model: Color
,localStorage: new Backbone.LocalStorage('items')
})
colorList = new ColorList;
/* collection view */
var ColorsView = Backbone.View.extend({
tagName: 'tr'
,initialize: function()
{
colorList.fetch();
}
,render: function()
{
this.collection.each(function(color)
{
var colorView = new ColorView({model: color});
this.$el.append(colorView.render().el);
},this);
return this;
}
});
/* make collection */
colorList.fetch();
if(0 == colorList.length)
{
for(i=0;i<colorarray.length;i++)
{
if(-1 < colorarray[i][1])
{
colorList.create({
code:colorarray[i][0]
,order:colorarray[i][1]
,name:colorarray[i][2]
});
}
}
colorList.fetch();
}
//tr の中に td ８ のテーブル……
var colorsView = new ColorsView({collection: colorList});
var str = colorsView.render().el;
var tds = $(str).find('td');
var tr;
for(i=0;i<40;i++)
{
if(i % 8 == 0)
tr = document.createElement('tr');
tr.appendChild(tds[i]);
if(i % 8 == 7)
{
$('#palette').append(tr);
}
}
})();//end of $function