เฟรมเวิร์กส่วนหน้า HTML5 บนมือถือ—การใช้งาน MUI

ในมุมมองของเฟรมเวิร์กส่วนหน้าก่อนหน้านี้จำนวนมาก (โดยเฉพาะเฟรมเวิร์กเค้าโครงที่ตอบสนอง) การควบคุม UI ดูเหมือนหน้าเว็บมากเกินไปและไม่มีความรู้สึกดั้งเดิม ดังนั้นการแสวงหา UI ดั้งเดิมจึงเป็นเป้าหมายสำคัญของ MUI MUI ขึ้นอยู่กับ UI ของแพลตฟอร์ม iOS และเสริมการควบคุม UI บางอย่างที่ไม่ซ้ำกับแพลตฟอร์ม Android MUI ส่วนใหญ่มีความหมายสามประการ: 1. Windows เวอร์ชันหลายภาษาซึ่งเป็นระบบปฏิบัติการคอมพิวเตอร์ที่เผยแพร่แยกต่างหาก 2. องค์กรอย่างเป็นทางการที่เชื่อถือได้มากที่สุดในโลกสำหรับการรับรองฮาลาล 3. คำนามที่เหมาะสมในเทคโนโลยีการสื่อสารเคลื่อนที่

1. สร้างไฟล์ HTML ใหม่ที่มี mui

ใน Hbuilder ให้สร้างไฟล์ HTML ใหม่และเลือกเทมเพลต HTML ที่มี mui เพื่อสร้างเทมเพลตหน้า mui อย่างรวดเร็ว เทมเพลตนี้จัดการการอ้างอิงทรัพยากร js และ css ของ mui ตามค่าเริ่มต้น

2. กรอก mheader

แถบหัวเรื่องด้านบนเป็นสิ่งจำเป็นสำหรับทุกหน้า ป้อน mheader ใน Hbuilder เพื่อสร้างแถบนำทางด้านบนอย่างรวดเร็ว

3. กรอก mbody

ยกเว้นตัวควบคุมการนำทางด้านบนและแท็บด้านล่าง ขอแนะนำให้วางตัวควบคุมอื่นไว้ในตัวควบคุม .mui-content ป้อน mbody ใน Hbuilder เพื่อสร้างบล็อกโค้ดที่มี .mui-content อย่างรวดเร็ว

1.หีบเพลง(แผงพับ)

แผงพับจะคล้ายกับรายการรองดังนี้:

 <ul class=mui-table-view> <li class=mui-table-view-cell mui-collapse> <a class=mui-navigate-right href=#>แผง 1</a> <div class=mui- ยุบเนื้อหา> <p>เนื้อหาย่อยแผง 1</p> </div> </li> </ul><ul class=mui-table-view> <li class=mui-table-view-cell mui - ยุบ> <ก class=mui-navigate-right href=#>แผง 2</a> <div class=mui-collapse-content> <p>เนื้อหาย่อยแผง 2</p> </div> </li> </ul >

2.ปุ่ม(ปุ่ม)

ปุ่มปกติ

เพิ่มคลาส .mui-btn ให้กับโหนดปุ่มเพื่อสร้างปุ่มเริ่มต้น หากคุณต้องการปุ่มที่มีสีอื่น ให้เพิ่มคลาสที่เกี่ยวข้องต่อไป ตัวอย่างเช่น . .mui-btn-blue สามารถกลายเป็นปุ่มสีน้ำเงินได้

 <button type=button class=mui-btn>ค่าเริ่มต้น</button><button type=button class=mui-btn mui-btn-primary>สีน้ำเงิน</button><button type=button class=mui-btn mui- btn -success>สีเขียว</button><button type=button class=mui-btn mui-btn-warning>สีเหลือง</button><button type=button class=mui-btn mui-btn-danger>สีแดง</button><button type=button class=mui-btn mui-btn-royal>สีม่วง</button>

ผลลัพธ์หลังจากการวิ่งจะเป็นดังนี้:

