이전의 많은 프런트엔드 프레임워크(특히 반응형 레이아웃 프레임워크)를 고려할 때 UI 컨트롤은 웹 페이지와 너무 유사하고 기본 느낌이 없습니다. 따라서 기본 UI를 추구하는 것도 MUI의 중요한 목표입니다. MUI는 iOS 플랫폼 UI를 기반으로 하며 Android 플랫폼에 고유한 일부 UI 컨트롤을 보완합니다. MUI는 크게 세 가지 의미를 가지고 있습니다. 1. 별도로 출시된 컴퓨터 운영 체제인 Windows의 다국어 버전 2. 할랄 인증에 대한 세계에서 가장 권위 있는 공식 기관 3. 이동 통신 기술의 고유명사.
1. 프레임워크 사용 전 준비사항1. mui가 포함된 새 HTML 파일을 만듭니다.
Hbuilder에서 새 HTML 파일을 생성하고 mui가 포함된 HTML 템플릿을 선택하여 mui 페이지 템플릿을 빠르게 생성합니다. 이 템플릿은 기본적으로 mui의 js 및 css 리소스 참조를 처리합니다.
2. m헤더를 입력하세요
상단 제목 표시줄은 모든 페이지에 필요합니다. 상단 탐색 표시줄을 빠르게 생성하려면 Hbuilder에 mheader를 입력하세요.
3. mbody를 입력하세요
상단 탐색 및 하단 탭 컨트롤을 제외하고 다른 컨트롤을 .mui-content 컨트롤에 배치하는 것이 좋습니다. .mui-content 포함된 코드 블록을 빠르게 생성하려면 Hbuilder에 mbody를 입력하세요.
1.아코디언(접이식 패널)
접는 패널은 다음과 같이 보조 목록과 유사합니다.
<ul class=mui-table-view> <li class=mui-table-view-cell mui-collapse> <a class=mui-navigate-right href=#>패널 1</a> <div class=mui- Collapse-content> <p>패널 1 하위 콘텐츠</p> </div> </li> </ul><ul class=mui-table-view> <li class=mui-table-view-cell mui - 접기> <a class=mui-navigate-right href=#>패널 2</a> <div class=mui-collapse-content> <p>패널 2 하위 콘텐츠</p> </div> </li> </ul >
2.버튼(버튼)
일반 버튼
.mui-btn 클래스를 버튼 노드에 추가하여 기본 버튼을 생성하세요. 다른 색상의 버튼이 필요한 경우 해당 클래스를 계속 추가하세요. 예를 들어 .mui-btn-blue 파란색 버튼이 될 수 있습니다.
<button type=button class=mui-btn>기본값</button><button type=button class=mui-btn mui-btn-primary>파란색</button><button type=button class=mui-btn mui- btn -success>녹색</button><button type=button class=mui-btn mui-btn-warning>노란색</button><button type=button class=mui-btn mui-btn-danger>빨간색</button><button type=button class=mui-btn mui-btn-royal>보라색</button>
실행 후 효과는 다음과 같습니다.
배경색과 테두리가 없는 버튼을 원할 경우 .mui-btn-outlined 클래스만 추가하면 됩니다. 코드는 다음과 같습니다.
<button type=button class=mui-btn-outlined>기본값</button><button type=button class=mui-btn mui-btn-primary mui-btn-outlined>파란색</button><버튼 유형 =버튼 클래스=mui-btn mui-btn-success mui-btn-outlined>녹색</button><버튼 type=button class=mui-btn mui-btn-warning mui-btn-outlined>노란색</button><button type=button class=mui-btn mui-btn-danger mui-btn-outlined>빨간색</button> <button type=button class=mui-btn mui-btn-royal mui-btn-outlined>보라색</button>
실행 결과는 다음과 같습니다.
3.갤러리(사진 회전목마)
이미지 캐러셀은 슬라이드 플러그인에서 상속되므로 해당 DOM 구조와 이벤트는 슬라이드 플러그인과 동일합니다.
루프 재생은 기본적으로 지원되지 않습니다. DOM 구조는 다음과 같습니다.
<div class=mui-slider> <div class=mui-slider-group> <div class=mui-slider-item><a href=#><img src=1.jpg /></a></div > <div class=mui-slider-item><a href=#><img src=2.jpg /></a></div> <div class=mui-slider-item><a href=#><img src=3.jpg /></a></div> <div class=mui-slider-item><a href=#><img src =4.jpg /></a></div> </div></div>
현재 사진 캐러셀에는 1, 2, 3, 4개의 사진이 있다고 가정합니다. 첫 번째 사진부터 왼쪽으로 슬라이드하면 4번째 사진으로 전환할 때 계속해서 왼쪽으로 슬라이드합니다. 두 가지 효과가 있습니다:
첫 번째 그림이 표시될 때 오른쪽으로 계속 슬라이드하여 네 번째 그림을 표시하는 것도 동일한 문제입니다. 이 문제의 구현은 .mui-slider-loop 클래스와 DOM 노드를 통해 제어해야 합니다.
루핑을 지원하려면 .mui-slider-group 노드에 .mui-slider-loop 클래스를 추가해야 합니다. 동시에 2개의 그림을 반복적으로 추가해야 합니다. , 1, 2, 3, 4, 1. 코드 예시는 다음과 같습니다.
<div class=mui-slider> <div class=mui-slider-group mui-slider-loop> <!--루핑 지원, 그림 노드 반복 필요--> <div class=mui-slider-item mui-slider - 항목 중복><a href=#><img src=4.jpg /></a></div> <div class=mui-slider-item><a href=#><img src=1.jpg /></a></div> <div class=mui-slider-item><a href=#><img src=2.jpg /></a> </div> <div class=mui-slider-item><a href=#><img src=3.jpg /></a></div> <div class=mui-slider-item><a href=#><img src=4.jpg /></a></div> <!--루핑 지원, 그림 노드 반복 필요--> <div class= mui -slider-item mui-slider-item-duplicate><a href=#><img src=1.jpg /></a></div> </div></div>
mui 프레임워크에는 이미지 캐러셀 플러그인이 내장되어 있습니다. 이 플러그인으로 캡슐화된 JS API를 통해 사용자는 자동 캐러셀 여부와 캐러셀 주기를 설정할 수 있습니다. 다음은 코드 예입니다.
//슬라이더 플러그인 객체 가져오기 var gallery = mui('.mui-slider'); gallery.slider({ 간격:3000//자동 회전 주기, 0이면 자동으로 재생되지 않습니다. 기본값은 0; });따라서 이미지 캐러셀이 자동으로 재생되지 않고 사용자가 수동으로 슬라이딩하여 전환되도록 하려면 위의 방법을 통해 간격 매개변수를 0으로 설정하기만 하면 됩니다.
x번째 사진으로 이동하려면 사진 캐러셀 플러그인의 gotoItem 메소드를 사용할 수 있습니다. 예를 들면 다음과 같습니다.
//mui와 함께 제공되는 on 이벤트 바인딩은 이벤트 위임 메서드 mui(.mui-content).on(tap,#btn,function(){ gallery.slider().gotoItem(2);//Deployment만 사용할 수 있습니다. 세 번째 그림의 경우 인덱스는 0}부터 시작됩니다.4.입력(입력형태)
.mui-input-row 클래스에 포함된 모든 입력, 텍스트 영역 및 기타 요소의 너비 속성은 기본적으로 width: 100%; 로 설정됩니다. 레이블 요소와 위 컨트롤을 .mui-input-group 으로 래핑하면 최상의 배열을 얻을 수 있습니다.
(비밀번호 입력창 오른쪽에도 눈 아이콘이 있는데 특히 유용하다고 생각합니다)
코드는 다음과 같습니다:
<form class=mui-input-group> <div class=mui-input-row> <label>사용자 이름</label> <input type=text class=mui-input-clear placeholder=사용자 이름을 입력하세요> </ div> <div class=mui-input-row> <label>비밀번호</label> <input type=password class=mui-input-password placeholder=비밀번호를 입력하세요> </div></form>
mui는 현재 빠른 삭제, 음성 입력(*5+ 전용), 숨겨진 비밀번호를 표시하는 비밀번호 상자 등 여러 가지 입력 향상 기능도 제공합니다.
1) 빠른 삭제: 입력 컨트롤에 .mui-input-clear 클래스를 추가하면 됩니다. 입력 컨트롤에 콘텐츠가 있으면 오른쪽에 삭제 아이콘이 표시되며 이를 클릭하면 현재 입력 콘텐츠가 지워집니다.
코드는 다음과 같습니다:
<form class=mui-input-group> <div class=mui-input-row> <label>빠른 삭제</label> <input type=text class=mui-input-clear placeholder=내용을 입력하세요> </div ></form>
2) 검색 상자: 검색 컨트롤을 사용하려면 .mui-input-search .mui-input-row -search 클래스를 추가하세요.
코드는 다음과 같습니다:
<div class=mui-input-row mui-search> <input type=search class=mui-input-clear placeholder=></div>
3) 음성 입력 *5+만 해당: 빠른 입력을 용이하게 하기 위해 mui는 HTML5+ 음성 입력을 통합합니다. 5+ 환경에서 음성 입력을 사용하려면 해당 입력 컨트롤에 .mui-input-speech 클래스를 추가하기만 하면 됩니다.
4) 비밀번호 상자: 사용하려면 입력 요소에 .mui-input-password 클래스를 추가하세요.
코드는 다음과 같습니다:
<form class=mui-input-group> <div class=mui-input-row> <label>비밀번호 상자</label> <input type=password class=mui-input-password placeholder=비밀번호를 입력하세요> </div ></form>
5.목록(목록)
mui로 캡슐화된 목록 구성 요소는 비교적 간단하고 사용하기 쉽습니다. ul 노드에 .mui-table-view 클래스를 추가하고 li 노드에 .mui-table-view-cell 클래스만 추가하면 됩니다.
<ul class=mui-table-view> <li class=mui-table-view-cell>항목 1</li> <li class=mui-table-view-cell>항목 2</li> <li class= mui-table-view-cell>항목 3</li></ul>
실행 결과는 다음과 같습니다.
목록 강조 색상 사용자 정의 목록을 클릭하면 해당 목록 항목이 회색으로 강조 표시됩니다. 강조 색상을 사용자 정의하려면 다음과 같이 .mui-table-view-cell.mui-active 다시 작성하기만 하면 됩니다.
/*회색을 강조하려면 클릭하세요*/.mui-table-view-cell.mui-active{ background-color: grey;} 오른쪽에 탐색 화살표를 추가하세요. 오른쪽에 탐색 화살표를 추가하여 탐색 링크로 전환해야 하는 경우 다음과 같이 li 노드 아래에 a 노드를 추가하고 a 노드에 .mui-navigate-right 클래스를 추가하기만 하면 됩니다. :
<ul class=mui-table-view> <li class=mui-table-view-cell> <a class=mui-navigate-right>항목 1</a> </li> <li class=mui-table- view-cell> <a class=mui-navigate-right>항목 2</a> </li> <li class=mui-table-view-cell> <a class=mui-navigate-right>항목 3</a> </li></ul>
실행 결과는 다음과 같습니다.
오른쪽에 디지털 코너 마커와 같은 컨트롤을 추가하세요.mui는 목록에 디지털 첨자, 버튼, 스위치 및 기타 컨트롤을 배치하는 것을 지원합니다. mui는 기본적으로 목록 오른쪽에 디지털 첨자를 배치합니다.
<ul class=mui-table-view> <li class=mui-table-view-cell>항목 1 <span class=mui-badge mui-badge-primary>1</span> </li> <li class= mui-table-view-cell>항목 2 <span class=mui-badge mui-badge-success>2</span> </li> <li class=mui-table-view-cell>항목 3 <span class=mui-badge>3</span> </li></ul>
실행 결과는 다음과 같습니다.
(그림 및 텍스트 목록) 그림 및 텍스트 목록은 목록 구성 요소에서 상속되며 주로 .mui-media , .mui-media-object , .mui-media-body , .mui-pull-left/right 클래스를 추가합니다.
<ul class=mui-table-view> <li class=mui-table-view-cell mui-media> <a href=javascript:;> <img class=mui-media-object mui-pull-left src=img /a.jpg> <div class=mui-media-body> 행복<p class='mui-ellipsis'>사랑하는 사람과 함께 자는 것은 행복한 일이지만, 코를 골면 어떻게 해야 할까요? </p> </div> </a> </li> <li class=mui-table-view-cell mui-media> <a href=javascript:;> <img class=mui-media-object mui- pull-left src=img/b.jpg> <div class=mui-media-body> 목조 주택<p class='mui-ellipsis'>여름에는 아이스크림을 만들고 멜론을 먹고, 겨울에는 난로 주변에 앉아 따뜻하게 지낼 수 있는 이런 작은 목조 주택을 갖고 싶습니다.</p> </div> </a> </li> <li class=mui-table -view-cell mui-media> <a href=javascript:;> <img class=mui-media-object mui-pull-left src=img/c .jpg> <div class=mui-media-body> CBD < p class='mui-ellipsis'>오븐 모드의 도시는 황혼녘에 뒤집어진 팔레트처럼 보입니다.</p> </div> </a> </li></ul>
실행 결과는 다음과 같습니다.
결론: mui 프레임워크는 실제로 사용하기 매우 편리합니다. 또한 사용할 수 있는 컨트롤도 많이 있습니다. 자세한 내용은 mui 공식 웹사이트에서 확인할 수 있습니다.
위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.