সিঁড়ি। এন্ট্রি গ্রুপ। উপকরণ। দরজা. তালা। ডিজাইন

আজ আমরা Adobe Illustrator এর জন্য একটি দরকারী স্ক্রিপ্ট উপস্থাপন করছি। এটি Adobe Illustrator এবং আমার বন্ধু - Yaroslav Tabachkovsky (Yemz) এর জন্য স্ক্রিপ্ট এবং প্লাগইনগুলির প্রতিভাবান ইউক্রেনীয় বিকাশকারী দ্বারা তৈরি করা হয়েছিল, যিনি ফ্রি মেশ টর্মেন্টর প্লাগইনটির বিকাশকারী হিসাবেও পরিচিত৷ RandomSwatchesFill স্ক্রিপ্ট এলোমেলোভাবে Swatches প্যালেটে নির্বাচিত রঙে নির্বাচিত বস্তুগুলিকে রঙ করে।

আপনি এই পর্যালোচনার শুরুতে বা শেষে ডাউনলোড বোতামে ক্লিক করে স্ক্রিপ্টটি বিনামূল্যে ডাউনলোড করতে পারেন।

আসুন স্ক্রিপ্টটি নিম্নলিখিত ফোল্ডারে রাখি, উদাহরণস্বরূপ:

উইন্ডোজের জন্য: C:\Program Files\Adobe\Adobe Illustrator CS5\Presets\en_GB\Scripts

ম্যাকের জন্য: অ্যাপ্লিকেশন / Adobe\Adobe Illustrator CS5\Presets\en_GB\Scripts

র‍্যান্ডম সোয়াচস ফিল স্ক্রিপ্ট কীভাবে কাজ করে তার একটি উদাহরণের জন্য, আসুন অনেক একরঙা বস্তুর সমন্বয়ে একটি ভেক্টর কাজ নেওয়া যাক।

অনুগ্রহ করে মনে রাখবেন যে বস্তুগুলিতে স্ক্রিপ্ট প্রয়োগ করা হবে সেগুলিকে অবশ্যই গোষ্ঠীভুক্ত এবং নির্বাচন করতে হবে। নির্বাচন অপসারণ না করে, Swatches প্যানেল খুলুন। Ctrl/Command কী ব্যবহার করে, Swatches প্যালেট থেকে যে রঙগুলি আমরা বস্তুকে রঙ করতে ব্যবহার করব তা নির্বাচন করুন।

আমরা RandomSwatchesFill স্ক্রিপ্ট ব্যবহার করি; এটি করতে, File > Scripts > RandomSwatchesFill এ যান। ফলস্বরূপ, আমরা একটি এলোমেলো ক্রমে আঁকা রঙিন বস্তু পেতে.

এই স্ক্রিপ্টটি সম্পূর্ণ ভেক্টর কাজ এবং বিভিন্ন বস্তু উভয় ক্ষেত্রেই প্রয়োগ করা যেতে পারে। Lasso টুল (Q) ব্যবহার করে, বেশ কয়েকটি বস্তু নির্বাচন করুন এবং Ctrl/Command কী ব্যবহার করে, Swatches প্যালেট থেকে রং নির্বাচন করুন যেখানে এই বস্তুগুলিকে আঁকতে হবে।

ফলস্বরূপ, ভেক্টর কাজের অংশটি নির্বাচিত রঙের সাথে এলোমেলোভাবে রঙিন হয়।

আপনি Swatches প্যানেলে রং, গ্রেডিয়েন্ট ফিল বা প্যাটার্ন নিয়ে পরীক্ষা করতে পারেন এবং দেখতে পারেন কোন আসল ফলাফল আপনি অর্জন করতে পারেন। একটি ব্যক্তিগত নোটে, আমি এই স্ক্রিপ্টের জন্য ইয়েমজকে ধন্যবাদ জানাতে চাই এবং আমি আশা করি এটি আপনার দৈনন্দিন সৃজনশীল কাজে কার্যকর হবে এবং আপনি রুটিন প্রযুক্তিগত সমস্যাগুলিতে কম সময় ব্যয় করবেন।

ব্যক্তিগতভাবে, একটি কল অর্ডার করার জন্য আমার নতুন প্লাগইন তৈরি করার সময় আমি এই স্ক্রিপ্টটি ব্যবহার করেছি। এই প্যালেট ব্যবহারকারীকে বোতামের রঙ এবং অর্ডার ফর্ম নির্বাচন করতে সহায়তা করে। অনেক দিন ধরেই আমি সঠিক স্ক্রিপ্ট খুঁজছিলাম এবং আমার মতে, এটি অন্যতম সেরা। তাছাড়া, আমি বলেছি, এটি সহজেই রোপণ করা হয়। ফলস্বরূপ আপনি কী পান তার একটি উদাহরণ নীচের উদাহরণে দেখা যেতে পারে। একটি গ্রেডিয়েন্ট সহ ক্ষেত্রগুলিতে কার্সার সহ একটি রঙ নির্বাচন করুন।

