Yikes! Tutte queste soluzioni alternative mi hanno portato alla conclusione che il tipo di casella di controllo HTML fa schifo se si desidera modellarlo.
Come avvertimento, questa non è un'implementazione CSS. Ho solo pensato di condividere la soluzione alternativa che ho escogitato nel caso in cui qualcun altro lo abbia trovato utile.
Ho usato l' canvaselemento HTML5 .
Il vantaggio di questo è che non è necessario utilizzare immagini esterne e probabilmente è possibile risparmiare un po 'di larghezza di banda.
Il rovescio della medaglia è che se un browser per qualche motivo non riesce a renderlo correttamente, non c'è fallback. Anche se questo rimane un problema nel 2017 è discutibile.
Aggiornare
Ho trovato il vecchio codice abbastanza brutto, quindi ho deciso di dargli una riscrittura.
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;
}
});
Ecco una demo funzionante .
La nuova versione utilizza prototipi e ereditarietà differenziale per creare un sistema efficiente per la creazione di caselle di controllo. Per creare una casella di controllo:
var my_checkbox = Checkbox.create();
Ciò aggiungerà immediatamente la casella di controllo al DOM e collegherà gli eventi. Per verificare se una casella è selezionata:
my_checkbox.is_checked(); // True if checked, else false
È anche importante notare che mi sono liberato del ciclo.
Aggiornamento 2
Qualcosa che ho trascurato di menzionare nell'ultimo aggiornamento è che l'uso della tela ha più vantaggi rispetto alla semplice creazione di una casella di controllo che sembra come si desidera. È anche possibile creare caselle di controllo multi-stato , se lo si desidera.
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;
}
});
Ho modificato leggermente quello Checkboxutilizzato nell'ultimo frammento in modo che sia più generico, rendendo possibile "estenderlo" con una casella di controllo che ha 3 stati. Ecco una demo . Come puoi vedere, ha già più funzionalità rispetto alla casella di controllo integrata.
Qualcosa da considerare quando si sceglie tra JavaScript e CSS.
Codice vecchio, mal progettato
Demo di lavoro
Innanzitutto, imposta una tela
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'));
Successivamente, escogita un modo per aggiornare automaticamente la tela.
(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
})();
L'ultima parte è renderlo interattivo. Fortunatamente, è abbastanza semplice:
canvas.onclick = function(){
checked = !checked;
}
È qui che potresti avere problemi in IE, a causa del loro strano modello di gestione degli eventi in JavaScript.
Spero che questo aiuti qualcuno; è decisamente adatto alle mie esigenze.
