របៀបបង្កើត Place holder animation with jquery
អត្តបទនេះ Techfree នឹងធ្វើការលើកយកពីរបៀបបង្កើត Place holder animation ដោយប្រើជាមួយភាសា jquery។ Place holder animation នេះគឺគេពេញនិយមប្រើនៅក្នុង ទំរង់បញ្ចូលបញ្ចូលនិន្ន័យ ឬ អក្ស(Form input)។ ហើយក្នុងចំនុចនេះផងដែល Techfree នឹងធ្វើបញ្ចូលស្ទាយ Place holder នេះអោយមានចលនានឹងមានភាពទាកទាញជាងមុន នៅផ្នែកខាងក្រោម Techfree នឹងធ្វើការលើជាឩទាហរណ៍មកបង្ហាញជូនដូចខាងក្រោម៖។
សូមមើលវីដេអូខាងក្រោមដើម្បីស្វែងយល់ថាតើ placehoder style មានប្រភេទស្ទាយអ្វីខ្លះនោះ
]
- ឩទាហរណ៍ៈ ការចុចនៅលើ
+ បង្កើត File html => index.html រួចបញ្ចូលកូដដូចខាងក្រោម¶
- កូដផ្នែកខាង header
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
កូដផ្នែកខាងលើនេះគឺជាកូដដែលបានបូកបញ្ចូលជាមួយភាសា Boostrap នឹងប្រភេទស្ទាយចំនួន ១៥ ស្ទាយមកបញ្ហាញជួនលោកអ្នក។
+ បង្កើត File CSS=>common_style.css រួចបញ្ចូលកូដដូចខាងក្រោមៈ
កូដCSS ខាងលើគឺជារួមសំរាប់ធ្វើកំនត់ស្តាយលើ Form Input រូមទាំងអស់ក្នុង Index.html ខាងលើ
+ បង្កើត File CSS=>foxholder-styles.css រួចបញ្ចូលកូដដូចខាងក្រោមៈ
កូដ css ខាលើគឺជាកូដសំរាប់កំនត់ទៅលើស្ទាយតាមរយះ ID element របស់ CSS នឹងប្រភេទស្ទាយ ផ្សេងៗគ្នា។
+ បង្កើត File javascript=>script.js រួចបញ្ចូលកូដដូចខាងក្រោមៈ
សំរាប់កូដខាងលើនេះគឺជាកូដសំរាប់ធ្វើការផ្តល់តម្លៃសំរាប់រាប់ Form ស្ទាយមួយៗពេលដែលចុចលើ Input Form
+ បង្កើត File javascript=>foxholder.js រួចបញ្ចូលកូដដូចខាងក្រោមៈ
កូដខាងលើនេះគឺសំរាប់កំនត់លើស្ទាយនីមួយពេលដែលចុចលើ Form input នីមួយ ហើយវានឹងធ្វើការសិក្សាលើលក្ខខណ្ឌដែលបាន ផ្តល់អោយខាងលើនេះ។