이전 에세이에서 Bootstrap Metronic의 개발 프레임 워크 [I] 프레임 워크 개요 및 메뉴 모듈 처리에 대한 경험 요약을 기반으로 한 메뉴 모듈의 처리를 소개하고 주로 데이터베이스에서 레코드를 동적으로 얻고 메뉴 목록을 작성하는 방법을 소개합니다. 메뉴 정보의 아이콘 스타일은 데이터베이스에서도 얻어 지므로 부트 스트랩에서 다양한 아이콘 정의를 동적으로 얻어야합니다. 이 기사는 주로 부트 스트랩의 아이콘 정보를 추출하여 사용하기 위해 데이터베이스에 저장하는 방법을 소개합니다.
1. 메뉴 디스플레이 및 다양한 부트 스트랩 아이콘
아래 그림에서 메뉴의 아름다움을 위해 각 메뉴 항목 (여기에는 3 단계 메뉴가 있음)에 아이콘이 있습니다. 크기는 다르지만 부트 스트랩 아이콘 라이브러리의 내용에서 나온 부트 스트랩 아이콘을 사용합니다.
부트 스트랩 아이콘 라이브러리는 세 가지 범주로 나뉩니다.
글꼴 굉장한 : 부트 스트랩의 특별한 아이콘 글꼴. Font Awesome에 포함 된 모든 아이콘은 벡터이므로 여러 크기를 수행 할 아이콘의 번거 로움을 피하기 위해 임의로 조정할 수 있습니다. CSS가 글꼴로 설정할 수있는 스타일 도이 아이콘에 사용할 수 있습니다.
예를 들어 다음은 글꼴 멋진 아이콘입니다.
간단한 아이콘 : 많은 웹 사이트의 로고를 수집하고 네티즌에게 고품질의 PNG 형식 사진을 제공합니다. 모든 아이콘 저작권은 회사에 속합니다.
아래에 표시된 것처럼 간단한 아이콘의 일부 아이콘입니다.
Glyphicons : Glyphicons에서 제공하는 200 개의 기호 글꼴 형식 차트 모음이 포함되어 있습니다. Glyphicons Halflings는 일반적으로 청구되지만 Bootstrap과 Glyphicons의 협상 후 개발자는 비용을 지불하지 않고 사용할 수 있습니다.
Glyphics 컨텐츠는 다음과 같습니다.
이 아이콘 내용을 사용하여 다음 스타일 만 소개 할 수 있습니다.
<link href = "/content/meter/font-awesome/css/font-awesome.min.css"rel = "스타일 시트"/> <link href = "/content/meter/simple-line-icons/simple-line-icons.min.css"rel = "Stylesheet"/> 링크 href = "/content/meter/bootstrap/css/bootstrap.min.css"rel = "스타일 시트"/>
이 아이콘은 다음 효과에서 볼 수 있듯이 다양한 부트 스트랩의 주제별 표시를 지원합니다.
또는 아이콘을 더 크게 만들 수도 있습니다.
2. 다양한 부트 스트랩 아이콘의 추출
위의 소개를 통해 아마도 이러한 부트 스트랩 아이콘에 대한 이해가있을 것입니다. 그러나 메뉴 편집에서 아이콘을 선택할 수 있으려면이 정보를 데이터베이스에 추출하여 선택할 수 있도록 표시해야합니다. 그렇지 않으면 동적 구성이 불가능합니다.
예를 들어, 위의 편집 인터페이스에서는 메뉴 웹 아이콘의 동적 선택을 제공합니다. 데이터베이스에 위의 아이콘 모음을 기록하면 인터페이스에 표시하고 적절한 차트를 선택할 수 있습니다.
위의 스타일 파일을 기반으로 분석하겠습니다. font-awesome.min.css의 파일 내용의 경우 아이콘 정의 부분은 다음과 같습니다.
간단한 라인 아이콘의 경우 그 스타일 정의는 아래와 같이 비슷합니다.
글리 피콘의 경우 그 스타일 정의도 아래와 같이 매우 유사합니다.
이러한 정보를 바탕으로 정규 표현식 일치를 통해 필요한 정보를 추출하여 데이터베이스에 저장하여 동적 디스플레이 및 아이콘 선택의 첫 번째 단계를 실현할 수 있습니다.
예를 들어, 우리는 이러한 파일 내용을 처리하기 위해 부분 변수와 정규식을 정의합니다.
String regex = "^//. (? <name>.*?) : 이전 // s*// {"; List <string> filepathlist = new List <string> () { "~/컨텐츠/테마/meteronic/assets/global/plugins/bootstrap/css/bootstrap.css", "~/content/esples/meteronic/assets/global/plugins/simple-line-icons/simple-line-icons.css",};그런 다음 파일 내용을 읽고 일치하는 레코드를 얻어 수집 내용을 추출 할 수 있습니다.
문자열 content = fileUtil.fileToString (realPath); list <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> 아이콘 정보 </div> </div> <div> <div> <div> <span> 페이지 당 표시 </span> <select id = "rows"onchange = "changerows ()"> <plured> 50 </옵션> <옵션 selected> 100 </옵션> <옵션> 200 </옵션> 옵션> <span> span> record> record> </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> </div>
기본 아이콘 디스플레이 컨텐츠는 위 부분의 HTML에 있습니다.
<div id = "grid_body"> </div>
인터페이스에 표시 할 HTML 코드를 동적으로 얻고 생성하는 처리 스크립트는 다음과 같습니다.
$ .getJson (iconUrl + "&" + 조건, 함수 (data) {$ ( "#icon_body"). html ( ""); $ .each (data.rows, function (i, item) {var tr = "<a href =/"javaScript :;/"onclick =/"geticon ( ' + item.classname + ")/"class.classname + "). title =/"" + item.displayName + "/"> "; tr + ="<i class =/"" + item.className + "/"style =/"font-size : 2.2em/"> </i> "; // tr + ="<div> " + item.displayName +"</div> "</a>"; $ ( "#icon_body"). 부록 (tr);사용자가 해당 아이콘을 선택한 후 스크립트를 통해 스팬 스타일을 설정하여 아래와 같이 선택한 아이콘을 표시 할 수 있습니다.
$ ( "#i_webicon"). attr ( "class", classname);
물론 아이콘을 선택하면 팝업 대화 상자가 다른 범주의 아이콘을 표시하여 사용자가 선택한 후 반환 할 수 있도록 팝업 대화 상자를 제공합니다.
이런 식으로, 우리는 아이콘 파일에서 다른 유형의 차트를 추출한 다음 데이터베이스에 저장 한 다음 페이지에 표시하여 동적으로 선택하고 설정할 수 있도록 수행합니다.
위는 편집자가 소개 한 부트 스트랩 메트로닉 개발 프레임 워크의 경험에 대한 요약입니다. [4] 부트 스트랩 아이콘의 추출 및 활용에 대한 관련 지식. 모든 사람에게 도움이되기를 바랍니다. 더 많은 정보를 알고 싶다면 Wulin.com 웹 사이트에주의를 기울이십시오!