এই ধরনের একটি প্যালেট তৈরি করতে, আপনাকে 4 টি পদক্ষেপ নিতে হবে। এইচটিএমএল মার্কআপ দিয়ে শুরু করা যাক। যেখানে আপনি প্যালেটটি দেখতে চান সেখানে আপনাকে এটি যোগ করতে হবে।

• আরজিবি:
• HSV:
• হেক্স:

আইডি সহ প্রধান অভিভাবক ব্লক হল রঙ-পিকার। এটিতে তিনটি প্রধান ব্লক রয়েছে, যার ভিতরে শিশু উপাদান রয়েছে, যা আমাদের প্যালেটের গঠন তৈরি করে। আসুন নীচের চিত্রের সাথে আপেক্ষিকভাবে সেগুলি দেখি।

আইডি পিকার-র্যাপার সহ ব্লকটি প্রথম ব্লক। একটি রঙের গ্রেডিয়েন্ট সহ একটি বর্গক্ষেত্রের ছায়া নির্বাচন করার জন্য দায়বদ্ধ৷ এর ভিতরে গ্রেডিয়েন্টের সাথে একটি ব্লক এবং পয়েন্টারের জন্য দায়ী একটি ব্লক।

আইডি পিসিআর-র্যাপার সহ ব্লকটি ব্লকের জন্য দায়ী দ্বিতীয় ব্লক যা গ্রেডিয়েন্ট আকারে সমস্ত রঙ প্রদর্শন করে। ভিতরে একটি গ্রেডিয়েন্ট সহ একটি ব্লক এবং একটি ব্লক যা একটি স্লাইডার প্রদর্শন করে যা উপরে এবং নীচে চলে।

আইডি রঙ-মান সহ UL তালিকা - এর ভিতরে বেশ কয়েকটি আইটেম রয়েছে। প্রথম তিনটি, ডায়াগ্রামে তারা 3 নম্বরযুক্ত। তারা তিনটি ফর্ম্যাটে রঙের কোড প্রদর্শন করে - RGB, HSV, HEX।

ছবির ব্লক, 4 নম্বর, আগের তালিকার একটি উপাদান। এটাই শেষ লি পয়েন্ট। এটির ভিতরে পিসিআর_বিজি আইডি সহ একটি ব্লক রয়েছে। এই ব্লকটি বর্তমানে নির্বাচিত রঙ প্রদর্শন করে।

আপনার প্রয়োজনের উপর নির্ভর করে, আপনি স্থানগুলি পরিবর্তন করতে পারেন বা এমনকি সেই উপাদানগুলিকে অপসারণ করতে পারেন যেগুলির প্রয়োজন নেই৷ যখন আমরা প্যালেটটি ইনস্টল করার কাজটি সম্পূর্ণ করে ফেলি, তখন আপনি নিজেই এটি আরও বিশদে খুঁজে বের করতে সক্ষম হবেন এবং প্যালেটের এই বা সেই উপাদানটি কীভাবে পরিবর্তন করবেন তা নির্ধারণ করতে পারবেন।

প্যালেট ইনস্টল করার দ্বিতীয় ধাপ হল CSS শৈলী যোগ করা। আপনি এগুলিকে, যথারীতি, আপনার সাইটের স্টাইল ফাইলে বা যে উপাদানটির সাথে আপনি এই রঙ প্যালেটটি সংযুক্ত করেছেন তাতে যুক্ত করুন৷

#color-picker( margin:25px auto; width:450px; ) #color-values( display:block; list-style:none; color:#222; float:left; margin:0 0 0 15px; padding: 5px; text-align:left; ) #pcr_bg(উচ্চতা:135px; ) .পিকার-র্যাপার, .pcr-র্যাপার ( অবস্থান: আপেক্ষিক; ফ্লোট: বাম; ) .পিকার-সূচক, .pcr-সূচক ( অবস্থান: পরম; বাম: 0; শীর্ষ: 0; ) .পিকার, .pcr ( কার্সার: ক্রসহেয়ার; ফ্লোট: বাম; ) .cp-ডিফল্ট .পিকার ( প্রস্থ: 200px; উচ্চতা: 200px; ) .cp-ডিফল্ট .pcr ( প্রস্থ: 30px; height : 200px; ) .cp-default .pcr-র্যাপার ( মার্জিন-বাম: 10px; ) .cp-ডিফল্ট .পিকার-সূচক (প্রস্থ: 5px; উচ্চতা: 5px; সীমানা: 2px কঠিন গাঢ় নীল; -moz-বর্ডার-ব্যাসার্ধ 4px; -o-বর্ডার-ব্যাসার্ধ: 4px; -ওয়েবকিট-বর্ডার-ব্যাসার্ধ: 4px; বর্ডার-ব্যাসার্ধ: 4px; অস্বচ্ছতা: .5; -ms-ফিল্টার: "progid:DXImageTransform.Microsoft.Alpha(অস্বচ্ছতা=50)" ; ফিল্টার: progid:DXImageTransform.Microsoft.Alpha(অস্বচ্ছতা=50); ফিল্টার: আলফা(অস্বচ্ছতা=50); ব্যাকগ্রাউন্ড-রং: সাদা; ) .cp-ডিফল্ট .pcr-সূচক ( প্রস্থ: 100%; উচ্চতা: 10px; বাম: -4px; অস্বচ্ছতা: .6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; ফিল্টার: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); ফিল্টার: আলফা (অস্বচ্ছতা = 60); সীমানা: 4px কঠিন হালকা নীল; -মোজ-বর্ডার-ব্যাসার্ধ: 4px; -o-বর্ডার-ব্যাসার্ধ: 4px; -ওয়েবকিট-বর্ডার-ব্যাসার্ধ: 4px; সীমানা-ব্যাসার্ধ: 4px; ব্যাকগ্রাউন্ড-রঙ: সাদা; )

