ສ້າງເວບໄຊທ໌ເທິງມືຖືທີ່ມີ jQuery Mobile

ເນື້ອຫາ

• ວິທີການລະຫັດຫລາຍ ໜ້າ ໃນເອກະສານ HTML ດຽວ
• ລາຍລະອຽດ
• ວິທີການໃຊ້ກ່ອງໂຕ້ຕອບແລະການຫັນປ່ຽນ
• ການຫັນປ່ຽນທີ່ສາມາດໃຊ້ໄດ້
• ລາຍລະອຽດ
• ວິທີການສ້າງປຸ່ມ
• ລາຍລະອຽດ
• ວິທີການສ້າງແຖບ ນຳ ທາງ
• ວິທີການລະຫັດ HTML ສຳ ລັບແຖບ ນຳ ທາງ:
• ວິທີການຈັດຮູບແບບເນື້ອຫາກັບ jQuery Mobile
• ຮູບແບບເລີ່ມຕົ້ນທີ່ jQuery Mobile ໃຊ້
• ລາຍລະອຽດ
• ວິທີການ ນຳ ໃຊ້ຫົວຂໍ້ຕ່າງໆເຂົ້າໃນອົງປະກອບ HTML
• ສອງວິທີໃນການ ນຳ ໃຊ້ຫົວຂໍ້:
• ລາຍລະອຽດ
• ທັດສະນະ

ນີ້ແມ່ນບົດຄັດຫຍໍ້ດັດແກ້ຈາກບົດທີ 15 ຂອງ HTML5 ແລະ CSS3 ຂອງ Murach ໂດຍ Zak Ruvalcaba ແລະ Anne Boehm.

jQuery Mobile ແມ່ນຫ້ອງສະ ໝຸດ JavaScript ແບບເປີດທີ່ບໍ່ເສຍຄ່າ, ສາມາດ ນຳ ໃຊ້ໄດ້ເຊິ່ງທ່ານສາມາດ ນຳ ໃຊ້ໃນການພັດທະນາເວບໄຊທ໌ເທິງມືຖື. ຫໍສະ ໝຸດ ແຫ່ງນີ້ຊ່ວຍໃຫ້ທ່ານສ້າງ ໜ້າ ເວັບຕ່າງໆທີ່ເບິ່ງແລະຮູ້ສຶກຄືກັບ ໜ້າ ຕ່າງໆຂອງໂປແກຼມມືຖືພື້ນເມືອງ.

ເຖິງແມ່ນວ່າໃນປັດຈຸບັນ jQuery Mobile ສາມາດໃຊ້ໄດ້ເປັນລຸ້ນທົດລອງ, ແຕ່ຮຸ່ນນີ້ໄດ້ສະ ໜອງ ທຸກຢ່າງທີ່ທ່ານຕ້ອງການໃນການພັດທະນາເວບໄຊທ໌ມືຖືທີ່ດີເລີດ. ດັ່ງນັ້ນ, ທ່ານສາມາດເລີ່ມຕົ້ນໃຊ້ມັນໄດ້ທັນທີ. ທ່ານຍັງສາມາດຄາດຫວັງວ່າລຸ້ນນີ້ຈະໄດ້ຮັບການປັບປຸງຢ່າງຕໍ່ເນື່ອງ, ສະນັ້ນ jQuery Mobile ກໍ່ຈະດີຂື້ນເທົ່ານັ້ນ.

ໃນບົດຄວາມນີ້ທ່ານຈະໄດ້ຮຽນຮູ້ເຕັກນິກພື້ນຖານໃນການສ້າງ ໜ້າ ເວບໄຊທ໌ມືຖື. ນັ້ນຈະປະກອບມີການ ນຳ ໃຊ້ກ່ອງໂຕ້ຕອບ, ປຸ່ມແລະແຖບ ນຳ ທາງ.

ວິທີການລະຫັດຫລາຍ ໜ້າ ໃນເອກະສານ HTML ດຽວ

ກົງກັນຂ້າມກັບວິທີທີ່ທ່ານພັດທະນາເວບໄຊທ໌ ສຳ ລັບເວບໄຊທ໌ ໜ້າ ຈໍ, jQuery Mobile ຊ່ວຍໃຫ້ທ່ານສ້າງຫລາຍ ໜ້າ ໃນເອກະສານ HTML ດຽວ. ນີ້ແມ່ນສະແດງໂດຍຕົວເລກ 15-7. ນີ້, ທ່ານສາມາດເຫັນສອງ ໜ້າ ເວັບໄຊທ໌້ພ້ອມດ້ວຍ HTML ສຳ ລັບ ໜ້າ ເຫຼົ່ານີ້. ສິ່ງທີ່ ໜ້າ ແປກໃຈກໍ່ຄືວ່າທັງສອງ ໜ້າ ຖືກລະຫັດພາຍໃນເອກະສານ HTML ດຽວ.

ສຳ ລັບແຕ່ລະ ໜ້າ, ທ່ານໃສ່ລະຫັດ ໜຶ່ງ ສ່ວນທີ່ມີ“ ໜ້າ” ເປັນຄຸນຄ່າຂອງຄຸນລັກສະນະບົດບາດຂອງຂໍ້ມູນ. ຫຼັງຈາກນັ້ນ, ພາຍໃນແຕ່ລະອົງປະກອບ div ເຫຼົ່ານັ້ນ, ທ່ານໃຫ້ລະຫັດຫົວຂໍ້ div ສຳ ລັບແທັບຫົວ, ເນື້ອຫາແລະ footer ຂອງແຕ່ລະ ໜ້າ. ຕໍ່ມາ, ເມື່ອມີການໂຫລດເອກະສານ HTML, ໜ້າ ທຳ ອິດໃນຕົວຂອງເອກະສານຈະຖືກສະແດງ.

