ในเรียงความก่อนหน้านี้ขึ้นอยู่กับประสบการณ์สรุปประสบการณ์ของ Bootstrap Metronic ของกรอบการพัฒนา [I] ภาพรวมกรอบการทำงานและการประมวลผลของโมดูลเมนูมันแนะนำการประมวลผลโมดูลเมนูและแนะนำวิธีการรับบันทึกจากฐานข้อมูลและสร้างรายการเมนู รูปแบบไอคอนของข้อมูลเมนูยังได้รับจากฐานข้อมูลดังนั้นเราจึงจำเป็นต้องได้รับคำจำกัดความไอคอนต่างๆใน bootstrap แบบไดนามิก บทความนี้ส่วนใหญ่แนะนำวิธีการแยกข้อมูลไอคอนของ Bootstrap และจัดเก็บไว้ในฐานข้อมูลสำหรับการใช้งานของฉัน
1. การแสดงเมนูและไอคอน bootstrap ต่างๆ
เราสามารถเห็นได้จากรูปด้านล่างเพื่อความงามของเมนูแต่ละรายการเมนู (มีเมนูสามระดับที่นี่) มีไอคอน แม้ว่าขนาดจะแตกต่างกัน แต่เราใช้ไอคอน bootstrap ซึ่งทั้งหมดมาจากเนื้อหาของไลบรารีไอคอน bootstrap
ห้องสมุดไอคอน Bootstrap แบ่งออกเป็นสามประเภท:
Font Awesome: Font ไอคอนพิเศษของ Bootstrap ไอคอนทั้งหมดที่รวมอยู่ใน Font Awesome เป็นเวกเตอร์ดังนั้นพวกเขาจึงสามารถปรับขนาดได้โดยพลการหลีกเลี่ยงความยุ่งยากในการมีไอคอนในการทำหลายขนาด รูปแบบที่ CSS สามารถตั้งค่าสำหรับแบบอักษรสามารถใช้กับไอคอนเหล่านี้ได้
ตัวอย่างเช่นต่อไปนี้เป็นไอคอนฟอนต์ที่ยอดเยี่ยม:
ไอคอนง่าย ๆ : รวบรวมโลโก้ของเว็บไซต์หลายแห่งและให้รูปภาพรูปแบบ PNG ที่มีคุณภาพสูงและแตกต่างกันไปยังชาวเน็ต ลิขสิทธิ์ไอคอนทั้งหมดเป็นของ บริษัท ของพวกเขา
ดังที่แสดงด้านล่างเป็นไอคอนของไอคอนง่ายๆ:
Glyphicons: รวมชุดของแผนภูมิรูปแบบฟอนต์สัญลักษณ์ 200 แผนภูมิที่ได้รับจาก Glyphicons โดยทั่วไปแล้ว Glyphicons Halflings จะถูกเรียกเก็บเงิน แต่หลังจากการเจรจาระหว่าง Bootstrap และ Glyphicons Authors นักพัฒนาสามารถใช้งานได้โดยไม่ต้องจ่ายค่าธรรมเนียม
นี่คือเนื้อหาของ glyphics บางส่วน:
การใช้เนื้อหาไอคอนเหล่านี้เราสามารถแนะนำสไตล์ต่อไปนี้ได้
<link href = "/content/meter/font-wesome/css/font-wesiso.min.css" rel = "stylesheet"/> <link href = "/content/meter/simple-line-imons/simple-line-icons.min.css" rel = href = "/เนื้อหา/เมตร/bootstrap/css/bootstrap.min.css" rel = "stylesheet"/>
ไอคอนเหล่านี้รองรับการแสดงเฉพาะเรื่องของ bootstraps ต่างๆดังที่แสดงในเอฟเฟกต์ต่อไปนี้
หรือคุณสามารถทำให้ไอคอนใหญ่ขึ้น:
2. การสกัดไอคอน bootstrap ต่างๆ
ผ่านการแนะนำข้างต้นเราอาจมีความเข้าใจบางอย่างเกี่ยวกับไอคอน bootstrap เหล่านี้ แต่ถ้าเราต้องการเลือกไอคอนในการแก้ไขเมนูเรายังคงต้องแยกข้อมูลนี้ลงในฐานข้อมูลและแสดงให้ฉันเลือกมิฉะนั้นการกำหนดค่าแบบไดนามิกจะไม่สามารถทำได้
ตัวอย่างเช่นในอินเทอร์เฟซการแก้ไขข้างต้นเรามีการเลือกแบบไดนามิกของไอคอนเว็บของเมนู หากเราบันทึกคอลเลกชันของไอคอนข้างต้นในฐานข้อมูลเราสามารถแสดงในอินเทอร์เฟซและเลือกแผนภูมิที่เหมาะสมจากมัน
ขึ้นอยู่กับไฟล์สไตล์ข้างต้นลองวิเคราะห์ สำหรับเนื้อหาไฟล์ของ font-joresome.min.css ส่วนนิยามไอคอนมีดังนี้
สำหรับ ICONS แบบง่ายๆคำจำกัดความสไตล์ของมันคล้ายกันดังที่แสดงด้านล่าง
สำหรับ Glyphicons นิยามสไตล์ของมันก็คล้ายกันมากดังที่แสดงด้านล่าง
จากข้อมูลเหล่านี้เราสามารถแยกข้อมูลที่เราต้องการผ่านการจับคู่นิพจน์ทั่วไปและจัดเก็บไว้ในฐานข้อมูลเพื่อรับรู้ขั้นตอนแรกของการแสดงผลแบบไดนามิกและการเลือกไอคอน
ตัวอย่างเช่นเรากำหนดตัวแปรบางส่วนและนิพจน์ทั่วไปเพื่อจัดการเนื้อหาไฟล์เหล่านี้:
string regex = "^//. (? <name>.*?): ก่อน // s*// {"; รายการ <String> filePathList = รายการใหม่ <String> () {"~/เนื้อหา/ธีม/meteronic/assets/global/plugins/bootstrap/css/bootstrap.css", "~/content/themes/meteronic/ostets/global/plugins/simple-line-icons/simple-iconsจากนั้นเนื้อหาการรวบรวมสามารถแยกได้โดยการอ่านเนื้อหาไฟล์และรับระเบียนที่ตรงกัน
String Content = FileUtil.FileToString (RealPath); รายการ <String> matchList = cregex.getList (เนื้อหา, regex, 1);
ในที่สุดเราสามารถบันทึกข้อมูลนี้ลงในตารางฐานข้อมูล
bootstrapiconinfo info = ใหม่ bootstrapiconinfo () {displayName = item, className = คำนำหน้า + รายการ, createTime = datetime.now, sourcetype = sourcetype,}; BllFactory <Bootstrapon> .instance.Insert (ข้อมูล);ในที่สุดบันทึกจะถูกเก็บไว้ในฐานข้อมูล เอฟเฟกต์มีดังนี้ ข้อมูลไอคอนที่เราต้องการได้รับการบันทึก ด้วยวิธีนี้เมื่อใช้งานคุณสามารถใช้ข้อมูลของแต่ละฟิลด์เพื่อแสดงอินเทอร์เฟซที่ดูดี
3. การแสดงไอคอน Bootstrap และการเลือก
หลังจากที่เราอ่านไฟล์และแยกเนื้อหาในนิพจน์ปกติแล้วบันทึกลงในฐานข้อมูลข้อมูลไอคอนเหล่านี้สามารถใช้กับเราและสามารถแสดงในลักษณะที่จำแนกได้ในหน้า ไอคอนแต่ละประเภทนั้นมีความหลากหลายสำหรับการสืบค้นง่ายดังที่แสดงด้านล่าง
รหัสหน้าจอแสดงผลในส่วนนี้คล้ายกับการแสดงข้อมูลปกติ แต่ไม่จำเป็นต้องใช้ข้อมูลส่วนหัว มาดูรหัสหน้าตามที่แสดงด้านล่าง
<div> <div> <div> <i> </i> ข้อมูลไอคอน </div> </div> <div> <pan> <pan> แสดงต่อหน้า </span> <เลือก id = "rows" onChange = "changeRows ()"> <portion> 50 </ตัวเลือก> </span> <span id = 'TotalCount'> 0 </span> จำนวนหน้าทั้งหมด: <span id = 'TotalPageCount'> 0 </span> หน้า </div> <hr/> <div style = "padding-left: 20px"> <div id = "grid_body"> </div> <div> <ul id = 'grid_paging'> </ul> </div> </div> </div> </div>
เนื้อหาการแสดงไอคอนหลักอยู่ใน HTML ในส่วนด้านบน
<div id = "grid_body"> </div>
สคริปต์การประมวลผลที่ได้รับและสร้างรหัส HTML แบบไดนามิกเพื่อแสดงบนอินเทอร์เฟซมีดังนี้
$ .getJSON (ICONURL + "&" + เงื่อนไข, ฟังก์ชั่น (ข้อมูล) {$ ("#icon_body"). html (""); $ .each (data.rows, ฟังก์ชั่น (i, รายการ) {var tr = "<a href =/" javaScript:;/"onclick =/" geticon (" +" title =/"" + item.displayName + "/"> "; tr + =" <i class =/"" + item.className + "/" style =/"font-size: 2.2em/"> </i> "; // // tr + =" <div> " $ ("#icon_body"). ผนวก (tr);});หลังจากผู้ใช้เลือกไอคอนที่สอดคล้องกันเราสามารถตั้งค่าสไตล์การขยายผ่านสคริปต์เพื่อแสดงไอคอนที่เราเลือกดังที่แสดงด้านล่าง
$ ("#i_webicon"). attr ("คลาส", classname);แน่นอนเมื่อเราเลือกไอคอนเรามีกล่องโต้ตอบป๊อปอัพเพื่อแสดงไอคอนที่มีหมวดหมู่ที่แตกต่างกันเพื่อให้ผู้ใช้สามารถกลับมาได้หลังจากเลือก
ด้วยวิธีนี้เราเสร็จแล้วแยกแผนภูมิประเภทต่าง ๆ ออกจากไฟล์ไอคอนจากนั้นจัดเก็บไว้ในฐานข้อมูลและแสดงบนหน้าเพื่อให้เราเลือกและตั้งค่าแบบไดนามิก
ข้างต้นเป็นบทสรุปของประสบการณ์ของกรอบการพัฒนา Bootstrap Metronic ที่แนะนำโดยบรรณาธิการให้คุณ [สี่] ความรู้ที่เกี่ยวข้องเกี่ยวกับการสกัดและการใช้ไอคอน bootstrap ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณต้องการทราบข้อมูลเพิ่มเติมโปรดให้ความสนใจกับเว็บไซต์ Wulin.com!