หากคุณต้องการปุ่มที่ไม่มีสีพื้นหลังและเส้นขอบ คุณจะต้องเพิ่มคลาส . .mui-btn-outlined เท่านั้น รหัสจะเป็นดังนี้:

 <button type=button class=mui-btn mui-btn-outlined>ค่าเริ่มต้น</button><button type=button class=mui-btn mui-btn-primary mui-btn-outlined>สีน้ำเงิน</button><ประเภทปุ่ม =button class=mui-btn mui-btn-success mui-btn-outlined>สีเขียว</button><ปุ่ม type=button class=mui-btn mui-btn-warning mui-btn-outlined>สีเหลือง</button><button type=button class=mui-btn mui-btn-danger mui-btn-outlined>สีแดง</button> <button type=button class=mui-btn mui-btn-royal mui-btn-outlined>สีม่วง</button>

ผลการวิ่งมีดังนี้:

3.gallery (รูปภาพแบบหมุน)

ภาพหมุนสืบทอดมาจากปลั๊กอินสไลด์ ดังนั้นโครงสร้าง DOM และเหตุการณ์จึงเหมือนกับปลั๊กอินสไลด์

ไม่รองรับการเล่นแบบวนซ้ำตามค่าเริ่มต้น โครงสร้าง DOM เป็นดังนี้:

 <div class=mui-slider> <div class=mui-slider-group> <div class=mui-slider-item><a href=#><img src=1.jpg /></a></div > <div class=mui-slider-item><a href=#><img src=2.jpg /></a></div> <div class=mui-slider-item><a href=#><img src=3.jpg /></a></div> <div class=mui-slider-item><a href=#><img src =4.jpg /></a></div> </div></div>

สมมติว่ามีรูปภาพที่ 1, 2, 3 และ 4 อยู่ในภาพหมุนปัจจุบัน เริ่มจากภาพที่ 1 ให้เลื่อนไปทางซ้ายเพื่อสลับภาพที่ 4 ให้เลื่อนไปทางซ้ายต่อไป จะมีเอฟเฟกต์ 2 แบบ:

1. รองรับการวนซ้ำ: ปัดไปทางซ้ายเพื่อสลับไปยังภาพแรกโดยตรง
2. ไม่รองรับการวนซ้ำ: ปัดไปทางซ้าย ไม่มีการตอบสนอง แสดงภาพที่ 4 ต่อไป หากผู้ใช้ต้องการแสดงภาพที่ 1 เขาจะต้องปัดไปทางขวาอย่างต่อเนื่องเพื่อสลับไปยังภาพที่ 1

เมื่อรูปภาพแรกปรากฏขึ้น การเลื่อนไปทางขวาต่อไปเพื่อแสดงรูปภาพที่สี่เป็นปัญหาเดียวกัน การดำเนินการของปัญหานี้จำเป็นต้องได้รับการควบคุมผ่านคลาส .mui-slider-loop และโหนด DOM

หากคุณต้องการรองรับการวนซ้ำ คุณต้องเพิ่มคลาส .mui-slider-loop ให้กับโหนด . .mui-slider-group ในเวลาเดียวกัน คุณต้องเพิ่มรูปภาพ 2 รูปซ้ำๆ กัน ลำดับของรูปภาพจะกลายเป็น: 4 , 1, 2, 3, 4, 1 ตัวอย่างโค้ดมีดังนี้:

 <div class=mui-slider> <div class=mui-slider-group mui-slider-loop> <!--รองรับการวนซ้ำ จำเป็นต้องทำซ้ำโหนดรูปภาพ--> <div class=mui-slider-item mui-slider - รายการที่ซ้ำกัน><a href=#><img src=4.jpg /></a></div> <div class=mui-slider-item><a href=#><img src=1.jpg /></a></div> <div class=mui-slider-item><a href=#><img src=2.jpg /></a> </div> <div class=mui-slider-item><a href=#><img src=3.jpg /></a></div> <div class=mui-slider-item><a href=#><img src=4.jpg /></a></div> <!--รองรับการวนซ้ำ ต้องทำซ้ำโหนดรูปภาพ--> <div class= mui -slider-item mui-slider-item-duplicate><a href=#><img src=1.jpg /></a></div> </div></div>

เฟรมเวิร์ก mui มีปลั๊กอินรูปภาพแบบหมุนในตัว ผู้ใช้สามารถตั้งค่าว่าจะให้หมุนแบบอัตโนมัติและรอบแบบหมุนหรือไม่ ต่อไปนี้คือตัวอย่างโค้ด:

 //รับวัตถุปลั๊กอินตัวเลื่อน var gallery = mui('.mui-slider'); gallery.slider({ ช่วง:3000//ระยะเวลาการหมุนอัตโนมัติ หากเป็น 0 มันจะไม่เล่นโดยอัตโนมัติ ค่าเริ่มต้นคือ 0; });