ເພື່ອເຊື່ອມໂຍງລະຫວ່າງ ໜ້າ ຕ່າງໆໃນເອກະສານ HTML, ທ່ານໃຊ້ສະຖານທີ່ບ່ອນທີ່ສະແດງຢູ່ໃນຮູບ 7-11 ຂອງບົດທີ 7. ຍົກຕົວຢ່າງ, ອົງປະກອບໃນ ໜ້າ ທຳ ອິດໃນຕົວຢ່າງນີ້ໄປທີ່“ #toobin” ເມື່ອຜູ້ໃຊ້ແຕະ h2 ຫຼື img ອົງປະກອບທີ່ຖືກລະຫັດເປັນເນື້ອຫາ ສຳ ລັບລິ້ງນີ້. ນີ້ ໝາຍ ເຖິງສ່ວນປະກອບ div ກັບ "toobin" ເປັນຄຸນລັກສະນະ id ຂອງມັນ, ຊຶ່ງ ໝາຍ ຄວາມວ່າການເຊື່ອມໂຍງການເຊື່ອມຕໍ່ຈະພາຜູ້ອ່ານໄປຫາ ໜ້າ ທີສອງໃນເອກະສານ.

ເຖິງແມ່ນວ່າຕົວຢ່າງນີ້ສະແດງໃຫ້ເຫັນພຽງສອງ ໜ້າ, ທ່ານສາມາດໃສ່ລະຫັດຫລາຍໆ ໜ້າ ພາຍໃນເອກະສານ HTML ດຽວ. ເຖິງຢ່າງໃດກໍ່ຕາມຈົ່ງຈື່ໄວ້ວ່າທຸກໆ ໜ້າ ທີ່ພ້ອມດ້ວຍຮູບພາບ, ເອກະສານ JavaScript ແລະ CSS ຂອງພວກມັນຖືກໂຫລດດ້ວຍເອກະສານ HTML ດຽວ. ດັ່ງນັ້ນ, ເວລາໂຫຼດຈະກາຍເປັນຫຼາຍເກີນໄປຖ້າທ່ານເກັບຫຼາຍ ໜ້າ ຫລາຍເກີນໄປໃນເອກະສານດຽວ. ເມື່ອເປັນແນວນັ້ນ, ທ່ານສາມາດແບ່ງ ໜ້າ ເວັບຂອງທ່ານອອກເປັນເອກະສານ HTML ຫຼາຍກ່ວາ ໜຶ່ງ ແຜ່ນ.

HTML ສຳ ລັບທັງສອງ ໜ້າ ໃນເນື້ອໃນຂອງເອກະສານ HTML ໜຶ່ງ:

div data-role = "page"> header data-role = "header"> h1> SJV Town Hall / h1> / header> section data-role = "content"> h3> ລຳ ໂພງປີ 2011-2012 / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> ວັນທີ 19 ເດືອນຕຸລາປີ 2011 / h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>! - ສິ່ງທີ່ຕ້ອງການ ສຳ ລັບນັກຂ່າວ - -> / ສ່ວນ> footer data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "page" id = "toobin"> ຫົວຂໍ້ຂໍ້ມູນ-role = "header"> h1> SJV Town Hall / h1> / header> section data-role = "content"> h3> ຍອດນິຍົມສູງສຸດ: br> ລັບລັບ Black Robed / h3> img src = "images / toobin_court.cnn.webp" alt = "Jeffrey Toobin "> p> ຜູ້ຂຽນຂອງຜູ້ຂາຍດີທີ່ສຸດທີ່ມີຊື່ສຽງ, ຂ້ອຍ> Nine:! - The COPY CONTINUES -> / section> footer data-role =" footer "> h4> © 2011 / h4> / footer> div>

ລາຍລະອຽດ

• ເມື່ອທ່ານໃຊ້ jQuery Mobile, ທ່ານບໍ່ ຈຳ ເປັນຕ້ອງພັດທະນາເອກະສານ HTML ແຍກຕ່າງຫາກ ສຳ ລັບແຕ່ລະ ໜ້າ. ແທນທີ່ຈະ, ພາຍໃນອົງປະກອບຂອງຮ່າງກາຍຂອງເອກະສານ HTML ດຽວ, ທ່ານຕັ້ງລະຫັດ ໜຶ່ງ ອົງປະກອບ ສຳ ລັບແຕ່ລະ ໜ້າ ທີ່ມີຄຸນລັກສະນະພາລະບົດບາດຂອງຂໍ້ມູນທີ່ຖືກ ກຳ ນົດໄວ້ໃນ“ ໜ້າ”.
• ສຳ ລັບແຕ່ລະອົງປະກອບ div, ທ່ານ ກຳ ນົດຄຸນລັກສະນະ id ໃຫ້ກັບມູນຄ່າຂອງສະຖານທີ່ທີ່ສາມາດເຂົ້າເຖິງໄດ້ໂດຍຄຸນລັກສະນະ href ໃນ ໜ້າ> ອົງປະກອບຂອງ ໜ້າ ອື່ນໆ.

ວິທີການໃຊ້ກ່ອງໂຕ້ຕອບແລະການຫັນປ່ຽນ

