Site Loader

Share with your friends!

මේ පොස්ට් එකේ කියන්න හදන්නේ 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 එක ඕන වෙනවා.

[code language=”html”]
<input type="text" placeholder="search">
[/code]

style එකක් add කරලා ලස්සන කරගන්න පුළුවන්.

[code language=”css”]
input{
padding: 10px;
font-size:1em;
width: 200px;
}
[/code]

මේ තියෙන්නේ output එක.

jq-input

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

[code language=”javascript”]
$(document).ready(function() {
$(‘input’).focus(function() {
$(this).animate({width: ‘350px’}, 500);
});

$(‘input’).blur(function() {
$(this).animate({width: ‘200px’}, 500);
});
});
[/code]

මේ javascript code එක script tags ඇතුලේ head එකේ ලියන්න පුළුවන්. එහෙම නැත්තන් external file එකක ලියලා link කරගන්න පුළුවන්. working example එකක් මෙතනින් බලන්න පුළුවන්.

Share with your friends!

One Reply to “Change Text Box Width with JQuery – Input Field Featured කරන හැටි”

Leave a Reply

Your email address will not be published. Required fields are marked *