JQuery සිංහලෙන් – 3

Share with your friends!

ගොඩක් කාලෙකට පස්සේ ආයෙත් ලියන්න ගත්තා. exam වලට හිර උනාම ඉතින් මොනවත් කරන්න බැහැනේ. කාලයක් තිස්සේ එක එක දේවල් ගැන ලිව්වා, මේ ලියවෙන්නේ මේ blog එකේ 50 වෙනි පොස්ට් එක. කලින් පොස්ට් එකේ කිව්ව විදියට effects ගැන මේ පොස්ටුවෙන් විස්තර කරන්නම්. effects කොටස් 4කට වෙන් කරන්න පුළුවන්.

• hide/show
• animate
• slide
• fade

pure javascript වලින් කරනවට වැඩිය ගොඩක් දේවල් jquery effects වලින් කරගන්න පුළුවන්. දැන් බලමු මේ එකින් එක කොහොමද use කරන්නේ කියලා.

hide/show

[code language=”javascript”]
$(selector).hide(speed,callback);
[/code]

මේ තියෙන්නේ structure එක. මේ speed, callback කියන values දෙක optional, කැමති නම් නොදා ඉන්නත් පුළුවන්. පහලින් තියන code එකේ ඒ values නැහැ.

[code language=”javascript”]
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
[/code]

මුලින්ම hide effect එක බලමු, මේ code එකේ තියෙන්නේ ඒකට example එකක්. $(document).ready කියන කොටසින් වෙන්නේ Document Object Model (DOM) එක javascript code එක execute කරන්න ready උනාම run වෙන්න කියන එක. මෙතැනදී selector එක විදියට use කරලා තියෙන්නේ “p” tag එක.web page එකේ ඕනෑම “p” tag එකක් click කරාම තමයි function එක execute වෙන්නේ. ඒ click කරන element එක hide වෙන්න ඕන නිසා තමයි $(this).hide() කියන එක කියන්නේ. මේ code එකේ විදියට element එක එක සැරේටම hide වෙනවා smooth එකක් නැතුව. මේකට smooth එකක් add කරන්න පුළුවන් $(this).hide(2000) වගේ දුන්නොත්.  මෙතන 2000 කියන්නේ millisecond වලින් තියන value එකක්. ඒ වගේම “slow”, “fast” කියන value දෙන්නත් පුළුවන්. ඒවා වලින් ඉතින් කෙරෙන වැඩේ නම දැක්කම හිතාගන්න පුළුවන්නේ 😀

[code language=”javascript”]
$("#hide").click(function(){
$("p").hide(1000);
});

$("#show").click(function(){
$("p").show("fast");
});
[/code]

මේ code එකේ example එකක් මෙතන තියනවා. selector එක විදියට id use කරලා තියෙන්නේ මෙතැනදී. callback එක ගැනත් කියන්නම්. callback එකට දෙන්නේ function එකක්. callback එකෙන් කරන්නේ අපි දෙන action එකක් ඉවර උනාම අපි callback එකේදී දෙන function එක execute වෙන එක. මේ example එක බලන්න.

[code language=”javascript”]
$(document).ready(function(){
$("input").click(function(){
$("p").hide(2000, function(){
alert("done");
});
});
});
[/code]

මේ විදියට show/hide වලට වෙන වෙනම code ලියනවා වෙනුවට තව function එකක් තියනවා toggle කියලා. එකෙන් show/hide දෙකම add කරන්න පුළුවන් element එකකට. මෙතනින් example code එකක් බලන්න පුළුවන්.

[code language=”javascript”]
$(document).ready(function(){
$("input").click(function(){
$("p").toggle(2000);
});
});
[/code]

toggle එකටත් කලින් වගේම speed එකට value එකක් දෙන්න පුළුවන්. ඒ වගේම callback එකත් දෙන්න පුළුවන්.

මීළඟ පොස්ට් එකේ effects වල fade ගැන විස්තර කරන්නම්. පැහැදිලි නැති දෙයක් තියනවා නම් Comment කරලා අහන්න. ලිපිය ගැන අදහසක් දුන්නොත් තව හොඳට tutorial එක කරන්න පුළුවන්.

Share with your friends!