การออกแบบแอพมือถือ / ธีมที่กำหนดเองของ Dev ด้วย jQuery Mobile

ในแบบฝึกหัด jQuery Mobile ก่อนหน้านี้ฉันได้แนะนำเฟรมเวิร์กพื้นฐานมากมายและวิธีการตั้งค่าเว็บไซต์แรกของคุณ ห้องสมุด JS มีทั้งน้ำหนักเบาและง่ายต่อการหยิบเกี่ยวกับความยากลำบากในการเรียนรู้ นอกจากนี้ยังมีสไตล์ชีท CSS ทั่วไปที่มาพร้อมกับไฟล์เพื่อให้คุณสามารถปรับแต่งองค์ประกอบต่างๆในโครงร่างของคุณเพิ่มเติม.

สำหรับเซกเมนต์ที่สองนี้ฉันต้องการใช้เวลาในการเจาะลึกลงไปในแนวคิดของ jQuery Mobile ธีมนี้ อุตสาหกรรมการออกแบบทั้งหมดได้รับการปฏิวัติโดย jQM และกระบวนการสร้างเทมเพลตมือถือตั้งแต่ต้นได้รับการปรับปรุงอย่างมีนัยสำคัญ jQuery Mobile ไม่เพียง แต่เป็นไลบรารีสคริปต์เท่านั้น แต่ยังเป็นพื้นฐานสำหรับการสร้างและสร้างเทมเพลตมือถือที่มีประสิทธิภาพ.

เนื้อหาสไตล์ชีทเริ่มต้น

ฉันควรเริ่มต้นด้วยการทำให้ชัดเจนว่าประเภทของรหัส CSS รวมอยู่ในไฟล์เริ่มต้น สไตล์ชีทจาก jQM 1.0 ได้รับการแบ่งออกเป็นสองกลุ่มหลัก - โครงสร้าง และ ธีม.

รหัสโครงสร้างเป็นสิ่งที่คุณส่วนใหญ่สามารถละเว้น ใช้เพื่อกำหนดระยะขอบการเว้นระยะห่างความสูง / ความกว้างตัวแปรแบบอักษรพร้อมกับค่าเริ่มต้นอื่น ๆ ของเบราว์เซอร์ ชุดรูปแบบภายในจะถูกแยกออกจาก A-E ซึ่งแต่ละตัวควบคุมเอฟเฟกต์ภาพแตกต่างกันในการออกแบบของคุณ ซึ่งอาจรวมถึงสีพื้นหลังการไล่ระดับสีเงาลดลงและอื่น ๆ.

องค์ประกอบของชุดรูปแบบภายในแต่ละชุดเหล่านี้ยังสามารถเรียกว่า เสื้อโค้ต. เมื่อคุณสร้างเทมเพลตมือถือโดยทั่วไปแล้วคุณจะติดอยู่กับธีมเดียว แต่ในเกือบทุกสถานการณ์การออกแบบสามารถปรับปรุงได้ด้วยโทนสีที่แตกต่างกัน สไตล์ชีทเริ่มต้นรวม swatches A-E เท่านั้น แต่คุณสามารถสร้าง swatches F-Z เพื่อเพิ่มทางเลือกอีก 21 ทางในไลบรารีธีมของคุณ เพียงชี้แจงข้อกำหนดเหล่านี้อีกครั้ง กระทู้ ถือเป็นไฟล์ CSS เดียว 1 ไฟล์ซึ่งสามารถรวมได้ถึง 26 ไฟล์ เสื้อโค้ต ป้าย A-Z.

การสลับสไตล์

หากคุณไม่ได้เลือกระบุ swatches ใด ๆ jQuery Mobile จะยึดติดกับ swatch A เป็นค่าเริ่มต้น หากคุณไม่ทราบว่าเอกสาร jQuery Mobile นั้นใช้คุณสมบัติข้อมูล HTML5 สำหรับฟังก์ชั่นภายในจำนวนมาก หนึ่งในนั้นรวมถึงการเปลี่ยน swatches ผ่านแอตทริบิวต์ data-theme ลองดูตัวอย่างรหัสของฉันด้านล่างเพื่อดูว่าฉันหมายถึงอะไร.

  หน้า jQM เริ่มต้น
 
  นี่คือเนื้อหาภายในบางส่วน.

โปรดสังเกตว่าฉันวางแอ็ตทริบิวต์ data-theme บน div ของรูทเพจ ซึ่งหมายความว่าสีสวอตช์ใหม่จะมีผลทุกอย่างภายในซึ่งรวมถึงส่วนหัวและพื้นที่เนื้อหา ฉันยังสามารถรวม ข้อมูลธีม = "C" ใน div ส่วนหัวเพื่อเปลี่ยนเฉพาะเนื้อหานั้นจากส่วนที่เหลือของหน้าของฉัน.

