Dalam esai sebelumnya, berdasarkan ringkasan pengalaman Bootstrap Metronic dari kerangka kerja Development Framework [i] dan pemrosesan modul menu, ia memperkenalkan pemrosesan modul menu, dan terutama memperkenalkan cara mendapatkan catatan secara dinamis dari database dan membangun daftar menu. Gaya ikon dari informasi menu juga diperoleh dari database, jadi kami diharuskan untuk secara dinamis memperoleh berbagai definisi ikon dalam bootstrap. Artikel ini terutama memperkenalkan cara mengekstrak informasi ikon Bootstrap dan menyimpannya di database untuk penggunaan saya.
1. Tampilan menu dan berbagai ikon bootstrap
Kita dapat melihat dari gambar di bawah ini untuk keindahan menu, setiap item menu (ada menu tiga tingkat di sini) memiliki ikon. Meskipun ukurannya berbeda, kami menggunakan ikon bootstrap, yang semuanya berasal dari isi Perpustakaan Ikon Bootstrap.
Perpustakaan Ikon Bootstrap dibagi menjadi tiga kategori:
Font Awesome: Font Ikon Khusus Bootstrap. Semua ikon yang termasuk dalam font mengagumkan adalah vektor, sehingga dapat ditingkatkan secara sewenang -wenang, menghindari kerumitan memiliki ikon untuk melakukan banyak ukuran. Gaya yang dapat ditetapkan CSS untuk font juga dapat digunakan pada ikon -ikon ini.
Misalnya, berikut ini adalah beberapa ikon yang luar biasa font:
Ikon Sederhana: Kumpulkan logo dari banyak situs web dan berikan ukuran format png berkualitas tinggi dan berbeda untuk netizen. Semua ikon hak cipta milik perusahaan mereka.
Seperti yang ditunjukkan di bawah ini adalah beberapa ikon ikon sederhana:
Glyphicons: Termasuk koleksi 200 grafik format font simbolik yang disediakan oleh Glyphicons. Halflings Glyphicons umumnya dibebankan, tetapi setelah negosiasi antara penulis Bootstrap dan Glyphicons, pengembang dapat menggunakannya tanpa membayar biaya.
Berikut adalah beberapa konten Glyphics:
Dengan menggunakan isi ikon ini, kami hanya dapat memperkenalkan gaya berikut.
<tautan href = "/content/meter/font-Awesome/css/font-Awesome.min.css" rel = "stylesheet"/> <link href = "/content/meter/sederhana-line-icons/link-line-icons.min.css" rel = "stylesheet"/> href = "/content/meter/bootstrap/css/bootstrap.min.css" rel = "stylesheet"/>
Ikon -ikon ini mendukung tampilan tematik dari berbagai bootstrap, seperti yang ditunjukkan pada efek berikut.
Atau Anda juga dapat membuat ikon lebih besar:
2. Ekstraksi berbagai ikon bootstrap
Melalui pengantar di atas, kami mungkin memiliki pemahaman tertentu tentang ikon bootstrap ini, tetapi jika kami ingin dapat memilih ikon dalam pengeditan menu, kami masih perlu mengekstrak informasi ini ke dalam database dan menampilkannya untuk saya pilih, jika tidak konfigurasi dinamis tidak akan mungkin terjadi.
Misalnya, di antarmuka pengeditan di atas, kami menyediakan pilihan dinamis ikon web menu. Jika kami merekam kumpulan ikon di atas dalam database, kami dapat menampilkannya di antarmuka dan memilih bagan yang sesuai darinya.
Berdasarkan file gaya di atas, mari menganalisisnya. Untuk konten file Font-Awesome.min.css, bagian definisi ikon adalah sebagai berikut.
Untuk ikon garis sederhana, definisi gayanya serupa, seperti yang ditunjukkan di bawah ini.
Untuk glifikon, definisi gayanya juga sangat mirip, seperti yang ditunjukkan di bawah ini.
Berdasarkan informasi ini, kami dapat mengekstrak informasi yang kami butuhkan melalui pencocokan ekspresi reguler dan menyimpannya dalam database untuk mewujudkan langkah pertama tampilan dinamis dan pemilihan ikon.
Misalnya, kami mendefinisikan variabel parsial dan ekspresi reguler untuk menangani konten file ini:
string regex = "^//. (? <name>.*?): Sebelum // S*// {"; List<string> filePathList = new List<string>() { "~/Content/themes/meteronic/assets/global/plugins/bootstrap/css/bootstrap.css", "~/Content/themes/meteronic/assets/global/plugins/simple-line-icons/simple-line-icons.css", };Kemudian, konten koleksi dapat diekstraksi dengan membaca konten file dan mendapatkan catatan yang cocok.
string content = fileutil.filetoString (realpath); Daftar <String> MatchList = creegex.getList (konten, regex, 1);
Akhirnya, kami dapat menyimpan informasi ini ke dalam tabel database.
Bootstrapiconinfo info = bootstrapiconinfo baru () {displayName = item, className = prefix + item, createTime = datetime.now, sourcetype = sourcetype,}; Bllfactory <Bootstrapicon> .instance.insert (info);Akhirnya, catatan disimpan dalam database. Efeknya adalah sebagai berikut. Informasi ikon yang kami butuhkan telah dicatat. Dengan cara ini, saat menggunakannya, Anda dapat menggunakan informasi dari setiap bidang untuk menampilkan antarmuka yang terlihat bagus.
3. Tampilan dan Seleksi Ikon Bootstrap
Setelah kami membaca file dan mengekstrak konten dalam ekspresi reguler, dan kemudian menyimpannya ke database, informasi ikon ini dapat digunakan untuk kami dan dapat ditampilkan dengan cara yang diklasifikasikan pada halaman. Setiap jenis ikon paginasi untuk kueri yang mudah, seperti yang ditunjukkan di bawah ini.
Kode halaman tampilan di bagian ini mirip dengan tampilan data reguler, tetapi informasi header tidak diperlukan. Mari kita lihat kode halaman seperti yang ditunjukkan di bawah ini.
<div> <div> <div> <i></i> Icon Information</div> </div> <div> <div> <span>Show per page</span> <select id="rows" onchange="ChangeRows()"> <option>50</option> <option selected>100</option> <option>200</option> <option>1000</option> </select> <span>Record</span> <span>Total records: </span> <span id = 'TotalCount'> 0 </span>, Total Page Count: <span id = 'TotalPageCount'> 0 </span> halaman. </div> <hr/> <div style = "padding-left: 20px"> <div id = "grid_body"> </div> <v> <ul id = 'grid_paging'> </ul> </div> </div> </div> </div> </div> </div>
Konten tampilan ikon utama ada di HTML di bagian di atas.
<Div id = "grid_body"> </div>
Script pemrosesan yang secara dinamis memperoleh dan menghasilkan kode HTML untuk ditampilkan pada antarmuka adalah sebagai berikut.
$ .getjson (iconUrl + "&" + condition, function (data) {$ ("#icon_body"). html (""); $ .each (data.rows, function (i, item) {var tr = "<a href =/" javascript:;/"onclick =/" geticon ('" +" + ") item." title =/"" + item.displayName + "/"> "; tr + =" <i class =/"" + item.classname + "/" style =/"font-size: 2.2em/"> </i> "; // tr + =" <v> " + item.displayname +" </div> "; tr + =" <v> " +" $ "; });Setelah pengguna memilih ikon yang sesuai, kami dapat mengatur gaya rentang melalui skrip untuk menampilkan ikon yang kami pilih, seperti yang ditunjukkan di bawah ini.
$ ("#i_webicon"). attr ("class", className);Tentu saja, ketika kami memilih ikon, kami menyediakan kotak dialog pop-up untuk menampilkan ikon dengan kategori yang berbeda, sehingga pengguna dapat kembali setelah memilihnya.
Dengan cara ini, kami selesai, mengekstraksi berbagai jenis grafik dari file ikon, kemudian menyimpannya dalam database, dan menampilkannya di halaman, agar kami dapat memilih dan mengatur secara dinamis.
Di atas adalah ringkasan pengalaman kerangka pengembangan metronik bootstrap yang diperkenalkan oleh editor kepada Anda [empat] pengetahuan yang relevan tentang ekstraksi dan pemanfaatan ikon bootstrap. Saya harap ini akan membantu semua orang. Jika Anda ingin mengetahui informasi lebih lanjut, harap perhatikan situs web Wulin.com!