আমি CSS ব্যবহার করে এটি বর্ণনা করব না। আমি যেমন বলেছি, একজন শিক্ষানবিস প্যালেট ইনস্টল করার সম্ভাবনা কম, তবে একজন অভিজ্ঞ একজন CSS এর সাথে পরিচিত। আমি মনে করি আপনি বুঝতে পারবেন কোন প্যারামিটার কিসের জন্য দায়ী। এর পরবর্তী ধাপে এগিয়ে যাওয়া যাক.

তৃতীয় পয়েন্ট যা আপনাকে অবশ্যই করতে হবে তা হল ফাইলটি অন্তর্ভুক্ত করা যাতে রঙ প্যালেট স্ক্রিপ্টটি রয়েছে। ফাইলটি নিজেই এই নিবন্ধটির উত্স সহ সংরক্ষণাগারে থাকবে৷ আপনি নীচের লিঙ্ক থেকে এটি ডাউনলোড করতে পারেন.

ফাইলটিকে colorpicker.min.js বলা হয়। আপনি যদি সাইটে প্যালেটটি প্রদর্শন করেন তবে সাইটের শিরোনাম বা ফুটারে এটি সংযুক্ত করুন। যদি কিছু মডিউল, প্লাগইন ইত্যাদিতে থাকে, তাহলে আপনি যেখানে অন্য স্ক্রিপ্টগুলি সংযুক্ত করবেন। স্বাভাবিকভাবেই, ফাইলের সঠিক পথ উল্লেখ করুন।

ঠিক আছে, শেষ পদক্ষেপটি হল একটি স্ক্রিপ্ট সংযোগ করা যা প্যালেট মানগুলির আউটপুট নিয়ন্ত্রণ করবে এবং এর কাজ শুরু করবে। HTML সহ প্যালেট ব্লকের পরপরই স্ক্রিপ্টটি অন্তর্ভুক্ত করা ভাল।

