Change Text Box Width with JQuery – Input Field Featured කරන හැටි


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

jq-input

දැන් තියෙන්නේ 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 එකක් මෙතනින් බලන්න පුළුවන්.

Advertisements

One thought on “Change Text Box Width with JQuery – Input Field Featured කරන හැටි

  1. Pingback: Change TextBox Width with JQuery on Focus and Blur | සතුටු වැස්ස බ්ලොග් කියවනය

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s