HTML5 MUI 란 무엇입니까?
mui는 HTML5+ 사양을 기반으로 하는 오픈 소스 프런트 엔드 UI 프레임워크로, HTML5+ 확장 기능의 기본 기능을 활용하여 일반적인 UI 컨트롤의 성능 및 플랫폼 간 문제를 해결합니다. HTML5+ iOS로, Android App을 모바일 브라우저에도 동시에 게시할 수 있습니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5&&mui 버전 3.7.2, Dell G3 컴퓨터.
html5 MUI 프레임워크
HTML5+
mui 프레임워크와 일치하는 스타일 프레임워크는 HTML5+ 사양을 기반으로 하는 오픈 소스 프런트 엔드 UI 프레임워크로 성능 문제를 해결하기 위해 HTML5+ 확장 기능을 활용합니다. 일반적인 UI 컨트롤 및 크로스 플랫폼 문제.
MUI의 UI 구성 요소 디자인은 iOS 7을 기반으로 하며 일부 Android 전용 컨트롤로 보완됩니다. MUI 프레임워크는 원래 프레임워크의 일부 문제를 효과적으로 해결하고 고성능 앱을 쉽게 개발할 수 있습니다.
동시에 mui는 HTML5+ 환경이 없는 일반 브라우저에 자동으로 적응하여 일반 웹 앱으로 축소할 수도 있습니다. 이를 통해 개발자는 mui를 사용하여 한 번 개발한 후 HTML5+ iOS 및 Android 앱에 게시할 수 있습니다. 동시에 또는 내부 모바일 브라우저에.
MUI는 기본 경험에 가장 가까운 모바일 앱용 UI 프레임워크로 포지셔닝됩니다. MUI의 여러 특성, 즉 가볍고 작으며 UI만 포함하고 모바일 앱용으로만 탄생했으며 기본 인터페이스 스타일을 생성하는 것은 이러한 포지셔닝입니다. MUI는 DOM 작업을 캡슐화하지 않고 UI와 관련 없는 작업을 수행하지 않는다는 점에서 jQuery와 다릅니다.
mui 공식 웹사이트:
https://dev.dcloud.net.cn/mui/
MUI 페이지 전체 레이아웃
페이지의 전체 레이아웃을 구축하고 상단 및 하단 탐색 모음이 고정됩니다. , 특정 콘텐츠는 컨테이너
에 배치됩니다. 콘텐츠 탐색 시 탐색바는 고정되고 콘텐츠의 주요 부분만 변경됩니다
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="css/mui.min.css" rel="stylesheet" /> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-close mui-pull-right"></a> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 id="标题">标题</h1> </header> <nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">HTML5 MUI 란 무엇입니까?</span> </a> </nav> <div class="mui-content"> //主体内容 </div> <script src="js/mui.min.js"></script> <script type="text/javascript"> mui.init() </script> </body> </html>
내장 메서드 및 개체
mui() 메서드: jQuery의 $() 메서드와 동일하며 CSS 선택기를 사용하여 HTML 개체를 얻고 mui 개체 배열을 반환합니다.
mui 개체를 DOM으로 변환 object:
var obj1 = mui('#title '); //miu object
var obj2 = obj[0]; // DOM objecteach() 메서드: 순회를 수행하는 jQuery의 Each() 메서드와 동일 작업
init() 메서드: MUI 프레임워크는 mui.init() 메서드에 많은 기능 구성을 집중시킵니다. 특정 기능을 사용하려면 mui.init() 메서드에서 해당 매개변수 구성만 완료하면 됩니다. 현재 mui.init 메소드 구성이 지원됩니다: 하위 페이지 생성, 페이지 닫기, 동작 이벤트 구성, 미리 로드, 풀다운 새로 고침, 풀업 로드, 시스템 상태 표시줄 배경색 설정
-
scrollTo() 메소드: 윈도우 화면을 지정된 위치로 스크롤
mui.scrollTo(ypos[,duration][,handler])- ypos는 정수 값, 상단에 표시할 문서의 y 좌표 창 문서 표시 영역의 왼쪽 모서리.
- duration은 롤링 시간이며 단위는 밀리초입니다.
- handler는 스크롤이 끝난 후 실행되는 콜백 함수입니다.
mui.os 개체: 현재 실행 환경을 결정하는 데 사용됩니다.
mui.os.plus: 5+ 기반에서 실행 중인지 여부
mui.os.android, mui.os.ios, mui.os. ipad, mui.os.iphone도 비슷합니다
이벤트 관리
1. 탭 이벤트: 클릭 트리거
element.addEventListener('tap',function(){
//点击响应逻辑
},false);2. 이벤트 바인딩: mui(selecto1).on(event,selector2,handler);
event는 "tap"과 같이 모니터링할 이벤트의 이름을 나타내는 문자열 유형이고, handler는 이벤트가 트리거될 때의 콜백 함수이며, selector1과 selector2는 모두 선택기이지만 selector2는 아래의 하위 선택기여야 합니다. selector1로 표시되는 HTML 요소 객체
3. 이벤트 취소: 바인딩된 이벤트 취소
mui(selector).off()//取消selector所有事件 mui(selector1).off(event,selector2)//取消作用于selector2的所有事件 mui(selector1).off(event,selector2，handler)//取消作用于selector2的特定事件
4. 이벤트 트리거링: 특정 DOM 요소의 이벤트를 동적으로 트리거합니다.trigger(element, event, data);
5. 제스처 이벤트 : 일반적으로 사용되는 제스처 표현 방법 소개
| 카테고리 | 이벤트 이름 | Description |
|---|---|---|
| Click | tap | 화면 클릭 |
| 클릭 | 더블탭 | 더블탭 화면 탭하기 |
| 길게 누르기 | 길게 탭하기 | 화면 길게 누르기 |
| 길게 누르기 | 길게 누르기 | 화면 길게 누르기 |
| 길게 누르기 | 해제 | 화면 나가기 |
| 스와이프 | 왼쪽으로 스와이프 | 왼쪽으로 스와이프 |
| 스와이프 | swiperright | 오른쪽으로 스와이프 |
| 스와이프 | swipeup | 위로 스와이프 |
| swipedown | swipedown | swipedown |
| Drag | dragstart | 드래그 시작 |
| drag | drag | drag |
| drag | dragedd | 드래그 오버 |
窗口管理
HTML5+初始化： mui.plusReady(function(){ … });
打开新窗口：mui.openWindow(参数配置对象);
关闭窗口：MUI框架将窗口关闭功能封装在mui.back方法中，具体执行逻辑是:当前Webview为预加载页面，则hide当前Webview；否则，close当前Webview，共有三种方法实现
- 点击class属性中包含"mui-action-back"的控件
- 在屏幕内快速向右滑动：mui.init({swipeBack:true//启用右滑关闭功能})
- Android自动监听back键：
mui.init({
keyEventBind:{
backbutton:true//启用右滑关闭功能}
});预加载：提前创建窗口，在跳转时之间得到窗口，减少加载的过程
mui.init({
preloadPages:[
{
url:prelaod-page-url,//页面路径
id:preload-page-id,//Webview的id
styles:{},//窗口参数
extras:{},//自定义扩展参数
subpages:[{},{}]//预加载页面的子页面
}
],
preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制
});子页面：多个窗口合成一个，方便实现局部滚动功能
mui.init({
subpages:[{
url:'list.html',
id:'list.html',
styles:{
top:'45px',//mui标题栏默认高度为45px；
bottom:'45px'//默认为0px，可不定义；
}
}]
});相关推荐：《html视频教程》
위 내용은 HTML5 MUI 란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
HTML의 테이블 테두리
Sep 04, 2024 pm 04:49 PM
HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.
HTML의 중첩 테이블
Sep 04, 2024 pm 04:49 PM
HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.
HTML 여백-왼쪽
Sep 04, 2024 pm 04:48 PM
HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.
HTML 테이블 레이아웃
Sep 04, 2024 pm 04:54 PM
HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.
HTML 입력 자리 표시자
Sep 04, 2024 pm 04:54 PM
HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.
PHP에서 HTML/XML을 어떻게 구문 분석하고 처리합니까?
Feb 07, 2025 am 11:57 AM
이 튜토리얼은 PHP를 사용하여 XML 문서를 효율적으로 처리하는 방법을 보여줍니다. XML (Extensible Markup Language)은 인간의 가독성과 기계 구문 분석을 위해 설계된 다목적 텍스트 기반 마크 업 언어입니다. 일반적으로 데이터 저장 AN에 사용됩니다
HTML 정렬 목록
Sep 04, 2024 pm 04:43 PM
HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.
HTML 온클릭 버튼
Sep 04, 2024 pm 04:49 PM
HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.
