HTML5 MUI 란 무엇입니까?

青灯夜游원래의: 2022-06-02 14:27:252652검색

mui는 HTML5+ 사양을 기반으로 하는 오픈 소스 프런트 엔드 UI 프레임워크로, HTML5+ 확장 기능의 기본 기능을 활용하여 일반적인 UI 컨트롤의 성능 및 플랫폼 간 문제를 해결합니다. HTML5+ iOS로, Android App을 모바일 브라우저에도 동시에 게시할 수 있습니다.

HTML5 MUI 란 무엇입니까?

이 튜토리얼의 운영 환경: 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 페이지 전체 레이아웃

페이지의 전체 레이아웃을 구축하고 상단 및 하단 탐색 모음이 고정됩니다. , 특정 콘텐츠는

컨테이너

에 배치됩니다. 콘텐츠 탐색 시 탐색바는 고정되고 콘텐츠의 주요 부분만 변경됩니다

HTML5 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 class="mui-title">标题</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 object
each() 메서드: 순회를 수행하는 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(&#39;tap&#39;,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:&#39;list.html&#39;,
      id:&#39;list.html&#39;,
      styles:{
        top:&#39;45px&#39;,//mui标题栏默认高度为45px；
        bottom:&#39;45px&#39;//默认为0px，可不定义；
      }
    }]
  });

HTML5 MUI 란 무엇입니까?

html5 MUI 프레임워크

MUI 페이지 전체 레이아웃

내장 메서드 및 개체

이벤트 관리

窗口管理

관련 기사