В предыдущем эссе, основанном на обработке Metronic Metronic Framework [I] обзор структуры и обработки модулей меню, он вводит обработку модулей меню и в основном представляет, как динамически получать записи из списков меню базы данных и строительства. Стиль значника информации о меню также получен из базы данных, поэтому мы должны динамически получить различные определения значков в начальной загрузке. Эта статья в основном представляет, как извлечь информацию о значке Bootstrap и сохранить ее в базе данных для моего использования.
1. Дисплей меню и различные значки начальной загрузки
Из рисунка ниже мы видим, что для красоты меню, каждый пункт меню (здесь есть трехуровневые меню) имеет значок. Хотя размеры разные, мы используем значки Bootstrap, которые из содержимого библиотеки икон Bootstrap.
Библиотека значков начальной загрузки разделена на три категории:
Font Awesome: Special Icon Scons Bootstrap. Все значки, включенные в Font Awesome, являются вектором, поэтому их можно произвольно масштабировать, избегая хлопот, имеющих значок для выполнения нескольких размеров. Стили, которые CSS может установить для шрифтов, также могут использоваться на этих значках.
Например, следующие приведены некоторые удивительные значки для шрифтов:
Простые значки: собирайте логотипы многих веб-сайтов и предоставляют высококачественные и разные размеры изображений формата PNG для пользователей сети. Все иконы авторские права принадлежат их компании.
Как показано ниже, приведены некоторые значки простых икон:
Глификоны: включает в себя коллекцию из 200 символических диаграмм форматов шрифтов, предоставленных глификонами. Glyphicons Halflings обычно взимается, но после переговоров между авторами Bootstrap и Glyphicons разработчики могут использовать его без платы.
Вот некоторые из контента Glyphics:
Используя эти значки, мы можем просто представить следующие стили.
<link href = "/content/meter/font-awesome/css/font-awesome.min.css" rel = "stylesheet"/> <link href = "/content/meter/simple-icons/simple-line-icons.min.css" rel = "styleshons"/> <ссылка href = "/content/meter/bootstrap/css/bootstrap.min.css" rel = "stylesheet"/>
Эти значки поддерживают тематическое отображение различных начальных загрузок, как показано в следующих эффектах.
Или вы также можете сделать значок больше:
2. Извлечение различных значков начальной загрузки
Благодаря вышеуказанному введению у нас, вероятно, есть определенное понимание этих значков начальной загрузки, но если мы хотим иметь возможность выбирать значки в редактировании меню, нам все равно нужно извлечь эту информацию в базу данных и отобразить ее для выбора, в противном случае динамическая конфигурация не будет возможна.
Например, в приведенном выше интерфейсе редактирования мы предоставляем динамический выбор веб -значков меню. Если мы записываем коллекцию вышеуказанных значков в базе данных, мы можем отобразить его в интерфейсе и выбрать из него соответствующую диаграмму.
На основании приведенных выше файлов стиля, давайте проанализируем его. Для содержимого файла в font-awesome.min.css часть определения значка заключается в следующем.
Для простых линии, его определение стиля аналогично, как показано ниже.
Для глификонов его определение стиля также очень похоже, как показано ниже.
Основываясь на этой информации, мы можем извлечь необходимую информацию, которая необходима в соответствии с регулярным сопоставлением выражения и сохранить ее в базе данных, чтобы реализовать первый шаг динамического отображения и выбора значков.
Например, мы определяем частичные переменные и регулярные выражения для обработки этих файлов:
string regex = "^//. (? <mame>.*?): до // s*// {"; List <string> filePathlist = новый список <string> () {"~/content/themes/meteronic/arsets/global/plugins/bootstrap/css/bootstrap.css", "~/content/themes/meteronic/arsets/global/plugins/simple-line-icons/simple-line-icons.csss",};Затем содержимое сбора можно извлечь, прочитав содержимое файла и получая соответствующую запись.
string content = fileutil.fileToString (realPath); Список <string> matchlist = cregex.getlist (content, regex, 1);
Наконец, мы можем сохранить эту информацию в таблице баз данных.
Bootstrapiconinfo info = new bootstrapiconinfo () {displayname = item, classname = prefix + item, createtime = datetime.now, sourcetype = sourcetype,}; Bllfactory <bootstrapicon> .instance.insert (info);Наконец, запись хранится в базе данных. Эффект заключается в следующем. Информация о значке, которая нам нужна, была записана. Таким образом, при его использовании вы можете использовать информацию каждого поля для отображения красивого интерфейса.
3. Дисплей и выбор значков начальной загрузки
После того, как мы прочитали файл и извлеките контент в регулярных выражениях, а затем сохраняем его в базу данных, эта информация о значке может использоваться для нас и может отображаться в классифицированном виде на странице. Каждый тип значка выращен на страре для легкого запроса, как показано ниже.
Код отображения в этой части аналогичен регулярному отображению данных, но информация заголовка не требуется. Давайте посмотрим на код страницы, как показано ниже.
<div> <div> <div> <i> </i> Информация о значке </div> </div> <div> <div> <pan> Показать на странице </span> <select id = "nachange =" changerows () "> <опция> 50 </option> <опция. </span> <span id = 'totalcount'> 0 </span>, общее количество страниц: <span id = 'totalpagecount'> 0 </span> страницы. </div> <hr/> <div style = "addding-left: 20px"> <div id = "grid_body"> </div> <div> <ul id = 'grid_paging'> </ul> </div> </div> </div> </div> </div> </div>
Основной контент отображения значка находится в HTML в вышеуказанной части.
<div id = "grid_body"> </div>
Сценарий обработки, который динамически получает и генерирует HTML -код для отображения на интерфейсе, выглядит следующим образом.
$ .getJson (iConurl + "&" + condition, function (data) {$ ("#icon_body"). html (""); $. title =/"" + item.displayname + "/"> "; tr + =" <i class =/"" + item.classname + "/" style =/"font-size: 2.2em/"> </i> "; // // tr + =" <div> " + item.displayname +" </div> "; tr + =" </a> "; });После того, как пользователь выбирает соответствующий значок, мы можем установить стиль SPAN через скрипт для отображения выбранного нами значка, как показано ниже.
$ ("#i_webicon"). attr ("class", classname);Конечно, когда мы выбираем значок, мы предоставляем диалоговое окно всплывающего окна для отображения значков с разными категориями, чтобы пользователь мог вернуться после выбора.
Таким образом, мы готовы, извлекая различные типы диаграмм из файла значков, затем хранят их в базе данных и отображая их на странице, чтобы мы могли динамически выбирать и установить.
Выше приведено краткое изложение опыта метода Bootstrap Metronic Development, введенной редактором для вас [четыре] соответствующих знаний об извлечении и использовании значков начальной загрузки. Я надеюсь, что это будет полезно для всех. Если вы хотите узнать больше информации, обратите внимание на веб -сайт wulin.com!