ส่วนประกอบของสวอตช์

มันควรจะตรงไปตรงมาถึงวิธีการใช้ swatches ที่แตกต่างกันเหล่านี้ภายในเลย์เอาต์เดียว ตอนนี้เรามาดูโค้ด jQM CSS เพื่อให้เราสามารถแยกส่วนประกอบของสวอตช์ ตรวจสอบไฟล์ jQuery Mobile 1.4.5 CSS ล่าสุดที่โฮสต์ใน CDN ของตนเอง.

คุณควรสังเกตว่าแต่ละสวอตช์ถูกคั่นด้วยความคิดเห็นที่แตกต่างกันอย่างไรและแต่ละคลาสภายในลงท้ายด้วยตัวอักษรที่เหมาะสม ตัวอย่างเช่น .UI บาร์-A และ .UI ร่างกาย-A ถูกนำไปใช้ในแถบส่วนหัว / ส่วนท้ายและพื้นที่เนื้อหาตามค่าเริ่มต้น คุณสมบัติส่วนใหญ่ใช้การรีเซ็ตสีแบบอักษรและลิงก์การไล่ระดับสีพื้นหลังและรายละเอียดเล็ก ๆ อื่น ๆ ฉันรวมเพียง UI บาร์-A รหัสเพื่อให้คุณทราบถึงองค์ประกอบที่เรากำหนดเป้าหมาย.

/ * A ----------------------------------------------- ---------------------------------------------- * / .ui -bar-a border: 1px solid # 2A2A2A; พื้นหลัง: # 111111; สี: #ffffff; น้ำหนักตัวอักษร: ตัวหนา; ข้อความ - เงา: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px # 000000; background-image: -webkit-gradient (เป็นแนวยาวด้านบนซ้ายล่างซ้ายจาก (# 3c3c3c) ถึง (# 111)); / * Saf4 +, Chrome * / background-image: -webkit-linear-gradient (# 3c3c3c, # 111); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradient (# 3c3c3c, # 111); / * FF3.6 * / background-image: -ms-linear-gradient (# 3c3c3c, # 111); / * IE10 * / background-image: -o-linear-gradient (# 3c3c3c, # 111); / * Opera 11.10+ * / background-image: linear-gradient (# 3c3c3c, # 111);  .ui-bar-a, .ui-bar-a input, .ui-bar-a select, .ui-bar-a textarea, .ui-bar-a ปุ่ม font-family: Helvetica, Arial, sans- serif;  .ui-bar-a .ui-link-inherit color: #fff;  .ui-bar-a .ui-link color: # 7cc4e7 / * a-bar-link-color * /; น้ำหนักตัวอักษร: ตัวหนา;  .ui-bar-a .ui-link: hover color: # 2489CE / * a-bar-link-hover * /;  .ui-bar-a .ui-link: active color: # 2489CE / * a-bar-link-active * /;  .ui-bar-a .ui-link: เข้าชม color: # 2489CE / * a-bar-link-visit * /;

หากคุณแค่ต้องการสร้างสวอตช์ที่กำหนดเองฉันขอแนะนำให้คุณสร้างเทมเพลตจากหนึ่งในต้นแบบ กระบวนการจะราบรื่นขึ้นมากหากคุณเริ่มเขียนโค้ดในเอกสาร CSS ใหม่ คุณจะไม่ต้องยุ่งยากในการแก้ไขไฟล์ต้นฉบับและคุณสามารถเริ่มทำงานกับกระดานชนวนที่สะอาดได้ แต่ประเด็นสำคัญที่คุณต้องการมุ่งเน้นจะรวมถึงสิ่งต่อไปนี้:

แถบหัวกระดาษและท้ายกระดาษ
เนื้อหาของร่างกาย & ข้อความหน้า
สไตล์รายการ
ปุ่มระบุค่าเริ่มต้น / hover / active
ตัวควบคุมอินพุตแบบฟอร์ม (พิเศษ)

การเข้ารหัสการออกแบบบาร์ใหม่

จากไฟล์ CSS เดียวกันเรามองไปที่การคัดลอก / วางก่อนหน้ารหัส swatch A ทั้งหมด (บรรทัด 12-150) ลงในไฟล์ใหม่ เราสามารถใช้สวอตช์ชื่อ G เพื่อใช้สไตล์ใหม่เหล่านี้ ตอนนี้หลังจากคัดลอกรหัสที่คุณต้องการเปลี่ยนชื่อแต่ละอินสแตนซ์ชั้นเรียนที่ลงท้ายด้วย - ไปยัง -ก., นี่คือวิธีที่ jQuery Mobile จะจดจำสไตล์ที่จะใช้.

