বাবা! এই সমস্ত কাজের ক্ষেত্রগুলি আমাকে এই সিদ্ধান্তে নিয়ে গেছে যে আপনি যদি এটি স্টাইল করতে চান তবে এইচটিএমএল চেকবাক্স ধরণের স্তন্যপান করে।
পূর্বসূরি হিসাবে, এটি কোনও সিএসএস বাস্তবায়ন নয়। আমি কেবল ভেবেছিলাম যে অন্য কারওর পক্ষে যদি এটির কাজে লাগতে পারে তবে আমি তার সাথে ভাগ করে নেব।
আমি এইচটিএমএল 5 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();
এটি তাত্ক্ষণিকভাবে ডিওমে চেকবক্সটি যুক্ত করবে এবং ইভেন্টগুলি হুক আপ করবে। একটি চেকবক্স চেক করা হয়েছে কিনা তা অনুসন্ধান করতে:
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 টি স্টেট রয়েছে এমন একটি চেকবক্স দিয়ে এটি "প্রসারিত" করা সম্ভব করে তোলে। এখানে একটি ডেমো রয়েছে । আপনি দেখতে পাচ্ছেন, এর মধ্যে ইতিমধ্যে অন্তর্নির্মিত চেকবক্সের চেয়ে বেশি কার্যকারিতা রয়েছে।
আপনি যখন জাভাস্ক্রিপ্ট এবং সিএসএসের মধ্যে নির্বাচন করছেন তখন কিছু বিবেচনা করার বিষয়।
পুরানো, খারাপভাবে ডিজাইন করা কোড
ওয়ার্কিং ডেমো
প্রথমে একটি ক্যানভাস স্থাপন করুন
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;
}
এটি আপনার যেখানে জাভাস্ক্রিপ্টে অদ্ভুত ইভেন্ট হ্যান্ডলিং মডেলের কারণে আইইতে সমস্যা হতে পারে।
আমি আশা করি এটা কারো সাহায্যে লাগবে; এটা অবশ্যই আমার প্রয়োজন অনুসারে।