ຮູບທີ 15-8 ສະແດງວິທີການສ້າງກ່ອງໂຕ້ຕອບທີ່ເປີດເມື່ອເຊື່ອມຕໍ່ຖືກແຕະ. ເພື່ອເຮັດສິ່ງນັ້ນ, ທ່ານໃຫ້ລະຫັດກ່ອງໂຕ້ຕອບຄືກັນກັບທີ່ທ່ານຈະໃສ່ ໜ້າ ໃດ ໜຶ່ງ. ແຕ່ຢູ່ໃນອົງປະກອບ> ທີ່ໄປຫາ ໜ້າ ນັ້ນ, ທ່ານໃສ່ລະຫັດຄຸນລັກສະນະທີ່ກ່ຽວຂ້ອງກັບຂໍ້ມູນທີ່ມີ "ເອກະສານອ້າງອີງ" ເປັນມູນຄ່າຂອງມັນ.

ດັ່ງທີ່ຕົວຢ່າງໃນຕົວເລກນີ້ສະແດງໃຫ້ເຫັນ, jQuery Mobile CSS file file ກ່ອງໂຕ້ຕອບແຕກຕ່າງຈາກ ໜ້າ ເວັບ ທຳ ມະດາ. ໂດຍຄ່າເລີ່ມຕົ້ນ, ກ່ອງໂຕ້ຕອບຈະມີພື້ນຫລັງທີ່ມືດມົວກັບຂໍ້ຄວາມດ້ານ ໜ້າ ຂອງສີຂາວ, ແລະສ່ວນຫົວແລະ footer ຈະບໍ່ກວ້າງຄວາມກວ້າງຂອງ ໜ້າ. ກ່ອງໂຕ້ຕອບຈະມີ "X" ຢູ່ໃນຫົວທີ່ຜູ້ໃຊ້ຕ້ອງແຕະເພື່ອກັບໄປ ໜ້າ ກ່ອນ ໜ້າ ນີ້.

ເມື່ອທ່ານຂຽນລະຫັດ> ອົງປະກອບທີ່ໄປຫາ ໜ້າ ອື່ນຫຼືກ່ອງໂຕ້ຕອບ, ທ່ານຍັງສາມາດໃຊ້ຄຸນລັກສະນະການປ່ຽນຂໍ້ມູນເພື່ອ ກຳ ນົດ ໜຶ່ງ ໃນຫົກການຫັນປ່ຽນທີ່ສະຫຼຸບຢູ່ໃນຕາຕະລາງໃນຮູບນີ້. ແຕ່ລະການຫັນປ່ຽນເຫຼົ່ານີ້ແມ່ນ ໝາຍ ເຖິງການກະຕຸ້ນປະສິດຕິຜົນທີ່ອຸປະກອນມືຖືຄືກັບ iPhone ໃຊ້.

ການຫັນປ່ຽນທີ່ສາມາດໃຊ້ໄດ້

HTML ທີ່ເປີດ ໜ້າ ເປັນກ່ອງໂຕ້ຕອບກັບການປ່ຽນ“ pop”:

a href = "# toobin" data-rel = "dialog" data-transition = "pop">

HTML ທີ່ເປີດ ໜ້າ ເວັບດ້ວຍການປ່ຽນແປງ "ຈາງຫາຍໄປ":

a href = "# toobin" data-transition = "ມະລາຍຫາຍໄປ">

ລາຍລະອຽດ

• HTML ສຳ ລັບ a ກ່ອງໂຕ້ຕອບ ຖືກລະຫັດແບບວິທີທີ່ ໜ້າ ໃດ ໜຶ່ງ ຖືກລະຫັດ. ເຖິງຢ່າງໃດກໍ່ຕາມ,> ອົງປະກອບທີ່ເຊື່ອມໂຍງກັບ ໜ້າ ເວັບລວມມີຄຸນລັກສະນະທີ່ກ່ຽວຂ້ອງກັບຂໍ້ມູນກັບ "ໂຕ້ຕອບ" ເປັນຄ່າຂອງມັນ. ເພື່ອປິດກ່ອງໂຕ້ຕອບ, ຜູ້ໃຊ້ປາດ X ຢູ່ໃນຫົວຂອງປ່ອງ.
• ເພື່ອ ກຳ ນົດວິທີການທີ່ ໜ້າ ເວັບຫລືກ່ອງໂຕ້ຕອບຖືກເປີດ, ທ່ານສາມາດໃຊ້ຄຸນລັກສະນະການປ່ຽນແປງຂອງຂໍ້ມູນດ້ວຍຄຸນຄ່າ ໜຶ່ງ ໃນຕາຕະລາງຂ້າງເທິງ. ຖ້າອຸປະກອນໃດ ໜຶ່ງ ບໍ່ຮອງຮັບການປ່ຽນທີ່ທ່ານລະບຸ, ຄຸນລັກສະນະຈະຖືກລະເລີຍ.
• ຮູບແບບ ສຳ ລັບກ່ອງໂຕ້ຕອບແມ່ນເຮັດໂດຍເອກະສານ jQuery Mobile CSS.

ວິທີການສ້າງປຸ່ມ

