Dans l'essai précédent, basé sur le résumé de l'expérience de Bootstrap Metronic de la vue d'ensemble du cadre du cadre de développement et du traitement des modules de menu, il introduit le traitement des modules de menu et introduit principalement comment obtenir dynamiquement des enregistrements à partir des listes de menu de base de données et de construction. Le style d'icône des informations de menu est également obtenu à partir de la base de données, nous devons donc obtenir dynamiquement les différentes définitions d'icônes dans Bootstrap. Cet article présente principalement comment extraire les informations d'icône de bootstrap et les stocker dans la base de données pour mon usage.
1. Affichage du menu et diverses icônes bootstrap
Nous pouvons voir sur la figure ci-dessous que pour la beauté du menu, chaque élément de menu (il y a des menus à trois niveaux ici) a une icône. Bien que les tailles soient différentes, nous utilisons des icônes bootstrap, qui sont toutes à partir du contenu de la bibliothèque d'icônes bootstrap.
La bibliothèque d'icônes bootstrap est divisée en trois catégories:
Font Awesome: Bootstrap de la police d'icône spéciale de Bootstrap. Toutes les icônes incluses dans Font Awesome sont un vecteur, afin qu'ils puissent être mis à l'échelle arbitrairement, en évitant les tracas d'avoir une icône pour faire plusieurs tailles. Les styles que CSS peuvent définir pour les polices peuvent également être utilisés sur ces icônes.
Par exemple, voici quelques icônes impressionnantes de police:
Icônes simples: collectez les logos de nombreux sites Web et fournissez des tailles de haute qualité et différentes d'images de format PNG aux internautes. Toute l'icône du droit d'auteur appartient à leur entreprise.
Comme indiqué ci-dessous, quelques icônes d'icônes simples:
Glyphicons: comprend une collection de 200 graphiques de format de police symboliques fournis par les glyphicons. Les Halflings Glyphicons sont généralement facturés, mais après la négociation entre les auteurs de bootstrap et des glyphicons, les développeurs peuvent l'utiliser sans payer de frais.
Voici quelques-uns du contenu des glyphiques:
En utilisant ces contenus d'icônes, nous pouvons simplement introduire les styles suivants.
<link href = "/ content / metter / font-awesome / css / font-wesome.min.css" rel = "Stylesheet" /> <link href = "/ contenu / metter / simple-line-icons / simple-line-icons.min.min.css" rel = "Stylesheet" /> <link href = "/ contenu / mètre / bootstrap / css / bootstrap.min.css" rel = "Stylesheet" />
Ces icônes prennent en charge l'affichage thématique de divers bootstraps, comme indiqué dans les effets suivants.
Ou vous pouvez également agrandir l'icône:
2. Extraction de diverses icônes bootstrap
Grâce à l'introduction ci-dessus, nous avons probablement une certaine compréhension de ces icônes bootstrap, mais si nous voulons pouvoir sélectionner des icônes dans l'édition de menu, nous devons toujours extraire ces informations dans la base de données et l'afficher pour moi, sinon la configuration dynamique ne sera pas possible.
Par exemple, dans l'interface d'édition ci-dessus, nous fournissons une sélection dynamique des icônes Web du menu. Si nous enregistrons une collection des icônes ci-dessus dans la base de données, nous pouvons l'afficher dans l'interface et sélectionner le graphique approprié à partir de celui-ci.
Sur la base des fichiers de style ci-dessus, analysons-le. Pour le contenu de fichier de Font-Awesome.min.css, la partie de définition de l'icône est la suivante.
Pour les ICons simples, sa définition de style est similaire, comme indiqué ci-dessous.
Pour les glyphicons, sa définition de style est également très similaire, comme indiqué ci-dessous.
Sur la base de ces informations, nous pouvons extraire les informations dont nous avons besoin grâce à la correspondance d'expression régulière et les stocker dans la base de données pour réaliser la première étape de l'affichage dynamique et de la sélection des icônes.
Par exemple, nous définissons des variables partielles et des expressions régulières pour gérer ces contenus de fichier:
String regex = "^ //. (? <name>. *?): avant // s * // {"; List <string> filepathList = new list <string> () {"~ / contenu / themes / meteronic / actifs / global / plugins / bootstrap / css / bootstrap.css", "~ / contenu / themes / meteronic / actifs / global / plugins / simple-lines-icons / simple-line-icons.css",};Ensuite, le contenu de la collection peut être extrait en lisant le contenu du fichier et en obtenant l'enregistrement correspondant.
String Content = FileUtil.FileToString (realPath); List <string> matchList = cregex.getList (contenu, regex, 1);
Enfin, nous pouvons enregistrer ces informations dans la table de la base de données.
BootstrapiConInfo info = new bootstrapiConinfo () {displayName = item, className = prefix + item, createTime = DateTime.Now, SourceType = SourceType,}; Bllfactory <bootstrapicon> .instance.insert (info);Enfin, l'enregistrement est stocké dans la base de données. L'effet est le suivant. Les informations sur les icônes dont nous avons besoin ont été enregistrées. De cette façon, lorsque vous l'utilisez, vous pouvez utiliser les informations de chaque champ pour afficher une belle interface.
3. Affichage et sélection de l'icône bootstrap
Après avoir lu le fichier et extrait le contenu dans des expressions régulières, puis les enregistrer dans la base de données, ces informations d'icône peuvent être utilisées pour nous et peuvent être affichées de manière classifiée sur la page. Chaque type d'icône est paginé pour une requête facile, comme indiqué ci-dessous.
Le code de page d'affichage de cette partie est similaire à l'affichage de données ordinaire, mais les informations d'en-tête ne sont pas requises. Jetons un coup d'œil au code de la page comme indiqué ci-dessous.
<div> <div> <div> <i> </i> Informations d'icône </ div> </ div> <v> <div> <span> Afficher par page </span> <select id = "Rows" onChange = "ChangeRows ()"> <option> 50 </ option> <option Selected> 100 </ Option> <poption> 200 </popoption> <popoptive> 1000 </pticul> </lect> </span> <span id = 'totalCount'> 0 </span>, Nombre de pages: <span id = 'TotalPageCount'> 0 </span> pages. </ div> <hr /> <div style = "padding-left: 20px"> <div id = "grid_body"> </div> <div> <ul id = 'grid_paging'> </ul> </div> </div> </div> </div> </div> </div>
Le contenu d'affichage de l'icône principale est dans le HTML dans la partie ci-dessus.
<div id = "grid_body"> </div>
Le script de traitement qui obtient dynamiquement et génère du code HTML à afficher sur l'interface est le suivant.
$ .getjson (iconUrl + "&" + condition, fonction (data) {$ ("# icon_body"). html (""); $ .each (data.rows, fonction (i, item) {var tr = "<a href = /" javascrip title = / "" + item.displayName + "/"> "; tr + =" <i class = / "" + item.classname + "/" style = / "font-size: 2.2em /"> </ i> "; // // tr + =" <div> "+ item.displayname +" </ div> "; tr + =" </a> "; $ ($ (" icony "). });Une fois que l'utilisateur a sélectionné l'icône correspondante, nous pouvons définir le style de portée via le script pour afficher l'icône que nous avons sélectionnée, comme indiqué ci-dessous.
$ ("# i_webicon"). attr ("class", className);Bien sûr, lorsque nous sélectionnons une icône, nous fournissons une boîte de dialogue contextuelle pour afficher les icônes avec différentes catégories, afin que l'utilisateur puisse revenir après l'avoir sélectionné.
De cette façon, nous avons terminé, extraction de différents types de graphiques du fichier icône, puis les stockant dans la base de données et les affichant sur la page, pour nous de sélectionner et de définir dynamiquement.
Ce qui précède est le résumé de l'expérience du cadre de développement métronique bootstrap qui vous a été présenté [quatre] les connaissances pertinentes sur l'extraction et l'utilisation des icônes bootstrap. J'espère que ce sera utile à tout le monde. Si vous souhaitez en savoir plus d'informations, veuillez faire attention au site Web Wulin.com!