ฉันต้องการเริ่มต้นด้วยการออกแบบแถบส่วนหัว bg ใหม่เพื่อเลียนแบบการไล่ระดับ iOS ที่คุ้นเคยมากขึ้น ซึ่งสามารถทำได้เพียงภายใน .UI-บาร์กรัม ผู้เลือก เราต้องการแก้ไขคุณสมบัติพื้นหลังและภาพพื้นหลังเพื่อเปลี่ยนเอฟเฟกต์การไล่ระดับสี ตรวจสอบรหัสของฉันด้านล่างและหน้าจอตัวอย่างของการไล่ระดับสีใหม่.

.ui-bar-g border: 1px solid # 2d3033 / * a-bar-border * /; ขอบซ้าย: 0px; ขอบขวา: 0px; พื้นหลัง: # 6d83a1; สี: #fff / * a-bar-color * /; น้ำหนักตัวอักษร: ตัวหนา; ข้อความเงา: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px / * a-bar-shadow-radius * / # 3e4957; background-image: -webkit-gradient (เชิงเส้น, 0% 0%, 0% 100%, จาก (# b4bfce), color-stop (0.5, # 899cb3), color-stop (0.505, # 7e94b0), ถึง (# 6d83a1)); background-image: -webkit-linear-gradient (บนสุด, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradient (บนสุด, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * FF3.6 * / background-image: -ms-linear-gradient (บนสุด, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * IE10 * / background-image: -o-linear-gradient (บนสุด, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Opera 11.10+ * / background-image: linear-gradient (ด้านบน, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1);

ฉันใช้โทนสีฟ้าที่พบในแอปพลิเคชั่น iOS ที่เป็นค่าเริ่มต้นส่วนใหญ่ พื้นหลังของฉันถูกตั้งค่าเริ่มต้นเป็นสีทึบสำหรับอุปกรณ์ที่ไม่สามารถแสดงการไล่ระดับสี CSS3 จากนั้นด้านล่างฉันใช้สีหยุดประมาณเครื่องหมาย 50% เพื่อสร้างเอฟเฟกต์เงางามแบบดั้งเดิมของ Apple ภายในตัวเลือกเดียวกันฉันได้แก้ไขเงาข้อความเล็กน้อยด้วยสีและช่วงที่ลึกซึ้งยิ่งขึ้น.

ปุ่มและเอฟเฟกต์ข้อความ

สิ่งสำคัญคือเมื่อการเข้ารหัส swatches เพื่อพิจารณาโดยเฉพาะว่าส่วนใดของส่วนต่อประสานที่ต้องการความสนใจ แถบส่วนหัวดูดีมากด้วยพื้นหลังใหม่นี้ แต่การแก้ไขครั้งสุดท้ายที่ฉันต้องการจะทำจะตรงกับรูปแบบปุ่มที่ใกล้เคียงกับแอพ iOS มากขึ้น.

.ui-btn-up-g border: 1px solid # 375073; พื้นหลัง: # 4a6c9b; น้ำหนักตัวอักษร: ตัวหนา; สี: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; กล่องเงา: ไม่มี; -webkit-box-shadow: none; -moz-box-shadow: none; background-image: -webkit-gradient (เส้นตรง, 0% 0%, 0% 100%, จาก (# 89a0be), color-stop (0.5, # 5877a2), color-stop (0.505, # 476999), ถึง (# 4a6c9b)); background-image: -webkit-linear-gradient (บนสุด, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradient (ด้านบน, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * FF3.6 * / background-image: -ms-linear-gradient (ด้านบน, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * IE10 * / background-image: -o-linear-gradient (ด้านบน, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Opera 11.10+ * / background-image: linear-gradient (ด้านบน, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); รัศมีเส้นขอบ: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;  .ui-btn-up-g .ui-btn-inner, .ui-btn-hover-g .ui-btn-inner, .ui-btn-down-g .ui-btn-inner เส้นขอบรัศมี: 0; -webkit-border-radius: 0; -moz-border-radius: 0;  .ui-btn-hover-g border: 1px solid # 1b49a5; พื้นหลัง: # 2463de; น้ำหนักตัวอักษร: ตัวหนา; สี: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; กล่องเงา: ไม่มี; -webkit-box-shadow: none; -moz-box-shadow: none; background-image: -webkit-gradient (เส้นตรง, 0% 0%, 0% 100%, จาก (# 779be9), color-stop (0.5, # 376fe0), color-stop (0.505, # 2260dd), ถึง (# 2463de)); background-image: -webkit-linear-gradient (บนสุด, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradient (ด้านบน, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * FF3.6 * / background-image: -ms-linear-gradient (บน, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * IE10 * / background-image: -o-linear-gradient (บน, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Opera 11.10+ * / background-image: linear-gradient (ด้านบน, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); รัศมีเส้นขอบ: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;