ຮູບທີ 15-9 ສະແດງວິທີການໃຊ້ປຸ່ມຕ່າງໆເພື່ອ ນຳ ທາງຈາກ ໜ້າ ໜຶ່ງ ໄປຫາອີກ ໜ້າ ໜຶ່ງ. ເພື່ອເຮັດສິ່ງນັ້ນ, ທ່ານພຽງແຕ່ ກຳ ນົດຄຸນລັກສະນະດ້ານພາລະບົດບາດ ສຳ ລັບອົງປະກອບ> ປຸ່ມ, ແລະ jQuery Mobile ເຮັດສ່ວນທີ່ເຫຼືອ.
ເຖິງຢ່າງໃດກໍ່ຕາມ, ທ່ານຍັງສາມາດ ກຳ ນົດຄຸນລັກສະນະອື່ນໆ ສຳ ລັບປຸ່ມ. ຖ້າຕົວຢ່າງ, ທ່ານຕ້ອງການໃຫ້ປຸ່ມສອງຫລືຫຼາຍປຸ່ມປະກົດຢູ່ຂ້າງໆ, ຄ້າຍຄືປຸ່ມສອງອັນ ທຳ ອິດໃນຕົວເລກນີ້, ທ່ານສາມາດ ກຳ ນົດຄຸນລັກສະນະຂອງຂໍ້ມູນໃນເສັ້ນເປັນ "ຄວາມຈິງ".

ຖ້າທ່ານຕ້ອງການເພີ່ມ ໜຶ່ງ ໃນ 18 ຮູບສັນຍາລັກທີ່ໃຫ້ໂດຍ jQuery Mobile ໃສ່ປຸ່ມ, ທ່ານກໍ່ໃສ່ລະຫັດຄຸນລັກສະນະຂອງຂໍ້ມູນ - icon. ຍົກຕົວຢ່າງ, ປຸ່ມທີສາມໃນຕົວຢ່າງນີ້ໃຊ້ໄອຄອນ“ ລຶບ”, ແລະປຸ່ມທີ່ສີ່ໃຊ້ປຸ່ມ“ ບ້ານ”. ຮູບສັນຍາລັກທັງ ໝົດ ນີ້ຄ້າຍຄືກັບໄອຄອນທີ່ທ່ານອາດຈະເຫັນພາຍໃນແອັບພລິເຄຊັນເທິງມືຖື. ໂດຍບັງເອີນ, ຮູບສັນຍາລັກເຫຼົ່ານີ້ບໍ່ແມ່ນເອກະສານແຍກຕ່າງຫາກທີ່ ໜ້າ ເວັບຕ້ອງເຂົ້າເຖິງ. ແທນທີ່ຈະ, ພວກມັນຖືກຈັດຫາໂດຍຫ້ອງສະຫມຸດ jQuery Mobile.

ຖ້າທ່ານຕ້ອງການຈັດກຸ່ມສອງຫລືຫຼາຍປຸ່ມຕັ້ງຢຽດຕາມທາງຂວາງ, ເຊັ່ນປຸ່ມ Yes, No ແລະບາງທີຢູ່ໃນຕົວເລກນີ້, ທ່ານສາມາດໃສ່ລະຫັດປຸ່ມ> ອົງປະກອບ ສຳ ລັບປຸ່ມຕ່າງໆພາຍໃນ div div ເຊິ່ງມີ "controlgroup" ເປັນຄຸນລັກສະນະພາລະບົດບາດຂອງຂໍ້ມູນແລະ "ອອກຕາມລວງນອນ" ເປັນຄຸນລັກສະນະປະເພດຂໍ້ມູນຂອງມັນ. ຫຼື, ເພື່ອຈັດກຸ່ມປຸ່ມແນວຕັ້ງ, ທ່ານສາມາດປ່ຽນຄຸນລັກສະນະຂອງຂໍ້ມູນເປັນ“ ແນວຕັ້ງ”.

