이케! 이 모든 해결 방법으로 인해 HTML 확인란의 스타일을 지정하려는 경우 짜증납니다.
미리, 이것은 CSS 구현이 아닙니다. 다른 사람이 유용하다고 생각하는 경우에 대비하여 해결 방법을 공유하겠다고 생각했습니다.
HTML5 canvas요소를 사용했습니다 .
이것의 단점은 외부 이미지를 사용할 필요가 없으며 대역폭을 절약 할 수 있다는 것입니다.
단점은 어떤 이유로 브라우저가 올바르게 렌더링 할 수 없다면 대체가 없다는 것입니다. 이것이 2017 년에도 여전히 문제가되는지 여부는 논쟁의 여지가 있습니다.
최신 정보
이전 코드가 매우 추악하다는 것을 알았으므로 다시 작성하기로 결정했습니다.
Object.prototype.create = function(args){
var retobj = Object.create(this);
retobj.constructor(args || null);
return retobj;
}
var Checkbox = Object.seal({
width: 0,
height: 0,
state: 0,
document: null,
parent: null,
canvas: null,
ctx: null,
/*
* args:
* name default desc.
*
* width 15 width
* height 15 height
* document window.document explicit document reference
* target this.document.body target element to insert checkbox into
*/
constructor: function(args){
if(args === null)
args = {};
this.width = args.width || 15;
this.height = args.height || 15;
this.document = args.document || window.document;
this.parent = args.target || this.document.body;
this.canvas = this.document.createElement("canvas");
this.ctx = this.canvas.getContext('2d');
this.canvas.width = this.width;
this.canvas.height = this.height;
this.canvas.addEventListener("click", this.ev_click(this), false);
this.parent.appendChild(this.canvas);
this.draw();
},
ev_click: function(self){
return function(unused){
self.state = !self.state;
self.draw();
}
},
draw_rect: function(color, offset){
this.ctx.fillStyle = color;
this.ctx.fillRect(offset, offset,
this.width - offset * 2, this.height - offset * 2);
},
draw: function(){
this.draw_rect("#CCCCCC", 0);
this.draw_rect("#FFFFFF", 1);
if(this.is_checked())
this.draw_rect("#000000", 2);
},
is_checked: function(){
return !!this.state;
}
});
작동하는 데모 는 다음과 같습니다 .
새 버전은 프로토 타입과 차등 상속을 사용하여 확인란을 만들기위한 효율적인 시스템을 만듭니다. 확인란을 만들려면
var my_checkbox = Checkbox.create();
그러면 즉시 확인란을 DOM에 추가하고 이벤트를 연결합니다. 확인란이 선택되어 있는지 확인하려면 :
my_checkbox.is_checked(); // True if checked, else false
또한 루프를 제거했습니다.
업데이트 2
마지막 업데이트에서 언급하지 않은 것은 캔버스를 사용하면 원하는 것처럼 보이는 확인란을 만드는 것보다 더 많은 이점이 있다는 것입니다. 원하는 경우 다중 상태 확인란을 만들 수도 있습니다 .
Object.prototype.create = function(args){
var retobj = Object.create(this);
retobj.constructor(args || null);
return retobj;
}
Object.prototype.extend = function(newobj){
var oldobj = Object.create(this);
for(prop in newobj)
oldobj[prop] = newobj[prop];
return Object.seal(oldobj);
}
var Checkbox = Object.seal({
width: 0,
height: 0,
state: 0,
document: null,
parent: null,
canvas: null,
ctx: null,
/*
* args:
* name default desc.
*
* width 15 width
* height 15 height
* document window.document explicit document reference
* target this.document.body target element to insert checkbox into
*/
constructor: function(args){
if(args === null)
args = {};
this.width = args.width || 15;
this.height = args.height || 15;
this.document = args.document || window.document;
this.parent = args.target || this.document.body;
this.canvas = this.document.createElement("canvas");
this.ctx = this.canvas.getContext('2d');
this.canvas.width = this.width;
this.canvas.height = this.height;
this.canvas.addEventListener("click", this.ev_click(this), false);
this.parent.appendChild(this.canvas);
this.draw();
},
ev_click: function(self){
return function(unused){
self.state = !self.state;
self.draw();
}
},
draw_rect: function(color, offsetx, offsety){
this.ctx.fillStyle = color;
this.ctx.fillRect(offsetx, offsety,
this.width - offsetx * 2, this.height - offsety * 2);
},
draw: function(){
this.draw_rect("#CCCCCC", 0, 0);
this.draw_rect("#FFFFFF", 1, 1);
this.draw_state();
},
draw_state: function(){
if(this.is_checked())
this.draw_rect("#000000", 2, 2);
},
is_checked: function(){
return this.state == 1;
}
});
var Checkbox3 = Checkbox.extend({
ev_click: function(self){
return function(unused){
self.state = (self.state + 1) % 3;
self.draw();
}
},
draw_state: function(){
if(this.is_checked())
this.draw_rect("#000000", 2, 2);
if(this.is_partial())
this.draw_rect("#000000", 2, (this.height - 2) / 2);
},
is_partial: function(){
return this.state == 2;
}
});
Checkbox마지막 스 니펫에서 사용 된 부분을 좀 더 일반적으로 수정하여 3 가지 상태의 확인란으로 "확장"할 수있었습니다. 여기 데모가 있습니다. 보시다시피 이미 내장 확인란보다 더 많은 기능이 있습니다.
JavaScript와 CSS 중에서 선택할 때 고려해야 할 사항.
오래되고 잘못 설계된 코드
실무 데모
먼저 캔버스를 설정하십시오
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
checked = 0; // The state of the checkbox
canvas.width = canvas.height = 15; // Set the width and height of the canvas
document.body.appendChild(canvas);
document.body.appendChild(document.createTextNode(' Togglable Option'));
다음으로 캔버스 자체를 업데이트하는 방법을 고안하십시오.
(function loop(){
// Draws a border
ctx.fillStyle = '#ccc';
ctx.fillRect(0,0,15,15);
ctx.fillStyle = '#fff';
ctx.fillRect(1, 1, 13, 13);
// Fills in canvas if checked
if(checked){
ctx.fillStyle = '#000';
ctx.fillRect(2, 2, 11, 11);
}
setTimeout(loop, 1000/10); // Refresh 10 times per second
})();
마지막 부분은 대화식으로 만드는 것입니다. 다행히도 매우 간단합니다.
canvas.onclick = function(){
checked = !checked;
}
JavaScript에서 이상한 이벤트 처리 모델로 인해 IE에서 문제가 발생할 수 있습니다.
나는 이것이 누군가를 돕기를 바랍니다. 그것은 내 요구에 꼭 맞았습니다.
