모바일 HTML5에서 MUI 프레임워크를 사용하는 방법

이전의 많은 프런트 엔드 프레임워크(특히 반응형 레이아웃 프레임워크)를 고려할 때 UI 컨트롤은 웹 페이지와 너무 많이 비슷하고 기본 느낌이 없으므로 기본 UI를 추구하는 것도 MUI의 중요한 목표입니다. MUI는 iOS 플랫폼 UI를 기반으로 하며 Android 플랫폼에 고유한 일부 UI 컨트롤을 보완합니다. MUI는 크게 세 가지 의미를 가지고 있습니다. 1. 별도로 출시된 컴퓨터 운영 체제인 Windows의 다국어 버전 2. 할랄 인증에 대한 세계에서 가장 권위 있는 공식 기관 3. 이동 통신 기술의 고유명사. 이 글은 주로 모바일 HTML5 프론트엔드 프레임워크-MUI 사용에 대한 관련 정보를 소개하고 있는데, 편집자는 꽤 좋다고 생각합니다. 이제 여러분께 공유하고 참고할 수 있기를 바랍니다.

1. 이 프레임워크를 사용하기 전 준비

1. mui가 포함된 새 HTML 파일을 만듭니다.

Hbuilder에서 새 HTML 파일을 만들고 "mui가 포함된 HTML" 템플릿을 선택하면 이 템플릿이 기본값으로 설정됩니다. mui의 js 및 css 리소스 참조를 처리했습니다.

2. mheader 입력

상단 제목 표시줄은 모든 페이지에 필요합니다. 상단 탐색 표시줄을 빠르게 생성하려면 Hbuilder에 mheader를 입력하세요.

3. mbody 입력

상단 탐색 및 하단 탭 컨트롤을 제외하고 다른 컨트롤은 .mui-content 컨트롤에 배치하여 .mui-content 부분이 포함된 코드를 빠르게 생성하는 것이 좋습니다.

2. UI 구성 요소

1.accordion(접이식 패널)

접이식 패널은 다음과 같이 보조 목록과 유사합니다.

<ul class="mui-table-view"> 
        <li class="mui-table-view-cell mui-collapse">
            <a class="mui-navigate-right" href="#">面板1</a>
            <p class="mui-collapse-content">
                <p>面板1子内容</p>
            </p>
        </li>
    </ul>
<ul class="mui-table-view"> 
        <li class="mui-table-view-cell mui-collapse">
            <a class="mui-navigate-right" href="#">面板2</a>
            <p class="mui-collapse-content">
                <p>面板2子内容</p>
            </p>
        </li>
    </ul>

2.buttons(버튼)

일반 버튼

추가 버튼 노드 .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 mui-btn-outlined">默认</button>
<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">蓝色</button>
<button type="button" class="mui-btn mui-btn-success mui-btn-outlined">绿色</button>
<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.gallery(그림 휠 재생)

그림 회전판은 슬라이드 플러그인에서 상속되므로 해당 DOM 구조 및 이벤트는 슬라이드 플러그인과 동일합니다.

루프 재생은 지원되지 않습니다. 기본이며 DOM 구조는 다음과 같습니다.

<p class="mui-slider">
  <p class="mui-slider-group">
    <p class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></p>
    <p class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></p>
    <p class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></p>
    <p class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></p>
  </p>
</p>

현재 사진 캐러셀에 1, 2, 1이 있다고 가정합니다. 3과 4의 사진이 4개 있습니다. 첫 번째 사진부터 왼쪽으로 슬라이드하여 사진을 전환합니다. . 네 번째 사진으로 전환할 때 계속 왼쪽으로 슬라이드하면 다음 두 가지 효과가 있습니다.

1. 루핑 지원: 왼쪽으로 스와이프하면 첫 번째 사진으로 바로 전환됩니다.

2. 루핑은 지원되지 않습니다. 응답이 없으면 계속해서 네 번째 사진을 표시합니다. 사용자가 첫 번째 사진을 표시하려면 계속 오른쪽으로 스와이프하여 첫 번째 사진으로 전환해야 합니다. 네 번째 그림을 표시해도 마찬가지입니다. 이 문제의 구현은 .mui-slider-loop 클래스와 DOM 노드를 통해 제어되어야 합니다.

루프를 지원하려면 .mui-slider-loop를 추가해야 합니다. 클래스를 .mui-slider-group 노드에 추가하는 동시에 2개의 그림을 반복적으로 추가해야 합니다. 그림의 순서는 4, 1, 2, 3, 4, 1입니다. 코드 예는 다음과 같습니다.

<p class="mui-slider">
  <p class="mui-slider-group mui-slider-loop">
    <!--支持循环，需要重复图片节点-->
    <p class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="4.jpg" /></a></p>
    <p class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></p>
    <p class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></p>
    <p class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></p>
    <p class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></p>
    <!--支持循环，需要重复图片节点-->
    <p class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></p>
  </p>
</p>

mui 프레임워크에는 이미지 캐러셀 플러그인이 내장되어 있습니다. 이 플러그인으로 캡슐화된 JS API를 통해 사용자는 자동 회전 여부와 캐러셀 주기를 설정할 수 있습니다.

//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
  interval:3000//自动轮播周期，若为0则不自动播放，默认为0；
});