ดังนั้น หากคุณต้องการให้ภาพหมุนไม่เล่นโดยอัตโนมัติ แต่ต้องสลับโดยการเลื่อนด้วยตนเองของผู้ใช้ คุณจะต้องตั้งค่าพารามิเตอร์ช่วงเวลาเป็น 0 ด้วยวิธีการข้างต้น

หากคุณต้องการข้ามไปยังรูปภาพที่ x คุณสามารถใช้เมธอด gotoItem ของปลั๊กอินรูปภาพแบบหมุนได้ เช่น:

 //การเชื่อมโยงเหตุการณ์ที่มาพร้อมกับ mui สามารถใช้เฉพาะวิธีการมอบหมายเหตุการณ์ mui(.mui-content).on(tap,#btn,function(){ gallery.slider().gotoItem(2);//Deployment ภาพที่ 3 ดัชนีเริ่มต้นจาก 0});

4.อินพุต (แบบฟอร์มอินพุต)

อินพุต พื้นที่ข้อความ และองค์ประกอบอื่น ๆ ที่รวมอยู่ในคลาส .mui-input-row จะมีแอตทริบิวต์ width ตั้งค่าเป็น width: 100%; โดยค่าเริ่มต้น การรวมองค์ประกอบป้ายกำกับและส่วนควบคุมด้านบนไว้ใน .mui-input-group สามารถบรรลุการจัดเรียงที่ดีที่สุด

(ยังมีไอคอนรูปตาอยู่ทางด้านขวาของช่องป้อนรหัสผ่าน ซึ่งฉันพบว่ามีประโยชน์อย่างยิ่ง)

รหัสมีดังนี้:

 <form class=mui-input-group> <div class=mui-input-row> <label>ชื่อผู้ใช้</label> <input type=text class=mui-input-clear placeholder=กรุณากรอกชื่อผู้ใช้> </ div> <div class=mui-input-row> <label>รหัสผ่าน</label> <input type=password class=mui-input-password placeholder=กรุณาใส่รหัสผ่าน> </div></form>

ปัจจุบัน mui ยังมีฟังก์ชันเพิ่มประสิทธิภาพการป้อนข้อมูลหลายอย่าง: การลบอย่างรวดเร็ว การป้อนข้อมูลด้วยเสียง *5+ เท่านั้น และกล่องรหัสผ่านที่แสดงรหัสผ่านที่ซ่อนอยู่

1) การลบอย่างรวดเร็ว: เพียงเพิ่มคลาส .mui-input-clear ให้กับตัวควบคุมอินพุต เมื่อมีเนื้อหาในตัวควบคุมอินพุต จะมีไอคอนลบทางด้านขวา การคลิกจะเป็นการล้างเนื้อหาอินพุตปัจจุบัน

รหัสมีดังนี้:

 <form class=mui-input-group> <div class=mui-input-row> <label>ลบด่วน</label> <input type=text class=mui-input-clear placeholder=กรุณากรอกเนื้อหา> </div ></รูปแบบ>

2) กล่องค้นหา: เพิ่มคลาส .mui-input-row .mui-input-search -row เพื่อใช้การควบคุมการค้นหา

รหัสมีดังนี้:

 <div class=mui-input-row mui-search> <ประเภทอินพุต=ค้นหา class=mui-input-clear placeholder=></div>

3) การป้อนข้อมูลด้วยเสียง *5+ เท่านั้น: เพื่ออำนวยความสะดวกในการป้อนข้อมูลอย่างรวดเร็ว mui จึงรวมการป้อนข้อมูลด้วยเสียง HTML5+ คุณจะต้องเพิ่มคลาส .mui-input-speech ให้กับการควบคุมการป้อนข้อมูลที่เกี่ยวข้องเพื่อใช้การป้อนข้อมูลด้วยเสียงในสภาพแวดล้อม 5+

4) กล่องรหัสผ่าน: เพิ่มคลาส .mui-input-password ให้กับองค์ประกอบอินพุตเพื่อใช้งาน

รหัสมีดังนี้:

 <form class=mui-input-group> <div class=mui-input-row> <label>กล่องรหัสผ่าน</label> <input type=password class=mui-input-password placeholder=กรุณาใส่รหัสผ่าน> </div ></รูปแบบ>

