Change TextBox Width with JQuery on Focus and Blur - සිංහල

[dhanushkachandana]

Change TextBox Width with JQuery on Focus and Blur - සිංහල

https://dhanushkablog.wordpress.com/

මේ පොස්ට් එකේ කියන්න හදන්නේ web site වල use කරන තවත් design එකක් ගැන. text box එකට animation එකක් add කරන එක මේකෙදි කරන්නේ. text box එක click කරාම, ඒ කියන්නේ text box එක focus උනාම width එක වෙනස් වෙන්නත් එකෙන් අයින් උනාම (blur කියන event එක) ආයෙත් කලින් width එකටම set කරන්නත් Jquery පාවිච්චි කරන්නේ කොහොමද කියලා තමයි මේකේ විස්තර වෙන්නේ. website වල, web application වල මේක use කරනවා දැකලා ඇති.

මේකෙදි Jquery Library එක ඕන වෙනවා. මේකෙන් වැඩ පටන් ගන්න විදිය මේ පොස්ට් එකේ තියනවා. මුලින්ම HTML code එක ඕන වෙනවා.


<input type="text" placeholder="search">
style එකක් add කරලා ලස්සන කරගන්න පුළුවන්.

input{
padding: 10px;
font-size:1em;
width: 200px;
}
මේ තියෙන්නේ output එක.

දැන් තියෙන්නේ Jquery part එක. මේකෙදි focus, blur කියන jquery events දෙක use කරනවා.

$(document).ready(function() {
$('input').focus(function() {
$(this).animate({width: '350px'}, 500);
});

$('input').blur(function() {
$(this).animate({width: '200px'}, 500);
});
});
මේ javascript code එක script tags ඇතුලේ head එකේ ලියන්න පුළුවන්. එහෙම නැත්තන් external file එකක ලියලා link කරගන්න පුළුවන්. working example එකක් මෙතනින් බලන්න පුළුවන්.

බ්ලොග් එකට ඇවිත් අදහසක් දීලා සහයෝගයක් දෙන්න.