따라서 사진을 회전시키려면 재생이 자동으로 재생되어서는 안 되며 사용자가 수동으로 슬라이드하여 전환해야 합니다. 간격 매개변수를 0으로 설정하면 됩니다.

x번째 그림으로 이동하려면 이미지 캐러셀 플러그인의 gotoItem 메서드를 사용할 수 있습니다. 예:

//mui自带的on事件绑定，只能用事件委派方式
mui(".mui-content").on("tap","#btn",function(){
    gallery.slider().gotoItem(2);//调到第三张图片，index从0开始
});

4.input(입력 양식)

모든 입력은 .mui-input에 래핑됩니다. -row class , textarea 및 기타 요소의 width 속성은 기본적으로 width: 100%로 설정됩니다. 레이블 요소와 위 컨트롤을 .mui-input-group으로 래핑하면 최상의 배열이 제공됩니다.

(비밀번호 입력 상자 오른쪽에는 눈 아이콘이 있는데 특히 유용하다고 생각합니다.)

코드는 다음과 같습니다.

<form class="mui-input-group">
    <p class="mui-input-row">
        <label>用户名</label>
    <input type="text" class="mui-input-clear" placeholder="请输入用户名">
    </p>
    <p class="mui-input-row">
        <label>密码</label>
        <input type="password" class="mui-input-password" placeholder="请输入密码">
    </p>
</form>

mui는 현재 여러 입력 향상 기능도 제공합니다: 빠른 삭제 , 음성 입력 *5 이상만 가능하며 비밀번호 상자에는 숨겨진 비밀번호가 표시됩니다.

1) 빠른 삭제: 입력 컨트롤에 .mui-input-clear 클래스를 추가하면 오른쪽에 삭제 아이콘이 표시되며 현재 입력 콘텐츠가 지워집니다.

코드는 다음과 같습니다.

<form class="mui-input-group">
    <p class="mui-input-row">
        <label>快速删除</label>
        <input type="text" class="mui-input-clear" placeholder="请输入内容">
    </p>
</form>

2) 검색 상자: .mui-input-row와 동일한 수준에 .mui-input-search 클래스를 추가하고 검색 컨트롤을 사용할 수 있습니다

코드는 다음과 같습니다:

<p class="mui-input-row mui-search">
    <input type="search" class="mui-input-clear" placeholder="">
</p>

3) 음성 입력* 5+ 전용: 빠른 입력을 용이하게 하기 위해 mui는 HTML5+ 음성 입력을 통합합니다. 해당 입력 컨트롤에 .mui-input-speech 클래스만 추가하면 됩니다. 5+ 환경에서 음성 입력을 사용하려면

 4)密码框：给input元素添加.mui-input-password类即可使用

代码如下：

<form class="mui-input-group">
    <p class="mui-input-row">
        <label>密码框</label>
        <input type="password" class="mui-input-password" placeholder="请输入密码">
    </p>
</form>

5.list(列表)

mui封装的列表组件是比较简单也很好用的。只需要在ul节点上添加.mui-table-view类、在li节点上添加.mui-table-view-cell类即可

 

<ul class="mui-table-view">
    <li class="mui-table-view-cell">Item 1</li>
    <li class="mui-table-view-cell">Item 2</li>
    <li class="mui-table-view-cell">Item 3</li>
</ul>

运行结果如下图：

自定义列表高亮颜色

点击列表，对应列表项显示灰色高亮，若想自定义高亮颜色，只需要重写.mui-table-view-cell.mui-active即可，如下：

/*点击变灰色高亮*/
.mui-table-view-cell.mui-active{
    background-color: gray;
}

右侧添加导航箭头

若右侧需要增加导航箭头，变成导航链接，则只需在li节点下增加a子节点，并为该a节点增加.mui-navigate-right类即可，如下：

<ul class="mui-table-view">
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">Item 1</a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">Item 2</a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">Item 3</a>
    </li>
</ul>

运行结果如下：

右侧添加数字角标等控件

mui支持将数字角标、按钮、开关等控件放在列表中；mui默认将数字角标放在列表右侧显示，代码如下：

<ul class="mui-table-view">
    <li class="mui-table-view-cell">Item 1 
        <span class="mui-badge mui-badge-primary">1</span>
    </li>
    <li class="mui-table-view-cell">Item 2 
        <span class="mui-badge mui-badge-success">2</span>
    </li>
    <li class="mui-table-view-cell">Item 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">
            <p class="mui-media-body">
                幸福
                <p class=&#39;mui-ellipsis&#39;>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
            </p>
        </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">
            <p class="mui-media-body">
                木屋
                <p class=&#39;mui-ellipsis&#39;>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
            </p>
        </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">
            <p class="mui-media-body">
                CBD
                <p class=&#39;mui-ellipsis&#39;>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
            </p>
        </a>
    </li>
</ul>

运行结果如下：

结束语：mui框架使用起来确实很方便，它还有很多控件供我们使用，具体可在mui官网查看。

相关推荐：

MUI顶部选项卡的用法

比较总结mui页面跳转方式之间的差异

MUI实现上拉加载和下拉刷新的实例分享

위 내용은 모바일 HTML5에서 MUI 프레임워크를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!