របៀបបង្កើត Place holder animation with jquery

អត្តបទនេះ Techfree នឹងធ្វើការលើកយកពីរបៀបបង្កើត Place holder animation ដោយប្រើជាមួយភាសា jquery។ Place holder animation នេះគឺគេពេញនិយមប្រើនៅក្នុង ទំរង់បញ្ចូលបញ្ចូលនិន្ន័យ ឬ អក្ស(Form input)។ ហើយក្នុងចំនុចនេះផងដែល Techfree នឹងធ្វើបញ្ចូលស្ទាយ Place holder នេះអោយមានចលនានឹងមានភាពទាកទាញជាងមុន  នៅផ្នែកខាងក្រោម Techfree នឹងធ្វើការលើជាឩទាហរណ៍មកបង្ហាញជូនដូចខាងក្រោម៖។

សូមមើលវីដេអូខាងក្រោមដើម្បីស្វែងយល់ថាតើ placehoder style មានប្រភេទស្ទាយអ្វីខ្លះនោះ

]

  1. ឩទាហរណ៍ៈ ការចុចនៅលើ

+ បង្កើត File html => index.html រួចបញ្ចូលកូដដូចខាងក្រោម¶

  • កូដផ្នែកខាង header

header_0

Link URL សំរាប់ធ្វើការដោនឡូត File : prism.js & prism.css យកមកប្រើដោយធ្វើចុចLink ខាងក្រោម៖

http://prismjs.com/download.html?themes=prism-coy&languages=markup+css+clike+javascript

Link CDN Bootrasp & font :

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css”> <link href=”https://fonts.googleapis.com/css?family=Lato:300,400,700,700i,900″ rel=”stylesheet”>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>                         <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>

  • កូដផ្នែក Body

body1

body2

body3

body4

body5

body7

body8

body9

កូដផ្នែកខាងលើនេះគឺជាកូដដែលបានបូកបញ្ចូលជាមួយភាសា Boostrap នឹងប្រភេទស្ទាយចំនួន ១៥ ស្ទាយមកបញ្ហាញជួនលោកអ្នក។

+ បង្កើត File CSS=>common_style.css រួចបញ្ចូលកូដដូចខាងក្រោមៈ

common_style

កូដCSS ខាងលើគឺជារួមសំរាប់ធ្វើកំនត់ស្តាយលើ Form Input រូមទាំងអស់ក្នុង Index.html ខាងលើ

+ បង្កើត File CSS=>foxholder-styles.css  រួចបញ្ចូលកូដដូចខាងក្រោមៈ

css_fox1

css_fox2

css_fox3

css_fox5

css_fox6css_fox7

css_fox8

css_fox9

css_fox10

css_fox11

css_fox12

កូដ css ខាលើគឺជាកូដសំរាប់កំនត់ទៅលើស្ទាយតាមរយះ ID element របស់ CSS នឹងប្រភេទស្ទាយ ផ្សេងៗគ្នា។

+ បង្កើត File javascript=>script.js រួចបញ្ចូលកូដដូចខាងក្រោមៈ

script_1

script_2

script_3

សំរាប់កូដខាងលើនេះគឺជាកូដសំរាប់ធ្វើការផ្តល់តម្លៃសំរាប់រាប់ Form ស្ទាយមួយៗពេលដែលចុចលើ Input Form

+ បង្កើត File javascript=>foxholder.js  រួចបញ្ចូលកូដដូចខាងក្រោមៈ

foxhodeer_js

foxhodeer_js4

foxhodeer_js5

foxhodeer_js6

foxhodeer_js11

foxhodeer_js12

foxhodeer_js13

កូដខាងលើនេះគឺសំរាប់កំនត់លើស្ទាយនីមួយពេលដែលចុចលើ Form input នីមួយ ហើយវានឹងធ្វើការសិក្សាលើលក្ខខណ្ឌដែលបាន ផ្តល់អោយខាងលើនេះ។