ส่วนรหัสที่เรากำลังแก้ไขอยู่ในคลาสของปุ่ม UI มี 3 โหมดที่แตกต่างกันที่เกี่ยวข้อง: .UI-btn ขึ้น-G, .UI-btn-hover กรัม, และ .UI-btn ลงกรัม. ฉันมุ่งเน้นไปที่เอฟเฟกต์มาตรฐาน (btn-up) และโฮเวอร์ (btn-hover) โดยการแก้ไขเงาของกล่องและการไล่ระดับสีเชิงเส้น ฉันยังขยายเอฟเฟกต์มุมโค้งมนเพื่อให้ปุ่มปรากฏเป็นรูปสี่เหลี่ยมผืนผ้ามากขึ้น.

ด้วยเหตุนี้ฉันจึงจำเป็นต้องลบรัศมีเส้นขอบด้านในออกจากคลาสที่ชื่อ .UI-btn-ภายใน. ชั้นนี้ได้รับการแนบไปกับองค์ประกอบการขยายภายในแต่ละลิงค์ยึดในแถบส่วนหัวของคุณ โดยไม่ต้องรีเซ็ตคุณสมบัติรัศมีเส้นขอบคุณจะสังเกตเห็นความผิดพลาดเล็กน้อยในการออกแบบเมื่อใดก็ตามที่คุณวางเมาส์เหนือปุ่ม เมื่อคุณใช้เวลาในการเขียนโค้ดในธีม jQuery Mobile มากขึ้นคุณจะจดจำความแตกต่างเล็กน้อยเหล่านี้สำหรับโครงการในอนาคต.

บทนำสู่ ThemeRoller

หากคุณสนุกกับการทำให้มือสกปรกในรหัสแล้วฉันขอแนะนำให้ติดกับการแก้ไขที่กำหนดเอง คุณไม่เพียง แต่สามารถควบคุมได้มากขึ้นเท่านั้น แต่ยังง่ายต่อการแก้ไขข้อผิดพลาดภายใน CSS หากคุณทำการแก้ไขด้วยตัวเองทั้งหมด แต่สำหรับนักออกแบบหลายคนกระบวนการนี้น่าเบื่อและใช้เวลานานกว่าที่จำเป็น โชคดีที่ทีม jQuery Mobile ได้เปิดตัวแก้ไขออนไลน์ภายใต้ชื่อ ThemeRoller.

จากหน้านี้คุณสามารถแก้ไข swatches 3 A-C แรกหรือแม้กระทั่งสร้างหนึ่งของคุณเอง หากคุณมองในแถบด้านข้างซ้ายคุณสามารถสลับระหว่างการตั้งค่าทั้ง 3 นี้หรือเปลี่ยนแปลงตัวเลือกชุดรูปแบบส่วนกลางได้อย่างรวดเร็ว สิ่งเหล่านี้รวมถึงคุณสมบัติ CSS เช่นเส้นขอบรัศมีเงาของกล่องหรือแบบอักษรหน้าเริ่มต้น สังเกตุในขณะที่คุณเลือก swatches ที่ตั้งไว้ล่วงหน้าใด ๆ ที่เราสามารถแก้ไขพื้นที่เดียวกับก่อน - แถบด้านบน / ล่างเนื้อหาร่างกายและสถานะปุ่ม 3.

แต่คุณสมบัติที่ฉันชอบคือการเข้าถึง Adobe Kuler โดยตรง คุณสามารถสร้างโครงร่างสีสองสามสีภายในบัญชี Kuler ของคุณและนำเข้าสู่ ThemeRoller อินเทอร์เฟซรองรับฟังก์ชันการลากและวางดังนั้นจึงเป็นเรื่องง่ายที่จะลองแนวคิดที่แตกต่างกันในเวลาไม่กี่นาที.

ในที่สุดก็ไม่มีวิธีที่แน่นอนในการสร้าง swatch jQM ของคุณอย่างถูกต้อง นักออกแบบบางคนชอบที่จะใช้โค้ด CSS ในขณะที่คนอื่น ๆ จะชอบเว็บแอพ ThemeRoller ตราบใดที่คุณติดตามโครงสร้างของคลาสคุณก็ควรได้ผลลัพธ์เหมือนกัน.

ทรัพยากรที่มีประโยชน์

jQuery Mobile Themes - เอกสารประกอบ
การใช้และการปรับแต่งธีม jQuery Mobile