ओह! इन सभी वर्कअराउंड ने मुझे इस निष्कर्ष पर पहुंचा दिया है कि यदि आप इसे स्टाइल करना चाहते हैं तो HTML चेकबॉक्स किस तरह का बेकार है।
एक पूर्वाभास के रूप में, यह एक सीएसएस कार्यान्वयन नहीं है। मैंने सोचा था कि मैं किसी और के उपयोगी होने के मामले में मेरे साथ आया वर्कअराउंड साझा करूंगा।
मैंने 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
यह भी ध्यान रखना महत्वपूर्ण है कि मैंने लूप से छुटकारा पा लिया।
अपडेट २
अंतिम अद्यतन में उल्लेख करने के लिए मैंने कुछ उपेक्षा की है कि कैनवास का उपयोग करने से चेकबॉक्स बनाने की तुलना में अधिक फायदे हैं जो दिखता है कि आप इसे देखना चाहते हैं। यदि आप चाहते हैं तो आप मल्टी-स्टेट चेकबॉक्स भी बना सकते हैं ।
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 राज्यों वाले चेकबॉक्स के साथ इसे "विस्तारित" करना संभव हो सके। यहाँ एक डेमो है । जैसा कि आप देख सकते हैं, इसमें पहले से निर्मित चेकबॉक्स की तुलना में अधिक कार्यक्षमता है।
जब आप जावास्क्रिप्ट और सीएसएस के बीच चयन कर रहे हों, तो कुछ विचार करें।
पुराना, खराब तरीके से बनाया गया कोड
वर्किंग डेमो
सबसे पहले, एक कैनवास सेट करें
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;
}
यह वह जगह है जहां आपको IE में समस्याएं हो सकती हैं, जावास्क्रिप्ट में उनके अजीब घटना हैंडलिंग मॉडल के कारण।
मुझे उम्मीद है इससे किसी को सहायता मिलेगी; यह निश्चित रूप से मेरी जरूरतों के अनुकूल है।