ຖ້າທ່ານ ກຳ ນົດຄຸນລັກສະນະທີ່ກ່ຽວຂ້ອງກັບຂໍ້ມູນ ສຳ ລັບປຸ່ມເພື່ອ“ ກັບຄືນ” ແລະ href attribute ກັບສັນຍາລັກ pound (#), ປຸ່ມຈະກັບໄປ ໜ້າ ທີ່ເອີ້ນມັນ. ໃນຄໍາສັບຕ່າງໆອື່ນໆ, ປຸ່ມເຮັດວຽກຄ້າຍຄືປຸ່ມ Back. ນີ້ແມ່ນສະແດງໂດຍປຸ່ມສຸດທ້າຍໃນເນື້ອຫາ ສຳ ລັບ ໜ້າ ເວັບ.

ສອງປຸ່ມສຸດທ້າຍສະແດງໃຫ້ເຫັນວ່າປຸ່ມຕ່າງໆຈະປາກົດຢູ່ໃນ footer ສຳ ລັບ ໜ້າ ໃດ ໜຶ່ງ. ທີ່ນີ້, ຮູບສັນຍາລັກແລະຂໍ້ຄວາມແມ່ນຂາວທຽບກັບພື້ນຫລັງສີ ດຳ. ໃນກໍລະນີນີ້, ຄຸນລັກສະນະຂອງຊັ້ນ ສຳ ລັບ footer ແມ່ນຖືກຕັ້ງເປັນ“ ui-bar”, ເຊິ່ງບອກກັບ jQuery Mobile ວ່າມັນຄວນຈະວາງພື້ນທີ່ນ້ອຍກວ່າເນື້ອໃນຂອງ footer. ທ່ານຈະຮຽນຮູ້ເພີ່ມເຕີມກ່ຽວກັບເລື່ອງນັ້ນໃນຮູບ 15-12.

HTML ສຳ ລັບປຸ່ມຕ່າງໆໃນສ່ວນ:

! - ສຳ ລັບປຸ່ມໃນເສັ້ນ, ກຳ ນົດຄຸນລັກສະນະຂອງເສັ້ນຂໍ້ມູນ -> href = "#" data-role = "ປຸ່ມ" data-inline = "true"> ຍົກເລີກ / a> href = "#" ຂໍ້ມູນ -role = "ປຸ່ມ" data-inline = "true"> OK / a>! - ເພື່ອເພີ່ມຮູບສັນຍາລັກໃສ່ປຸ່ມ, ໃຫ້ໃຊ້ຄຸນລັກສະນະຂອງຂໍ້ມູນ - icon -> href = "#" data-role = "ປຸ່ມ "data-icon =" Delete "> ລຶບ / a> a href =" # "data-role =" ປຸ່ມ "data-icon =" home "> ໜ້າ ທຳ ອິດ / a>! - ເພື່ອປຸ່ມປຸ່ມກຸ່ມ, ໃຊ້ div div ກັບ ຄຸນລັກສະນະຕ່າງໆທີ່ຕາມມາ -> div data-role = "controlgroup" data-type = "ອອກຕາມລວງນອນ"> href = "#" data-role = "ປຸ່ມ" data-icon = "check"> ແມ່ນ / a> href = "#" data-role = "ປຸ່ມ" data-icon = "arrow-d"> ບໍ່ມີ / a> href = "#" data-role = "ປຸ່ມ"> ບາງທີ / a> / div>! - ລະຫັດປຸ່ມ Back, ກຳ ນົດຄຸນລັກສະນະຂອງຂໍ້ມູນກັບຄືນໄປບ່ອນ -> href = "#" data-role = "ປຸ່ມ" dat-rel = "back" data-icon = "back"> ກັບໄປ ໜ້າ ກ່ອນ ໜ້າ ນີ້ / a >

HTML ສຳ ລັບປຸ່ມຕ່າງໆໃນ footer:

footer data-role = "footer"> a href = "http://www.facebook.com" data-role = "ປຸ່ມ" data-icon = "ບວກ"> ຕື່ມໃສ່ເຟສບຸກ / a> href = "http: www.twitter.com "data-role =" ປຸ່ມ "data-icon =" ບວກ "> Tweet ໜ້າ ນີ້ / a> / footer>

ລາຍລະອຽດ

• ເພື່ອເພີ່ມປຸ່ມເຂົ້າໃນ ໜ້າ ເວບໄຊທ໌, ທ່ານໃສ່ລະຫັດ> ອົງປະກອບທີ່ມີຄຸນລັກສະນະພາລະບົດບາດຂອງຂໍ້ມູນຂອງມັນໃສ່ປຸ່ມ.

ວິທີການສ້າງແຖບ ນຳ ທາງ

ຮູບທີ 15-10 ສະແດງວິທີທີ່ທ່ານສາມາດເພີ່ມແຖບທິດທາງໃນ ໜ້າ ເວັບ. ເພື່ອເຮັດສິ່ງນັ້ນ, ທ່ານໃຫ້ລະຫັດສ່ວນປະກອບ div ທີ່ມີພາລະບົດບາດຂໍ້ມູນຂອງມັນໃສ່ "navbar". ພາຍໃນອົງປະກອບນີ້, ທ່ານໃສ່ລະຫັດອົງປະກອບ ul ເຊິ່ງປະກອບມີອົງປະກອບທີ່ມີສ່ວນປະກອບ> ສຳ ລັບລາຍການທີ່ຢູ່ໃນແຖບ ນຳ ທາງ. ເຖິງຢ່າງໃດກໍ່ຕາມໃຫ້ສັງເກດວ່າທ່ານບໍ່ລະຫັດຄຸນລັກສະນະບົດບາດຂອງຂໍ້ມູນ ສຳ ລັບອົງປະກອບ>.

ເພື່ອປ່ຽນສີ ສຳ ລັບສິ່ງຕ່າງໆໃນແຖບ ນຳ ທາງ, ລະຫັດໃນຕົວຢ່າງນີ້ລວມມີຄຸນລັກສະນະຂອງຂໍ້ມູນ - ຫົວຂໍ້ - b ສຳ ລັບແຕ່ລະລາຍການ. ດັ່ງນັ້ນ, jQuery Mobile ປ່ຽນສີພື້ນຫລັງຂອງແຕ່ລະລາຍການຈາກສີ ດຳ, ເຊິ່ງເປັນຄ່າເລີ່ມຕົ້ນ, ເປັນສີຟ້າທີ່ ໜ້າ ສົນໃຈ. ນອກຈາກນັ້ນ, ລະຫັດນີ້ ກຳ ນົດຄຸນລັກສະນະຂອງປຸ່ມ ສຳ ລັບປຸ່ມທີ່ໃຊ້ງານເພື່ອ“ ui-btn-active” ດັ່ງນັ້ນ jQuery Mobile ປ່ຽນສີ ສຳ ລັບປຸ່ມທີ່ໃຊ້ງານເປັນສີຟ້າອ່ອນກວ່າ. ນີ້ສະແດງວິທີທີ່ທ່ານສາມາດປ່ຽນຮູບແບບທີ່ໃຊ້ໂດຍ jQuery Mobile, ແລະທ່ານຈະຮຽນຮູ້ເພີ່ມເຕີມກ່ຽວກັບສິ່ງນັ້ນຕໍ່ໄປ.

HTML ສຳ ລັບແຖບ ນຳ ທາງ:

header data-role = "header"> h1> SJV Town Hall / h1> div data-role = "navbar"> ul> li> a href = "# ບ້ານ" data-icon = "ບ້ານ" data-theme = "b "> ໜ້າ ທຳ ອິດ / a> / li> li> href =" # ລຳ ໂພງ # "data-icon =" ດາວ "data-theme =" b "> ລຳ ໂພງ / a> / li> li> href =" # contactus data- icon = "grid" data-theme = "b"> ຕິດຕໍ່ພວກເຮົາ / a> / li> / ul> / div> / header>

ວິທີການລະຫັດ HTML ສຳ ລັບແຖບ ນຳ ທາງ:

• ໃສ່ລະຫັດ div ອົງປະກອບພາຍໃນ header element. ຈາກນັ້ນ, ໃຫ້ ກຳ ນົດຄຸນລັກສະນະການສະແດງຂໍ້ມູນ - ພາລະບົດບາດ ສຳ ລັບ div element ເພື່ອ "navbar".
• ພາຍໃນ div div, ໃສ່ລະຫັດ ul ອົງປະກອບ ໜຶ່ງ ທີ່ມີສ່ວນປະກອບ ໜຶ່ງ Li ສຳ ລັບແຕ່ລະ link.
• ພາຍໃນແຕ່ລະອົງປະກອບ, ລະຫັດ a> element ທີ່ມີ href attribute ທີ່ໃຊ້ສະຖານທີ່ ສຳ ລັບ ໜ້າ ທີ່ລິ້ງຄວນໄປຫາ. ຈາກນັ້ນ, ກຳ ນົດຄຸນລັກສະນະຂອງຂໍ້ມູນ - ຂ່າວສານໃຫ້ກັບຮູບສັນຍາລັກຂອງການເລືອກຂອງທ່ານ.
• ສຳ ລັບສິນຄ້າທີ່ມີການເຄື່ອນໄຫວຢູ່ໃນແຖບ ນຳ ທາງ, ກຳ ນົດຄຸນລັກສະນະຂອງຊັ້ນຮຽນໃຫ້“ ui-btn-active”.ຈາກນັ້ນ, ສີຂອງລາຍການນີ້ຈະອ່ອນກວ່າຂອງລາຍການອື່ນໆໃນແຖບ ນຳ ທາງ.
• ທ່ານກໍ່ຄວນ ນຳ ໃຊ້ຄຸນລັກສະນະຂອງຫົວຂໍ້ຂໍ້ມູນເພື່ອ ນຳ ໃຊ້ຫົວຂໍ້ມືຖື jQuery ສຳ ລັບແຕ່ລະລາຍການໃນແຖບ ນຳ ທາງ. ຖ້າບໍ່ດັ່ງນັ້ນ, ປຸ່ມໃນແຖບຈະເປັນສີດຽວກັນກັບສ່ວນທີ່ເຫຼືອຂອງສ່ວນຫົວ. ເພື່ອຮຽນຮູ້ເພີ່ມເຕີມກ່ຽວກັບການ ນຳ ໃຊ້ຫົວຂໍ້, ເບິ່ງຮູບ 15-12.

ວິທີການຈັດຮູບແບບເນື້ອຫາກັບ jQuery Mobile

ດັ່ງທີ່ທ່ານໄດ້ເຫັນມາແລ້ວ, jQuery Mobile ຈັດຮູບແບບສ່ວນປະກອບຂອງ ໜ້າ ເວັບໂດຍອັດຕະໂນມັດໂດຍອີງໃສ່ເອກະສານສະໄຕຂອງຕົວເອງ. ດຽວນີ້, ທ່ານຈະຮຽນຮູ້ເພີ່ມເຕີມກ່ຽວກັບເລື່ອງນີ້, ພ້ອມທັງວິທີການປັບຮູບແບບເດີມໆທີ່ jQuery Mobile ໃຊ້.

ຮູບແບບເລີ່ມຕົ້ນທີ່ jQuery Mobile ໃຊ້

ຮູບ 15-13 ສະແດງຮູບແບບເລີ່ມຕົ້ນທີ່ jQuery Mobile ໃຊ້ ສຳ ລັບສ່ວນປະກອບ HTML ທົ່ວໄປ. ສຳ ລັບຮູບແບບທັງ ໝົດ ຂອງມັນ, jQuery Mobile ແມ່ນຂື້ນກັບເຄື່ອງຈັກໃນການເຮັດວຽກຂອງຕົວທ່ອງເວັບດັ່ງນັ້ນຮູບແບບຂອງຕົວມັນເອງແມ່ນມີ ໜ້ອຍ ທີ່ສຸດ. ນີ້ເຮັດໃຫ້ເວລາໂຫຼດໄດ້ໄວແລະຫຼຸດຜ່ອນສ່ວນລວມທີ່ວ່າ CSS ຫຼາຍເກີນໄປຈະບັງຄັບໃຊ້ໃນ ໜ້າ ໃດ ໜຶ່ງ.

ຕາມທີ່ທ່ານເຫັນ, ແບບຂອງ jQuery Mobile ມີປະສິດຕິພາບດີທີ່ທ່ານບໍ່ ຈຳ ເປັນຕ້ອງດັດແປງຮູບແບບຂອງມັນໂດຍການສະ ໜອງ ເອກະສານສະໄຕ CSS ຂອງທ່ານເອງ. ຍົກຕົວຢ່າງ, ຊ່ອງຫວ່າງລະຫວ່າງສິນຄ້າໃນບັນຊີທີ່ບໍ່ມີຂອບເຂດແລະການຈັດຮູບແບບຂອງຕາຕະລາງແມ່ນທັງສອງແບບທີ່ຍອມຮັບໄດ້. ນອກຈາກນີ້, ປະເພດສີດໍາໃນພື້ນຫລັງສີຂີ້ເຖົ່າແມ່ນສອດຄ່ອງກັບການຈັດຮູບແບບ ສຳ ລັບແອັບພລິເຄຊັນມືຖືພື້ນເມືອງ.

ລາຍລະອຽດ

• ໂດຍຄ່າເລີ່ມຕົ້ນ, jQuery Mobile ໃຊ້ຮູບແບບອັດຕະໂນມັດກັບອົງປະກອບ HTML ສຳ ລັບ ໜ້າ ໃດ ໜຶ່ງ. ຮູບແບບເຫລົ່ານີ້ບໍ່ພຽງແຕ່ດຶງດູດໃຈເທົ່ານັ້ນ, ແຕ່ຍັງເຮັດຕາມແບບພື້ນເມືອງຂອງຕົວທ່ອງເວັບ ນຳ ອີກ.
• ໂດຍຄ່າເລີ່ມຕົ້ນ, jQuery Mobile ນຳ ໃຊ້ແຜ່ນຮອງຢູ່ເບື້ອງຊ້າຍ, ຂວາ, ດ້ານເທິງແລະດ້ານລຸ່ມຂອງແຕ່ລະ ໜ້າ ມືຖື.
• ໂດຍຄ່າເລີ່ມຕົ້ນ, ລິ້ງມີຂະ ໜາດ ໃຫຍ່ກ່ວາຂໍ້ຄວາມ ທຳ ມະດາ. ນີ້ເຮັດໃຫ້ຜູ້ໃຊ້ສາມາດແຕະລິງໄດ້ງ່າຍຂຶ້ນ.
• ໂດຍຄ່າເລີ່ມຕົ້ນ, ການເຊື່ອມຕໍ່ຖືກຂີດກ້ອງເປັນສີຟ້າເປັນສີຕົວອັກສອນ.

ວິທີການ ນຳ ໃຊ້ຫົວຂໍ້ຕ່າງໆເຂົ້າໃນອົງປະກອບ HTML

ໃນບາງກໍລະນີ, ທ່ານຈະຕ້ອງການປ່ຽນຮູບແບບເດີມໆທີ່ jQuery Mobile ໃຊ້. ທ່ານໄດ້ເຫັນແລ້ວໃນແຖບ ນຳ ທາງຂອງຮູບ 15-10. ເພື່ອປ່ຽນຮູບແບບແບບເລີ່ມຕົ້ນ, ທ່ານສາມາດໃຊ້ 5 ຫົວຂໍ້ທີ່ jQuery Mobile ໃຫ້. ສິ່ງເຫຼົ່ານີ້ແມ່ນສະຫຼຸບໃນຮູບ 15-12. ນີ້ອີກເທື່ອ ໜຶ່ງ, ຫົວຂໍ້ເຫຼົ່ານີ້ມີຄວາມ ໝາຍ ເພື່ອເຮັດຕາມຮູບລັກສະນະຂອງໂປແກຼມມືຖືພື້ນເມືອງ.

ວິທີ ໜຶ່ງ ໃນການ ນຳ ໃຊ້ຫົວຂໍ້ແມ່ນການລະຫັດຄຸນລັກສະນະຂອງຫົວຂໍ້ຂໍ້ມູນທີ່ມີຕົວ ໜັງ ສືເປັນຄຸນຄ່າຂອງມັນ. ທ່ານໄດ້ເຫັນສິ່ງນີ້ຢູ່ໃນແຖບ ນຳ ທາງໃນຮູບ 15-10, ແລະທ່ານສາມາດເຫັນສິ່ງນີ້ຢູ່ໃນລະຫັດ ສຳ ລັບແຖບ ນຳ ທາງທີສອງໃນຮູບນີ້. ທີ່ນີ້, ຄຸນລັກສະນະຂອງຫົວຂໍ້ຂໍ້ມູນແມ່ນໃຊ້ຫົວຂໍ້“ e” ໃສ່ຫົວຂໍ້ແລະຫົວຂໍ້“ d” ຕໍ່ລາຍການທີ່ຢູ່ໃນແຖບນໍາທາງ.

ອີກວິທີ ໜຶ່ງ ທີ່ຈະ ນຳ ໃຊ້ຫົວຂໍ້ແມ່ນການ ກຳ ນົດຄຸນລັກສະນະຂອງຊັ້ນ ສຳ ລັບອົງປະກອບໃດ ໜຶ່ງ ຕໍ່ຊື່ຂອງຊັ້ນທີ່ສະແດງຫົວຂໍ້. ນີ້ແມ່ນຕົວຢ່າງໂດຍຕົວຢ່າງ ທຳ ອິດຫຼັງຈາກຕາຕະລາງ. ໃນນີ້, ຄຸນລັກສະນະຂອງຊັ້ນຮຽນແມ່ນໃຊ້ເພື່ອ ນຳ ໃຊ້ທັງ“ ui-bar” ແລະ“ ui-bar-b” ກັບອົງປະກອບ div. ດ້ວຍເຫດນັ້ນ, jQuery Mobile ທຳ ອິດ ນຳ ໃຊ້ຮູບແບບເດີມຂອງມັນ ສຳ ລັບແຖບຕໍ່ອົງປະກອບແລະຫຼັງຈາກນັ້ນ ນຳ ໃຊ້ຫົວຂໍ້ b ກັບຄໍເຕົ້າໄຂ່ນັ້ນ. ໃນ ໜ້າ ທີ່ຕິດຕາມ, ທ່ານຈະເຫັນຕົວຢ່າງອື່ນໆຂອງຮູບແບບນີ້.

ກະລຸນາຮັບຊາບວ່າຕາຕະລາງໃນຮູບນີ້ບອກວ່າຈະໃຊ້ຫົວຂໍ້ອີເລັກໂທຣນິກ. ນັ້ນແມ່ນຍ້ອນວ່າມັນໃຊ້ສີສົ້ມທີ່ເຮັດວຽກໄດ້ດີ ສຳ ລັບການອອກສຽງ, ແຕ່ບໍ່ ໜ້າ ສົນໃຈໃນຂະ ໜາດ ໃຫຍ່. ນີ້ແມ່ນສະແດງໃຫ້ເຫັນໂດຍຫົວທີສອງແລະແຖບ ນຳ ທາງໃນຮູບນີ້, ເຊິ່ງມັກຈະເຮັດໃຫ້ທ່ານໂລ່ງໃຈເມື່ອທ່ານເຫັນມັນເປັນສີ.

ໂດຍທົ່ວໄປ, ມັນດີທີ່ສຸດທີ່ຈະຢູ່ກັບຮູບແບບເດີມແລະສາມຫົວຂໍ້ ທຳ ອິດ, ເຊິ່ງມັກຈະເຮັດວຽກຮ່ວມກັນໄດ້ດີ. ຈາກນັ້ນ, ທ່ານສາມາດທົດລອງໃຊ້ຫົວຂໍ້ d ແລະ e ເມື່ອທ່ານຄິດວ່າທ່ານຕ້ອງການຫຍັງອີກ.

HTML ສຳ ລັບຫົວຂໍ້ທີສອງແລະແຖບ ນຳ ທາງ:

header data-role = "header" data-theme = "e"> h1> SJV Town Hall / h1> div data-role = "navbar"> ul> li> a href = "# ບ້ານ" data-icon = "ບ້ານ "data-theme =" d "> ໜ້າ ທຳ ອິດ / a> / li> li> href =" # ລຳ ໂພງ "data-icon =" ດາວ "data-theme =" d "> ລຳ ໂພງ / a> / li> a> href = "# ຂ່າວ" id = "news" data-icon = "grid" data-theme = "d"> ຂ່າວ / a> / li> / ul> / div> / header>

ຫ້າຫົວຂໍ້ jQuery Mobile:

ສອງວິທີໃນການ ນຳ ໃຊ້ຫົວຂໍ້:

ໂດຍການ ນຳ ໃຊ້ຄຸນລັກສະນະດ້ານຫົວຂໍ້ຂໍ້ມູນ:

li> a href = "# ບ້ານ" data-icon = "ບ້ານ" data-theme = "b"> ໜ້າ ບ້ານ / a> / li>

ໂດຍການ ນຳ ໃຊ້ຄຸນລັກສະນະຂອງຊັ້ນຮຽນທີ່ບົ່ງບອກຫົວຂໍ້:

div> ບາ / div>

ລາຍລະອຽດ

• ໂດຍການ ນຳ ໃຊ້ 5 ຫົວຂໍ້ທີ່ປະກອບເຂົ້າກັບ jQuery Mobile, ທ່ານສາມາດປັບຕົວທີ່ ເໝາະ ສົມກັບຮູບແບບຕ່າງໆ ສຳ ລັບອົງປະກອບ HTML.
• ເຖິງແມ່ນວ່າທ່ານສາມາດໃຊ້ເອກະສານສະໄຕ CSS ຂອງທ່ານເອງດ້ວຍໂປແກມ jQuery Mobile, ທ່ານຄວນຫລີກລ້ຽງຈາກການເຮັດແບບນັ້ນທຸກຄັ້ງທີ່ເປັນໄປໄດ້.

ທັດສະນະ

ການ ນຳ ໃຊ້ອຸປະກອນມືຖືໄດ້ເພີ່ມຂື້ນຢ່າງຫຼວງຫຼາຍໃນຊຸມປີທີ່ຜ່ານມາ. ຍ້ອນສິ່ງນັ້ນ, ມັນໄດ້ກາຍເປັນສິ່ງ ສຳ ຄັນເພີ່ມຂື້ນໃນການອອກແບບເວບໄຊທ໌ທີ່ໃຊ້ງ່າຍຈາກອຸປະກອນເຫຼົ່ານີ້. ເຖິງແມ່ນວ່ານັ້ນມັກຈະ ໝາຍ ເຖິງການພັດທະນາເວບໄຊທ໌ແຍກຕ່າງຫາກ, ນີ້ສາມາດເປັນລັກສະນະ ສຳ ຄັນຂອງການຮັກສາການມີຂອງທ່ານໃນອິນເຕີເນັດ.

ໂຊກດີ, ວຽກງານສ້າງເວັບໄຊທ໌ເທິງມືຖືໄດ້ງ່າຍຂຶ້ນຫຼາຍກັບການມາເຖິງຂອງ jQuery Mobile. ບໍ່ມີເວບໄຊທ໌ເທິງມືຖືທີ່ ຈຳ ກັດຕໍ່ ໜ້າ ສະຖິດທີ່ມີຫົວຂໍ້, ວັກ, ລິ້ງແລະຮູບພາບນ້ອຍໆ. ດ້ວຍ jQuery Mobile, ນັກພັດທະນາເວັບສາມາດສ້າງເວບໄຊທ໌ທີ່ມີຄຸນນະສົມບັດທີ່ມີລັກສະນະຄ້າຍຄືກັບມືຖືພື້ນເມືອງ.