មករា
ការបង្កើត Pop-up image នៅលើគេហទំព័រដោយប្រើប្រាស់ភាសា Jquery
មជ្ឈមណ្ឌលអាន-ANT http://training.antkh.com សូមណែនាំអំពីរបៀបបង្កើត pop-up image នៅលើគេហទំព័រ ដោយប្រើប្រាស់ Jquery និង Plug-in Jquery ។ ជាដំបូងសូមលោកអ្នកបង្កើ file និង folder ទៅតាមការណែនាំជាមុនសិន ៖ ១. បង្កើត folder មួយសម្រាប់ផ្ទុក File និង folder ទាំងអស់ ។ ២. សូមបង្កើត file HTML មួយដែលមានឈ្មោះថា index.html ។ ៣. បន្ទាប់មកសូមបង្កើត Folder ចំនួនបីទៀតនៅក្នុង Folder ដែលបានបង្កើតពីដំបូង ៖ - Folder CSS (សម្រាប់ដាក់file css) -Folder img (សម្រាប់ផ្ទុករូបភាព) -Folder js (សម្រាប់ផ្ទុក file Jquery និង plug-in Jquery) ។ សូមមើលរូបខាងក្រោម៖
បញ្ជាក់ ៖ ចំពោះ File Jquery និង Plug-in Jquery លោកអ្នកអាច download យក ពីគេហទំព័រ ANT ដោយផ្ទាល់ក៍បានដែរ ។
៤. បន្ទាប់ពីបាន download យក file Jquery និង plug-in Jquery រួចរាល់ហើយសូម Copy file ទាំងពីនោះទៅដាក់ក្នុង Folder js ដែលអ្នកបានបង្កើតរួចហើយ ។
៥. ជំហានបន្ទាប់សូមយករូបភាពដែលមានទម្រង់ជាប៊ូតុង បិទ (Close Button) ទៅដាក់ក្នុង Folder img ហើយដាក់ឈ្មោះថាpopup_close (.png) ដើម្បីទុកយកមកបង្កើតជាប៊ូតុងបិទ ។
៦. បន្ទាប់មកសូមបង្កើត File CSS (StyleSheet) មួយដោយដាក់ឈ្មោះថា jquery.popup.css ហើយទុកក្នុង Folder css ដើម្បីទុកហៅយកមកប្រើប្រាស់នៅពេលសរសេរកូដ ។
ការសរសេរកូដនៅក្នុងFile jquery.popup.css ៖
· សូមសរសេរកូដទាំងអស់នេះចូលទៅក្នុង file css ដែលមានឈ្មោះថា jquery.popup.css ដែលលោកអ្នកបានបង្កើតរួចហើយ ។
បញ្ជាក់ ៖ កូដដែលមានគូសរង្វង់ពណ៌ក្រហមព័ទជុំវិញ គឺជាកូដដែលទាញយករូបភាពប៊ូតុងបិទដែលមានឈ្មោះថា popup_close.png ដែលលោកអ្នកបានទុកនៅក្នុងFolder img ។
ការសរសេរកូដនៅក្នុង file index.html ៖
សូមសរសេរកូដខាងក្រោមនេះចូលក្នុងប្លុក <head> នៃ File index.html របស់លោកអ្នក
- កូដដែលមានគូសរង្វង់ពណ៌ក្រហមព័ទ្ឋជុំវិញជាកូដសម្រាប់ហៅ File Jquery.popup.css ដែលមាននៅក្នុង Folder CSS យកមកប្រើប្រាស់ ។
- កូដដែលមានគូសរង្វង់ពណ៌បៃតងព័ទ្ឋជុំវិញជាកូដសម្រាប់ហៅJquery ដែលមានឈ្មោះថា jquery-1.10.2.min.js ដែលមាននៅក្នុង
Folder js យកមកប្រើប្រាស់ ។
- កូដដែលមានគូសរង្វង់ពណ៌បៃខៀវព័ទ្ឋជុំវិញជាកូដសម្រាប់ហៅ plug-in Jquery ដែលមានឈ្មោះថា jquery.popup.js ដែលមាននៅក្នុង Folder js យកមកប្រើប្រាស់ ។
សូមសរសេរកូដខាងក្រោមនេះចូលក្នុងប្លុក <body> នៃ File index.html របស់លោកអ្នក
- កូដដែលបានគូសរង្វង់ពណ៌ក្រហមពទ័ជុំវិញនេះ គឺសម្រាប់បង្ហាញនូវ Content ដែលត្រូវ pop-up ហើយនៅលើcontent នោះលោកអ្នកអាច ដាក់ជារូបភាព ឬ អក្សរផ្សេងៗបានផងដែរ ។
♦ ជាចុងក្រោយយើងនឹងបានលទ្ធផលដូចខាងក្រោម គឺនៅពេលដែលយើងចុចទៅពាក្យ Click here វានឹងបង្ហាញ នូវផ្ទាំង popup នោះចេញមក ។ សូមមើលរូបខាងក្រោម៖
♦♦♦ រៀបរៀងអត្ថបទដោយ ៖ លោក ស្រីទិត្យសត្យា
♦♦♦ សម្រាប់ព័ត៌មានទំនាក់ទំនងមកយើងខ្ញុំ ៖ លេខទូរសព្ទ ០១០ / ០១៦ ៦៦៦ ៦៥៣
♦♦♦ សម្រាប់ព័ត៌មានវគ្គសិក្សាកុំព្យូទ័រនៅអាន-ANT http://training.antkh.com/
ឬអាចផ្ញើចូល e-mail: anttraining2013@gmail.com
ឬ Facebook: https://www.facebook.com/anttrainning
Facebook Page: ANT Magazine
Facebook Group: https://www.facebook.com/groups/ANTTrGroup/
website: www.antkh.com
មតិ និងយោបល់ទៅលើអត្ថបទនេះ (តាម Facebook)
ខាងក្រោមនេះជាយោបល់ផ្សេងៗរបស់អ្នកទស្សនា