5.รายการ(รายการ)

ส่วนประกอบรายการที่ห่อหุ้มด้วย mui นั้นค่อนข้างง่ายและใช้งานง่าย คุณจะต้องเพิ่มคลาส .mui-table-view บนโหนด ul และคลาส . .mui-table-view-cell บนโหนด li เท่านั้น

 <ul class=mui-table-view> <li class=mui-table-view-cell>รายการที่ 1</li> <li class=mui-table-view-cell>รายการที่ 2</li> <li class= mui-table-view-cell>รายการที่ 3</li></ul>

ผลการวิ่งมีดังนี้:

คลิกที่รายการ และรายการที่เกี่ยวข้องจะถูกเน้นด้วยสีเทา หากคุณต้องการปรับแต่งสีไฮไลต์ คุณจะต้องเขียนใหม่ . .mui-table-view-cell.mui-active ดังนี้:

 /*คลิกเพื่อเน้นสีเทา*/.mui-table-view-cell.mui-active{ สีพื้นหลัง: สีเทา;}

หากคุณต้องการเพิ่มลูกศรนำทางไปทางด้านขวาและเปลี่ยนเป็นลิงค์การนำทาง คุณจะต้องเพิ่ม a ย่อยภายใต้โหนด li และเพิ่มคลาส .mui-navigate-right ให้กับ a ดังนี้ : :

 <ul class=mui-table-view> <li class=mui-table-view-cell> <a class=mui-navigate-right>รายการที่ 1</a> </li> <li class=mui-table- view-cell> <a class=mui-navigate-right>รายการที่ 2</a> </li> <li class=mui-table-view-cell> <a class=mui-navigate-right>รายการ 3</a> </li></ul>

ผลการวิ่งมีดังนี้:

mui รองรับการวางตัวห้อยดิจิทัล ปุ่ม สวิตช์ และการควบคุมอื่น ๆ ในรายการ โดยค่าเริ่มต้นของ mui คือการวางตัวห้อยดิจิทัลทางด้านขวาของรายการ

 <ul class=mui-table-view> <li class=mui-table-view-cell>รายการที่ 1 <span class=mui-badge mui-badge-primary>1</span> </li> <li class= mui-table-view-cell>รายการที่ 2 <span class=mui-badge mui-badge-success>2</span> </li> <li class=mui-table-view-cell>รายการ 3 <span class=mui-badge>3</span> </li></ul>

ผลการวิ่งมีดังนี้:

รายการรูปภาพและข้อความสืบทอดมาจากองค์ประกอบรายการ และส่วนใหญ่เพิ่มคลาส . .mui-media , .mui-media-object , .mui-media-body , .mui-pull-left/right ต่อไปนี้เป็นโค้ดตัวอย่าง

 <ul class=mui-table-view> <li class=mui-table-view-cell mui-media> <a href=javascript:;> <img class=mui-media-object mui-pull-left src=img /a.jpg> <div class=mui-media-body> ความสุข<p class='mui-ellipsis'>การนอนกับคนที่คุณรักเป็นเรื่องน่ายินดี แต่ถ้าคุณกรนจะทำยังไง? </p> </div> </a> </li> <li class=mui-table-view-cell mui-media> <a href=javascript:;> <img class=mui-media-object mui- pull-left src=img/b.jpg> <div class=mui-media-body> บ้านไม้<p class='mui-ellipsis'>ฉันต้องการบ้านไม้เล็กๆ แบบนี้ ที่สามารถทำไอศกรีมและกินแตงในฤดูร้อน และนั่งรอบเตาเพื่อให้ความอบอุ่นในฤดูหนาว</p> </div> </a> </li> <li class=mui-table -view-cell mui-media> <a href=javascript:;> <img class=mui-media-object mui-pull-left src=img/c .jpg> <div class=mui-media-body> CBD < หน้า class='mui-ellipsis'>เมืองในโหมดเตาอบดูเหมือนจานสีพลิกคว่ำในเวลาพลบค่ำ</p> </div> </a> </li></ul>

ผลการวิ่งมีดังนี้:

สรุป: mui framework ใช้งานได้สะดวกมากจริงๆ อีกทั้งยังมีการควบคุมต่างๆ ให้เราใช้งานอีกด้วย ดูรายละเอียดได้จากเว็บไซต์ทางการของ mui

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network