জেকোয়েরি নতুন ক্লাস যোগ/মোছা (jQuery class add/remove)
জেকোয়েরিতে
addClass() এবং removeClass() নামে দুটি মেথড আছে।এগুলি দিয়ে আপনি যেকোন
এলিমেন্টে একটা নতুন সিএসএস ক্লাস যোগ বা বাদ দিতে পারবেন।ওয়েব এপ্লিকেশন
তৈরীর সময় এরুপ প্রায়ই লাগে যে,কোন বাটন,ট্যাব ইত্যাদি কোথাও ক্লিক বা
মাউস হোভার করলে ডকুমেন্টের কোন অংশে সিএসএস পরিবর্তিত হবে।যেমন নিচের
এরুপ একটা উদাহরন দিচ্ছি যেখানে একটা বাটনে ক্লিক করলে তার নিচে
প্যারাগ্রাফটির রং লাল হবে আবার অন্য বাটনটিতে ক্লিক করলে একই
প্যারাগ্রাফটির রং সবুজ হবে।
index.html ফাইল
আউটপুট:
index.html ফাইল
01.<html>02.<head>03.<link rel="stylesheet" href="/style.css" type="text/css"/>04.<script src="/jquery_latest.js" type="text/javascript"></script>05.<script type="text/javascript">06.$(document).ready(function(){07.$('#colorRed').click(function(){08.$('#webcoachbd').addClass('redPara')09..removeClass('greenPara');10.});11.$('#colorGreen').click(function(){12.$('#webcoachbd').addClass('greenPara')13..removeClass('redPara');14.});15.});16.</script>17.</head>18.<body>19.<button id="colorRed">Click here for red color</button>20.<button id="colorGreen">Click here for green color</button>21.<p id="webcoachbd">JQuery is a popular javascript framework</p>22.</body>23.</html>
JQuery is a popular javascript framework
ব্যাখ্যা:এখানে জেকোয়েরি কোডে দেখুন প্রথমে ডকুমেন্ট রেডি করে (ডকুমেন্ট
রেডি করার ফাংশনগুলি নিয়ে আগের টিউটোরিয়ালগুলিতে আলোচনা হয়েছে) এরপর
coloRed আইডি সম্বলিত বাটনটি সিলেক্ট করেছি এবং এখানে ক্লিক করলে
webcoachbd আইডি সম্বলিত প্যারাগ্রাফে একটি redPara নামে ক্লাস যোগ
হবে।addClass মেথডটিতে স্ট্রিং হিসেবে যে প্যারামিটারটি পাঠাবেন সেটি হবে
ক্লাসের নাম।*জেকোয়েরিতে এভাবে একটা আইডি সিলেক্ট করার পর ডট চিহ্ন দিয়ে এর উপর চালানো মেথডটির নাম দিতে হয় যেমন আমি দিয়েছি $(‘#webcoachbd’).addClass(‘redPara’)
*কোন একটা সিলেক্টেড এলিমেন্টে একসাথে অনেকগুলি মেথড অপারেশন চালাতে পারে যেমন আমি একসাথে দুটি মেথড (addClass এবং removeClass) চালিয়েছি webcoachbd আইডি সিলেক্ট করে।$(‘#webcoachbd’).addClass(‘redPara’).removeClass(‘greenPara’);
*removeClass মেথডটিও addClass এর মতই, এই মেথডটি দিয়ে পুর্বে যোগকৃত ক্লাস মুছে দিতে পারেন।
যাইহোক এবার সিএসএস ফাইলে নিচের কোডটুকু লিখুন।যেসমস্ত ক্লাস যোগ হল সেগুলির জন্য যেকোন সিএসএস লিখুন।যেমন আমি লিখেছি।
style.css ফাইল
01.#webcoachbd{02.font-weight:bolder;03.font-family:Verdana;04.}05..redPara{06.color:#f00;07.}08..greenPara{09.color:green;10.}* তাহলে সবশেষে ফলাফল দাড়াচ্ছে colorRed বাটনে ক্লিক করলে webcoachbd আইডি সম্বলিত প্যারাতে redPara নামে একটি ক্লাস যোগ হবে এবং greenPara নামের কোন ক্লাস থাকলে সেটা মুছে যাবে (যে ক্লাস অপর বাটনটিতে ক্লিক করলে যোগ হবে )।
এবং একইভাবে colorGreen বাটনে ক্লিক করলে webcoachbd আইডি সম্বলিত প্যারাতে greenPara নামে একটি ক্লাস যোগ হবে এবং redPara নামের কোন ক্লাস থাকলে সেটা মুছে যাবে (যে ক্লাস অপর বাটনটিতে ক্লিক করলে যোগ হবে )।
0 মন্তব্য(গুলি):
Post a Comment