වෙබ් අතුරුමුහුණත සංවර්ධනයේ නව පියවරක් දැක්කා. classList.add('visible') යන JavaScript ක්රමය භාවිතා කර, CSS තුළ .visible { display:block; } ලෙස සකස් කර, බටන් එකක් පෙනෙන හා නොපෙනෙන තත්ත්වය පාලනය කළා.
මෙම ක්රමය මූලික වශයෙන් "මාරියොනෙට්" සංකල්පයක් මත පදනම්වයි. සංවර්ධකයා බටන් (changeBtn) එකට සෙමැන්ටික් ID එකක් (id="changeBtn") දී, JavaScript මගින් එයට visible ක්ලාස් එකක් එක් කරනවා. CSS පාර්ශවයෙන් එම ක්ලාස් එකට display:block හෝ opacity, transform, animation වැනි ගුණයන් අර්ථ දෙනවා. එමනිසා, සංවර්ධකයා සෘජුවම CSS ගුණයන් වෙනස් නොකර, JavaScript එකෙන් "දුම්වැටි" එකක් දමන පරිදි බටන් එකේ දිස්වීම පාලනය කරයි.
මෙම ආකාරය භාවිතා කිරීමේ ප්රධාන වාසිය වන්නේ, UI තාරකාවක් ඉක්මනින්, පිරිසිදු ලෙස, සහ අලංකාර ඇනීමෙන් පාලනය කළ හැකි බවයි. බටන් එක "සහර දුක්කාරය" ලෙස කෙලින්ම HTML තුළ පවතින අතර, CSS මගින් එයට අවශ්ය දෘශ්ය ප්රතිඵල ලබා දේ.
ශ්රී ලංකාවට ඇති වැදගත්කම
ශ්රී ලංකාවේ බොහෝ සංවර්ධකයන්ට, විශේෂයෙන් නවකයන්ට, මෙම තාක්ෂණය පහසු අයුරින් UI ක්රියාකාරකම් ඉගෙන ගැනීමට උපකාරී වේ. පහත පරිදි ප්රයෝජන ගත හැක:
- කේතය වෙන් කිරීමෙන් maintainability වැඩිවේ – JavaScript සහ CSS වෙනම පාලනය කළ හැක.
- දෘශ්ය අලංකාරය animation සහ transition භාවිතයෙන් පරිශීලක අත්දැකීම වැඩි කරයි.
- ඉක්මන් ප්රොටොටයිප් සෑදීමේදී class toggling ක්රමය භාවිතා කර, කෙටි කාලය තුළ UI පරීක්ෂා කළ හැක.
එමෙන්ම, ස්ථානීය තාක්ෂණ සමාගම්වලට මෙම ක්රමය භාවිතා කර, වෙබ් යෙදුම්වල කාර්ය සාධනය හා පරිශීලක අත්දැකීම ඉහළ ගත හැක. අධ්යාපන ආයතනවලටද මෙය ඉගෙනුම් පද්ධතියේ අංගයක් ලෙස එක් කර, සිසුන්ට වඩා හොඳ UI/UX පදනමක් සපයන්න පුළුවන්.
අවසන් වශයෙන්, "visible" ක්ලාස් එකක් එක් කිරීම මඟින් බටන් එකේ දිස්වීම පාලනය කිරීම, අඩු කේතයක්, ඉහළ ප්රතිදානයක් ලබා දෙන සුළු, නමුත් බලවත් තාක්ෂණයක් බව පෙනෙයි. ඔබත් අදම ඔබේ ව්යාපෘතියේ අලංකාර UI එකක් නිර්මාණය කර බලන්න.