cp = ColorPicker(document.getElementById("pcr"), document.getElementById("পিকার"), ফাংশন(হেক্স, এইচএসভি, আরজিবি, মাউসপিকার, মাউসপিসিআর) ( currentColor = hex; ColorPicker.positionIndicators(documentBecydId(দস্তাবেজ) indicator"), document.getElementById("পিকার-ইনডিকেটর"), mousepcr, mousePicker); document.getElementById("hex").innerHTML = hex; document.getElementById("rgb").innerHTML = "rgb(" + rgb .r.toFixed() + "," + rgb.g.toFixed() + "," + rgb.b.toFixed() + ")"; document.getElementById("hsv").innerHTML = "hsv(" + hsv.h.toFixed() + "," + hsv.s.toFixed(2) + "," + hsv.v.toFixed(2) + ")"; document.getElementById("pcr_bg").স্টাইল। backgroundColor = হেক্স; )); cp.setHex("#D4EDFB");

স্ক্রিপ্টে আপনি কনফিগার করতে পারেন এমন বেশ কিছু জিনিস রয়েছে। চলুন তাদের তাকান. কি পরিবর্তন করা যেতে পারে 9 ম লাইন থেকে শুরু হয়.

• 9ম লাইন - আইডি সহ ব্লক - হেক্স, হেক্স ফর্ম্যাটে একটি রঙের মান বরাদ্দ করা হয়েছে। অর্থাৎ উপরের ছবিতে যে তালিকায় 3 নম্বরে রয়েছে সেটি প্রথম লাইনে। এইভাবে, আপনি এটি প্রদর্শন করার জন্য যেকোনো ব্লকে একটি রঙের কোড বরাদ্দ করতে পারেন।
• 10 তম লাইন - আইডি - rgb সহ ব্লকে, rgb ফর্ম্যাটে একটি মান নির্ধারণ করে৷ সবকিছু আগের পয়েন্টের মতোই।
• 11 তম লাইন - আইডি - hsv সহ ব্লকে, hsv বিন্যাসে একটি মান নির্ধারণ করে৷
• 13 তম লাইন - আইডি সহ ব্লক - pcr_bg, হেক্স ফর্ম্যাটের সাথে সম্পর্কিত একটি পটভূমি আকারে একটি শৈলী বরাদ্দ করা হয়েছে। অর্থাৎ যে বর্গক্ষেত্রটি বর্তমান রঙ দেখায়। একইভাবে, আপনি প্যালেট থেকে একটি রঙ প্রদর্শন করতে পারেন, উদাহরণস্বরূপ, একটি নির্দিষ্ট ব্লকের সাইটের পটভূমির জন্য, ইত্যাদি।
• 15 তম, শেষ লাইন ডিফল্ট রঙ সেট করে। আপনি হেক্স বিন্যাসে আপনার ইঙ্গিত করতে পারেন.

এটি মূলত রঙ প্যালেটের পুরো সংযোগ। আমি একেবারে শুরুতেই বলেছি, এই নিবন্ধটি একজন শিক্ষানবিসকে সাহায্য নাও করতে পারে; এটি আরও অভিজ্ঞ ওয়েবমাস্টারদের জন্য তৈরি। আমি এটি আপনাকে সাহায্য করে আশা করি।

যে সব, আপনার মনোযোগ জন্য ধন্যবাদ. 🙂

রাজধানীসহ উত্তরাঞ্চলে তাপপ্রবাহ অব্যাহত রয়েছে এবং তা আরও এক সপ্তাহ অব্যাহত থাকবে। এই বিষয়ে, আমি সমস্ত ধরণের ব্যবহারিক বিষয় দিয়ে আমার মস্তিষ্ককে অভিভূত না করার চেষ্টা করব এবং, যদি সম্ভব হয়, আমি মোটামুটি হালকা পোস্ট অফার করব, উদাহরণস্বরূপ, এইটির মতো।

সুতরাং, সবাই ভালভাবে জানে যে একটি রঙ চয়নকারীর জন্য কী প্রয়োজন, এটি তার রাশিয়ান নাম দ্বারাও পরিচিত - "পিপেট" (এবং শিশুদের জন্য এটি "পিপেট" নামে পরিচিত - সম্পাদকের মন্তব্য).

কখনও কখনও সাইটগুলির জন্য আপনাকে একটি রঙ চয়নকারী ইনস্টল করতে হয় (উদাহরণস্বরূপ), এবং সেইজন্য আমি যে সমস্ত jQuery আইড্রপার প্লাগইন পেয়েছি তা অফার করি৷ আমি বিশ্বাস করি এটি সবচেয়ে সম্পূর্ণ সংগ্রহ। তাই।

সমস্ত প্লাগইন দুটি বিভাগে বিভক্ত। বিভাগগুলির মধ্যে একটি হল একটি রঙের অ্যাটলাস (সোয়াচ) - কিছু প্রিসেট রঙ রয়েছে যা থেকে আপনাকে একটি পছন্দ করতে হবে। এবং দ্বিতীয় বিভাগটি আপনাকে রঙের ক্ষেত্র - রঙ চয়নকারী জুড়ে সরানোর মাধ্যমে সমস্ত ধরণের রঙের বিকল্প নির্বাচন করতে দেয়। দুটি নামই সংশ্লিষ্ট অ্যাডোব ফটোশপ টুল থেকে নেওয়া হয়েছে।

ইন্টারনেট এক্সপ্লোরার 6-8, গুগল ক্রোম 5, অপেরা 10.60, অপেরা 9.26, মোজিলা ফায়ারফক্স 3.6.6, সাফারি 4.03-এ সমস্ত প্লাগইন পরীক্ষা করা হয়েছে।

কালার পিকার

একটি হাইব্রিড প্লাগইন যাতে কালার পিকার এবং সোয়াচ উভয়ই রয়েছে। প্লাগইনগুলির লাইনে সেরা, কারণ... সমস্ত গাধার মধ্যে সঠিকভাবে কাজ করে, HSV এবং RGB সিস্টেমে রঙ সম্পর্কে তথ্য দেয়, রঙ নম্বর দেয়। তাছাড়া, RGB এবং HSV অক্ষরের পাশের বিন্দুতে ক্লিক করলে প্যালেটের চেহারা বদলে যাবে! অন্য কথায়, স্বাদ এবং রঙ সবকিছু আছে।

আইকন কালার পিকার। একটি খুব সুন্দর এবং সুবিধাজনক প্লাগইন। আরজিবি এবং এইচএসবি কালার সিস্টেমে কালার প্যারামিটার দেয় এবং কালার নম্বরও দেয়। আর প্রয়োজন নেই। তাদের তুলনা করার জন্য উপরের ডানদিকে বাক্সে দুটি রঙ সেট করা সম্ভব। আপনি ইনফো লিঙ্কে প্লাগইনটিতে খুব দরকারী তথ্য পেতে পারেন। IE6-এ ভুল ক্রিয়াকলাপ লক্ষ্য করা গেছে - রঙের ক্ষেত্রটি ধূসর ছায়ায় উপস্থাপিত হয়, তবে উপরের ডানদিকে ক্ষেত্রগুলির রঙগুলি সাধারণত দেখানো হয় এবং রঙের সংখ্যাগুলি সঠিকভাবে নির্দেশিত হয়৷ দ্বিতীয় উদাহরণের লিঙ্কটি প্লাগইনটির একটি সরলীকৃত সংস্করণ দেখায়। সামগ্রিকভাবে, প্লাগইনটি খুব ভালো, এবং আপনি যদি jPicker না বেছে নেন, তাহলে এটি। আমি এটা সুপারিশ.

ইন্টেলিয়েন্স কালার পিকার। আইকন থেকে সরলীকৃত সংস্করণের সাথে খুব মিল, তবে এর ত্রুটি রয়েছে। RGB সিস্টেমে রঙ দেখায় এবং রঙ নম্বর দেয়। ষষ্ঠ এক্সপ্লোরারে এটি একটি লাল ক্ষেত্র প্রদর্শন করে, রঙের পাশের স্ট্রাইপটি অনুপস্থিত। একই সময়ে, উপরের ডানদিকে উইন্ডোতে রঙ দেখানো হয়েছে, রঙ নম্বর সঠিকভাবে দেওয়া আছে। অন্যথায় সবকিছু ঠিক আছে। একবার রঙের নমুনা সম্পূর্ণ হলে, কিছু ফাংশন কল করা সম্ভব।

. একটি প্লাগইন যা আগেরগুলো থেকে আলাদা দেখায়। এটি শুধুমাত্র রঙ নম্বর দেয়, যদিও কিছু ক্ষেত্রে এইচএসএল সিস্টেম ব্যবহার করে একটি স্বাভাবিক রঙ পাওয়া সম্ভব বলে মনে হয় (একটি থেকে স্বাভাবিক করা হয়েছে)। এটা সব জায়গায় সঠিকভাবে কাজ বলে মনে হচ্ছে. যদিও 7টি গাধা আমার জন্য হিমায়িত হয়েছে, তবে এটি একটি সত্য নয় যে প্লাগইনটি দায়ী, আপনাকে পরীক্ষা করতে হবে।

সোয়াচস

খুব সুন্দর কালার প্যালেট। রঙ নম্বর দেয়। কোনো বাগ লক্ষ্য করা যায়নি.

সত্যিই সহজ রঙ চয়নকারী. একটি খুব সাধারণ রঙের অ্যাটলাস। শুধুমাত্র 36 টি রঙ আছে, রঙ নম্বর ফেরত দেওয়া হয়। কোনো বাগ লক্ষ্য করা যায়নি.

সাধারণ রঙ চয়নকারী। একটি রঙের অ্যাটলাস প্রতিনিধিত্ব করে যা একটি রঙ নম্বর প্রদান করে। একবার রঙের নমুনা সম্পূর্ণ হলে, কিছু ফাংশন কল করা সম্ভব। এটি IE6 এবং Opera9.26-এ কাজ করেনি এবং IE7 সম্পূর্ণরূপে হিমায়িত হয়েছে, যেমন IE7 এ অতিরিক্ত পরীক্ষার প্রয়োজন।

সরল রঙের রঙ-পিকার। ফুলের একটি সাধারণ অ্যাটলাস। কারণ চেক করা হয়নি কোন অনলাইন উদাহরণ নেই।

আমি মনে করি এই ব্লকটি খুব উপযোগী হবে, বিশেষ করে এমন ক্ষেত্রে যখন আপনি এটিকে আপনার ওয়েবসাইটে এম্বেড করতে চান। এই কালার পিকার ব্লক জাভাস্ক্রিপ্ট ব্যবহার করে কাজ করে। তাহলে চলুন দেখে নেওয়া যাক কিভাবে এটি সাইটে যোগ করা যায় এবং এই JQuery প্লাগইনটি সম্পর্কে কী উল্লেখযোগ্য।

কোড নিয়ে কাজ করা

প্রথমত, আমাদের জাভাস্ক্রিপ্ট এবং সিএসএস ফাইল সংযোগ করতে হবে। আপনার সাইটের থিমের সাথে মেলে CSS ফাইলটি সম্পাদনা করতে এবং চিত্র পাথগুলি (যদি প্রয়োজন হয়) সংশোধন করতে ভুলবেন না।

এক্সএইচটিএমএল

প্লাগইন সেটিংস

কাস্টম প্লাগইন সেটিংস (ঐচ্ছিক)।

• eventName – কালার সিলেকশন ফাংশন কল করার জন্য কাঙ্ক্ষিত ইভেন্ট, ডিফল্ট: "ক্লিক করুন"।
• রঙ - ডিফল্ট রঙ। HEX রঙের জন্য স্ট্রিং বা RGB এবং HSB এর জন্য হ্যাশ ((r:255, r:0, b:0)), ডিফল্ট: "FF0000″।
• সমতল - অবিলম্বে বা শুধুমাত্র ক্লিকে রঙ নির্বাচন ব্লক প্রদর্শন করুন, ডিফল্ট মান মিথ্যা।
• livePreview - ডিফল্টরূপে সত্য।
• onShow - রঙ পিকার দেখানো হলে কলব্যাক ফাংশন চালু হয়।
• onBeforeShow - রঙ পিকার দেখানোর আগে কলব্যাক ফাংশনটি চালু হয়।
• onHide - যখন রঙ পিকার লুকানো থাকে তখন কলব্যাক ফাংশনটি চালু হয়।
• onChange - রঙ পরিবর্তন হলে কলব্যাক ফাংশনটি চালু হয়।
• onSubmit - যখন আমরা একটি রঙ নির্বাচন করি তখন কলব্যাক ফাংশনটি চালু হয়।

আমি আশা করি আপনি এই প্লাগইন পছন্দ করেছেন. আমি আপনাকে সাফল্য এবং আপনার সাইটের উন্নয়ন কামনা করি!

এই পাঠটি সাইট টিম আপনার জন্য প্রস্তুত করেছে
পাঠের উত্স: http://www.eyecon.ro/colorpicker/
অনুবাদক: ভ্লাদিস্লাভ বোন্ডারেঙ্কো

এই পোস্টে আমি আমার আরেকটি জাভাস্ক্রিপ্ট সৃষ্টি উপস্থাপন করতে চাই: কালার পিকার - কালার পিকার। স্ক্রিপ্টটি কার্যকারিতা এবং ইনস্টলেশনে বেশ সহজ, এবং নীতিগতভাবে এর কোডটিও খুব জটিল নয়। এটি jQuery বা ছবি ব্যবহার করে না, আকারে ছোট এবং বেশ সহজ এবং দ্রুত। IE 6-9, Opera, FireFox, Safari, Chrom-এ কাজ করে।

কালার পিকার ডিফল্টরূপে 216টি ওয়েব-নিরাপদ রঙের একটি প্যালেট তৈরি করে, এবং এটির একটি CSS-স্টাইলযুক্ত চেহারা রয়েছে, তবে প্যালেটের চেহারা এবং বিষয়বস্তু কাস্টমাইজ করা যেতে পারে। এটি কী করতে সক্ষম তার কয়েকটি উদাহরণ নীচে দেওয়া হল।

স্ক্রিপ্টটি 1.2 সংস্করণে আপডেট করা হয়েছে (প্যালেটটি বন্ধ করার জন্য একটি বোতাম যোগ করা হয়েছে), তবে তালিকাগুলি পুরানো রয়ে গেছে। নতুন সংস্করণ শুধুমাত্র সংরক্ষণাগার মধ্যে আছে.

কালার পিকার ডেমো

উদাহরণ সহ স্ক্রিপ্টের একটি সংরক্ষণাগার এখানে ডাউনলোড করা যেতে পারে:
colorPicker.v1.1 (মূল সংস্করণ)
colorPicker.v1.2 (প্যালেট বন্ধ করতে একটি বোতাম যোগ করা হয়েছে)

আপনাকে ব্যাখ্যা করা আমার পক্ষে সহজ করার জন্য আমি কিছু সংজ্ঞা উপস্থাপন করব:

প্যালেট

আসলে প্যালেট নিজেই, রঙ নমুনা ধারণকারী

নমুনা

একটি প্যালেট উপাদান যা ক্লিক করা হলে একটি রঙ নির্বাচন করে।

পিকার

এটি একটি রঙ সহ একটি বর্গক্ষেত্র যা ব্যবহারকারী দেখতে পায় এবং রঙ প্যালেটটি প্রদর্শিত হওয়ার জন্য তাকে ক্লিক করতে হবে৷

কালার পিকার ইন্টিগ্রেশন

স্ক্রিপ্ট ব্যবহার করা বেশ সহজ. কালার পিকার - শুধুমাত্র তিনটি উপলভ্য পদ্ধতি রয়েছে (ডেটা টাইপের সাথে দেখানো হয়েছে):

ColorPicker.insertInto(HTMLElement উপাদান, স্ট্রিং নাম, স্ট্রিং নির্বাচিত, int offsX, int offsY)

প্রধান পদ্ধতি হল নির্দিষ্ট HTML এলিমেন্টে একটি কালার পিকার সন্নিবেশ করা। বিকল্প:

HTMLElement এলিমেন্ট - DOM - ট্রি নোড যেখানে কালার পিকার রাখতে হবে

স্ট্রিং নাম - ফর্ম উপাদানের নাম যা নির্বাচিত রঙের প্রতিনিধিত্ব করবে*

স্ট্রিং নির্বাচিত - স্ট্রিং যেমন "#FFCC00" - ডিফল্ট পিকার রঙ

int offsX - প্যালেট স্থানাঙ্কের অফসেট (উপরের ডান কোণে) অনুভূমিক মাউস ক্লিকের সাথে সম্পর্কিত

int offsY - প্যালেট স্থানাঙ্কের অফসেট (উপরের ডান কোণে) উল্লম্ব মাউস ক্লিকের সাপেক্ষে

* - কালার পিকার নিজেই একটি লুকানো ইনপুট উপাদান তৈরি করে এবং পিকারের আগে এটিকে DOM-এ রাখে। আপনি নামটি স্পষ্টভাবে সেট না করলে, স্ক্রিপ্টটি লুকানো INPUT উপাদানটির নামটি প্রথম প্যারামিটারে নির্দিষ্ট করা উপাদানটির আইডির মতো সেট করার চেষ্টা করবে।

// পৃষ্ঠায় যোগ করুন: ColorPicker.insertInto(document.getElementById("color_picker_two"), "base_color", "#0000ff", 10, 15); ColorPicker.setPallete(অ্যারে অ্যারেঅফরঙ)

আপনাকে আপনার নিজস্ব রঙ প্যালেট সেট করার অনুমতি দেয়। একটি অ্যারে প্যারামিটার নেয়, উদাহরণস্বরূপ:

ColorPicker.setPallete(["#FFFFFF","#FFCC00","#00FFCC","#0000FF","#00CCFF","#CC00FF"]); ColorPicker.setClasses(স্ট্রিং পিকার, স্ট্রিং প্যালেট, স্ট্রিং কালার আইটেম)

আপনাকে পিকার, প্যালেট এবং রঙের সোয়াচের জন্য আপনার নিজস্ব শৈলী শ্রেণীর নাম নির্দিষ্ট করার অনুমতি দেয়, উদাহরণস্বরূপ:

ColorPicker.setColors("কল-সেফ-পিকার","কল-সেফ-প্যালেট","কল-সেফ-আইটেম");

আপনি যখন আপনার নিজস্ব রঙ প্যালেট সেট করতে চান বা মানকগুলির চেহারা পরিবর্তন করতে চান তখন এটির প্রয়োজন হবে।

কালার পিকার ব্যবহারের উদাহরণ

আমাদের প্রথমে একটি ফর্ম প্রয়োজন - আমরা এর দুটি উপাদানের মধ্যে কালার পিকার সন্নিবেশ করব:

নিরাপদ ওয়েব রং:

বেসিক WEB রং + ডিগ্রী। ধূসর:

পাঠান

প্রধান কালার পিকার ফাইল সংযুক্ত করুন - ক

// নিরাপদ ওয়েব রং (স্ট্যান্ডার্ড), পৃষ্ঠায় যোগ করুন: ColorPicker.insertInto(document.getElementById("color_picker_one"), "safe_color", "#ff0000"); // বেসিক ওয়েব রং + ডিগ্রী। ধূসর: ColorPicker.setPallete(["#BE2137","#FFA100","#00752C","#0052AC","#701F85", "#E62937","#FFCB00","#009E2F","#0079F1 ","#873CBE", "#FF7525","#FDF900","#00E430","#00A9FF","#C87AFF", "#FFFFFF","#999999","#666666","#333333 ","#000000"]); // যেহেতু কম রং আছে, তাই প্যালেটের চেহারা আলাদা হবে - আপনাকে শৈলী সামঞ্জস্য করতে হবে: ColorPicker.setClasses("col-safe-picker","col-safe-palette","col-safe-item" ); // পৃষ্ঠায় যোগ করুন: ColorPicker.insertInto(document.getElementById("color_picker_two"), "base_color", "#0000ff", 5, 5);

স্ট্যান্ডার্ড প্যালেটের জন্য শৈলী যোগ করা যাক:

/* নিরাপদ রং */ .col-pic-item(float:left;width:15px;height:15px;border:solid 1px #FFF;margin:0px) .col-pic-item:hover(border:solid 1px # 00FF00) .col-pic-picker(width:30px;height:30px;border: solid 2px #666;float: left; margin-right: 15px;) .col-pic-palette(width:306px;border:solid 2px #666)

উপরের JS তালিকায়, লাইন 5-এ, আমরা আমাদের প্যালেট সেট করেছি, এবং এতে মানকটির চেয়ে কম রঙ রয়েছে, তাই লাইন 10-এ, একই জায়গায়, আমরা নতুন শৈলী ক্লাস নির্দেশ করেছি - আমরা সেগুলিকে সংজ্ঞায়িত করব:

/* মৌলিক রং */ .col-safe-item(float:left;width:40px;height:40px;border:solid 1px #FFF;margin:0px) .col-safe-item:hover(border:solid 1px # 00FF00) .col-safe-পিকার(width:30px;height:30px;border: solid 2px #666;float: left; margin-right: 15px;) .col-safe-palette(width:210px;border:solid 2px #666)

আসলে, কালার পিকারের শুধুমাত্র তিনটি শ্রেণী প্রয়োজন: পিকারের জন্য, প্যালেটের জন্য এবং নমুনার জন্য। অভিব্যক্তির জন্য, রঙের নমুনার জন্য আমরা আরেকটি ছদ্ম-শ্রেণি যোগ করেছি... :হোভার এটাই সব।

আমি আশা করি আমি এটি পরিষ্কারভাবে ব্যাখ্যা করেছি, আপনি নিবন্ধের শুরুতে লিঙ্ক থেকে স্ক্রিপ্ট ফাইলগুলি ডাউনলোড করতে পারেন, তবে আমি আপনাকে স্ক্রিপ্টের একটি তালিকা দেব - বরাবরের মতো, আমি এটিকে আরও সহজ এবং ছোট করার চেষ্টা করেছি৷ যদি আপনার কাছে থাকে কোন প্রশ্ন, লিখুন।

কালার পিকার লিস্টিং var ColorPicker = (ফাংশন (GLOB) ( "use strict"; var DOC = GLOB.document, pickerClass = "col-pic-picker", paletteClass = "col-pic-palette", colorItemClass = "col-pic -আইটেম", PALETTE = , // একটি রঙের সোয়াচ getColorItem = ফাংশন (ক্লিকহ্যান্ডলার) ( var colDiv = DOC.createElement("DIV"); colDiv.className = colorItemClass; colDiv.onclick = clickHandler; রিটার্ন colDiv.onclick এর জন্য একটি DOM উপাদান তৈরি করে ; ), // পৃষ্ঠা স্ক্রোল পান: pageScroll = function() ( ফেরত দিন ( y: GLOB.pageYOffset || DOC.documentElement.scrollTop || DOC.body.scrollTop, x: GLOB.pageXOffset || DOC.documentElement.scrollLeft | | DOC.body.scrollLeft ) ), // একটি রঙ প্যালেট গঠন (216 নিরাপদ ওয়েব রঙ ব্যবহার করা হয়) // এই ফাংশনটি বাইরে থেকে createPalette = ফাংশন (srcPicker, srcInput) ( var palette = DOC.createElement( "DIV" ), length = PALETTE.length, hexR = "", hexG = "", hexB = "", colItem = null, i, q, m, // নমুনা ক্লিক হ্যান্ডলার: clickHandler = function () ( srcPicker. শৈলী। পটভূমি = this.style.background; srcInput.value = this.hv; palette.style.display = "কিছুই নয়"; ), // প্যালেটে একটি রঙের সোয়াচ যোগ করে: addColor = ফাংশন (রঙ) ( colItem = getColorItem(clickHandler); colItem.style.background = colItem.hv = রঙ; palette.appendChild(colItem); ); // যদি ব্যবহারকারী তার প্যালেট নির্দিষ্ট না করে থাকে: if (দৈর্ঘ্য === 0) ( // নিরাপদ ওয়েব রঙের প্যালেট তৈরি করুন: (i = 0x0; i 0)? i.toString(16): "00"; for (q = 0x0; q 0) ? q.toString(16) : "00"; for (m = 0x0; m 0) ? m.toString(16): "00"; addColor("#" + hexR + hexB + hexG ); ) ) ) // অন্যথায়, ব্যবহারকারী যদি তার নিজস্ব রঙের অ্যারে প্রবেশ করে তবে এটি প্রদর্শন করুন: ) else ( for (i = 0; i)< length; i += 1) { addColor(PALETTE[i]); } } // Конфиг палитры: palette.className = paletteClass; palette.style.display = "none"; palette.style.position = "absolute"; // Добавляем в DOM DOC.body.appendChild(palette); return palette; }; return { /** * Установка имён классов стилей. * @param string picker - Имя класса для значка выбора цвета, по-умолчанию: "col-pic-picker". * @param string palette - Имя класса для появляющейся палитры, по-умолчанию: "col-pic-palette". * @param string colorItem - Имя класса элементов - образцов цвета в палитре, для по-умолчанию: "col-pic-item". * @return ColorPicker */ setClasses: function (picker, palette, colorItem) { pickerClass = picker; paletteClass = palette; colorItemClass = colorItem; return this; }, /** * Установка своей палитры цветов. * @param array arrayOfColors - массив HEX-значений цветов. * @return ColorPicker */ setPallete: function (arrayOfColors) { PALETTE = arrayOfColors; return this; }, /** * Вставить выбиралку цвета в HTMLElement * @param HTMLElement element - элемент, результат выборки: document.getElementById * @param string name - атрибут для элемента формы, представляющего выбранный цвет. * @param string selected - значение по-умолчанию для элемента формы, представляющего выбранный цвет. * @param int offsX - смещение палитры относительно эемента выбора цвета по горизонтали * @param int offsY - смещение палитры относительно эемента выбора цвета по вертикали * @return ColorPicker */ insertInto: function (element, name, selected, offsX, offsY) { var picker = DOC.createElement("DIV"), hideInput = DOC.createElement("INPUT"), palette = createPalette(picker, hideInput), oX = offsX || 1, oY = offsY || 1; // Скрытый элемент формы, значение которого // будет меняться, в зависимости от выбора цвета // и которое будет передаваться на сервер. hideInput.value = picker.style.background = selected; hideInput.type = "hidden"; hideInput.name = name || element.id; picker.className = pickerClass; // Обработчик клика на элементе - пикере picker.onclick = function (ev) { var e = ev || GLOB.event, x = e.clientX, y = e.clientY; palette.style.display = "block"; palette.style.top = (y + pageScroll().y) - oY + "px"; palette.style.left = (x + pageScroll().x) + oX + "px"; }; // Добавляем в DOM element.appendChild(picker); element.insertBefore(hideInput, picker); return this; } }; }(this));