Jquery CSS-ஐ கையாளும் விதம்
CSS என்பது HTML மூலம் உருவாக்கப்படும் பக்கங்களை இன்னும் அழகு படுத்த உதவும். அதாவது எழுத்துக்களின் வகைகள், நிறங்கள், பின்புற வண்ணங்கள் போன்ற பல்வேறு வகையான அழகு சார்ந்த விஷயங்களை ஒருசேர தொகுத்துக் கொடுக்க இந்த css உதவும். “அழகிய பக்கங்களின் ஊற்று” என்பதே “Cascading style sheets” என்பதன் தமிழாக்கம் ஆகும். இதைப் பற்றி முழுமையாகத் தெரிந்து கொள்ள www.kaniyam.com/learn-css-in-tamil-ebook/ எனும் முகவரியை பார்க்கவும். இதுபோன்ற css பண்புகளின் மீது jQuery-யை எவ்வாறு பயன்படுத்தலாம் என்று இதில் பார்க்கலாம்.
கீழ்க்கண்ட எடுத்துக்காட்டில் css பண்புகள் அனைத்தும் <style> எனும் tag-க்குள் வரையறுக்கப்பட்டுள்ளன. இதுவே css-ஐ குறிப்பிடும் முறை ஆகும். jquery object- ன் மீது பயன்படுத்தப்படும் .css() என்பது குறிப்பிட்ட பண்பினை வெளிப்படுத்த உதவும். அவ்வாறே .css()-க்குள் கொடுக்கப்படும் மதிப்புகளுக்கு ஏற்ப அந்த element-ஐ மாற்றி அமைக்கவும் செய்யும். அதாவது ‘Getting value’ என்பதன் மீது சொடுக்கும்போது p1-ன் பின்புற வண்ணம் வெளிப்படுமாறும், ‘Setting value’ -ன் மீது சொடுக்கும்போது p1-ன் எழுத்துக்களின் வடிவம் மாறுமாறும் இங்கே நிரல்கள் கொடுக்கப்பட்டுள்ளன.
சாதாரண வெளிப்பாடு:
Getting value-ன் மீது சொடுக்கினால் வெளிப்படுவது:
Setting value-ன் மீது சொடுக்கினால் மாறுவது:
Jquery elements-ன் இயக்கங்களைத் தோற்றுவிக்கும் விதம்
வலைத்தளப் பக்கங்களில் இயக்கங்களை உருவாக்குவதற்கும், அவ்வியக்கங்களை கண்கூடாகக் காண்பதற்கும் உதவும் jquery methods-ஐ இங்கு காணலாம். கீழ்க்கண்ட எடுத்துக்காட்டில் ஒருசில அடிப்படையான இயக்கங்களும், அதற்கான விளக்கங்களும் கொடுக்கப்பட்டுள்ளன.
நிரலுக்கான விளக்கம்:
hide() -ஆனது p1-எனும் id-ஐக் கொண்ட வரியை மறைக்கிறது. இதற்குள் கொடுக்கப்பட்ட 600 என்பது மறைத்தல் நடைபெறும் விதத்தை மெதுவாகக் காட்ட உதவும்.
toggle() என்பது மறைக்கப்பட்ட element-ன் அடிப்படையில் முன்னும் பின்னும் நகர்வதற்கு பயன்படும். இங்கு p3-ன் மீது பயன்படுத்தப்பட்ட toggle() -ஆனது p1 மறைக்கப்பட்ட பின்னர் அதனிடத்தை அடைகிறது.
slideUp() என்பது f1-எனும் படிவத்தை மேற்புறமாக நகர்த்தி மறைக்கிறது.
fadeOut() என்பது dv1-எனும் element-ஐ கொஞ்சம் கொஞ்சமாக மங்கடித்து மறைக்கிறது.
fadeTo(400,0.5) என்பது dv2-எனும் element-ஐ குறிப்பிட்ட அளவில் மங்கடித்து மங்கிய நிலையில் அமைக்கிறது.
animate() என்பது நாமாக ஒருசில இயக்கங்களை வரையறுக்க உதவும் method ஆகும். இங்கு animate({“font-size” : “24pt”}, “slow”) என்பது dv3 எழுத்துக்களின் அளவினை பெரிதுபடுத்த உதவியுள்ளது. அவ்வாறு பெரிது படுத்தும் நிகழ்வானது மெதுவாக நிகழ வேண்டும் என்பதை slow உணர்த்துகிறது.
சாதாரண வெளிப்பாடு:
jQuery ஏற்படுத்திய மாற்றம்:
