前端框架mui是什么,

　　前 言

　　鉴于之前很多前端框架(尤其是响应式布局的)，UI控件看起来太像网页，没有原生感，所以追求原生UI也是MUI的重要目标。MUI基于iOS平台的UI，补充了一些Android平台特有的UI控件。MUI主要有三层含义：一是多语种版本的电脑操作系统Windows，单独发行；二、世界最权威的清真认证官方组织；第三，移动通信技术中的专有名词。

　　一、 使用该框架之前的准备工作

　　1.用mui创建新的HTML文件

　　在Hbuilder中新建一个HTML文件，选择“带mui的HTML”模板，可以快速生成一个mui页面模板。默认情况下，该模板处理mui的js和css资源引用。

　　2.输入mheader

　　顶部的标题栏是每一页所必需的。在Hbuilder中输入mheader可以快速生成顶部导航栏。

　　3.输入mbody

　　除了顶部导航和底部选项卡之外，建议将其他控件放在。mui-内容控制。在Hbuilder中输入mbody，快速生成包含。mui-内容。

　　二、UI组件

　　1 .手风琴(折叠面板)

　　折叠面板类似于次级列表，如下所示：

　　Ul class= mui-table-view Li class= mui-table-view-cell mui-collapse A class= mui-navigate-right href= # Panel 1/A div class= mui-collapse-content p/div/Li/Ul class= mui-table-view Li class= mui-table-view-cell mui-collapse A class= mui-navigate-right href= # Panel 2/A div class= mui-collapse-content p Panel 2子

　　普通按钮

　　添加。mui-btn类到按钮节点生成默认按钮；如果需要其他颜色的按钮，可以继续添加相应的类，例如，mui-btn-blue可以变成蓝色按钮。

　　Button type= Button class= mui-BTN default/button Button type= Button class= mui-BTN mui-BTN-primary 蓝色/Button type= Button class= mui-BTN mui-BTN-成功绿色/Button Button type= Button class= mui-BTN mui-BTN-警告黄色/Button type= Button class= mui-BTN mui-BTN-危险红色/Button Button Button type= Button class= mui-BTN mui-BTN-皇家紫色/Button运行后

　　如果您想要没有背景色和边框的按钮，只需添加。mui-BTN-概述类，代码如下：

　　Button type= Button class= mui-BTN mui-BTN-概述 default/Button Button type= Button class= mui-BTN mui-BTN-初级mui-BTN-概述蓝色/Button type= Button class= mui-BTN mui-BTN-成功mui-BTN-概述绿色/Button type= Button class= mui-BTN mui-BTN-warning mui-BTN-概述黄色/Button type= Button class= mui-BTN mui-BTN-危险mui-BTN-概述

　　3 .画廊(图片旋转木马)

　　图片轮播继承自幻灯片插件，所以其DOM结构和事件与幻灯片插件相同；

　　默认不支持循环播放，DOM结构如下：

　　 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= 3 . jpg //a/Div Div class= mui-slider-item a href= 从第一张图片开始，向左滑动以切换图片。当切换到第四张图片时，继续向左滑动。接下来，会有两个效果：

　　循环支持：向左滑动直接切换到第一张图片；不支持循环：向左滑动，无响应，继续显示第四张图片，如果要显示第一张图片，必须连续向右滑动才能切换到第一张图片；当显示第一张图片时，是否继续向右滑动显示第四张图片也是同样的问题。这个问题的实现需要通过。mui-slider-loop类和DOM节点；

　　为了支持循环，您需要添加。控件上的mui滑块循环类。mui滑块组节点。同时需要重复添加两张图片，图片的顺序变成：4，1，2，3，4，1。代码示例如下：

　　div class= mui-slider div class= mui-slider-group mui-slider-loop ！-支持循环，需要一个重复的图片节点-div class= mui-slider-item mui-slider-item-duplicate A href= # img src= 4 . jpg //A/div class= mui-slider-item A href= 1 . jpg //A/div div class= mui-slider-item A href= # img src= 2 . jpg //A/div div class= mui-slider-item A href-支持循环，图片节点需要重复-div class= mui-slider-item mui-slider-item-duplicate a href= # img src= 1 . jpg //a/div/div mui框架内置了图片轮播插件，用户可以通过该插件封装的JS API设置是否自动播放。

　　//获取滑块插件对象var gallery=mui(。mui-slider’)；gallery . slider({ interval:3000//自动轮播循环，如果为0，则不自动播放，默认为0；});所以，如果想让图片轮播不自动播放，而是由用户手动切换，只需要通过上述方法将interval参数设置为0即可。

　　要跳到第x张图片，可以使用图片轮播插件的gotoItem方法，例如：

　　//mui自己的on事件绑定只能由事件委托mui()完成。mui-内容)。on (tap ， # BTN ，function () {gallery.slider())。goto item(2)；//调到第三张图片，索引从0开始)；4 .输入(输入表单)

　　所有元素(如input和textarea)都包装在。默认情况下，mui-input-row类将被设置为width:100%；将label元素和上面的control控件包装在。mui-input-group可以得到最佳的排列。

　　(密码输入框右侧还有一个眼睛图标，我觉得特别有用。)

　　代码如下：

　　form class= mui-input-group Div class= mui-input-row 标签用户名/标签输入类型= text class= mui-input-clear placeholder=请输入用户名/Div class= mui-input-row 标签密码/标签输入类型= password class= mui-input-password placeholder=请输入密码/div/formmui目前提供了几个输入增强功能：快速删除、仅语音输入*5和显示隐藏密码的密码框。

　　1)快速删除：只需添加。输入控件的清除类。当输入控件中有内容时，右侧会有一个删除图标，点击它会清除当前输入的内容。

　　代码如下：

　　form class= mui-input-group div class= mui-input-row 标签快速删除/标签输入类型= text class= mui-input-clear placeholder=请输入内容/div/form2)搜索框：添加。mui在同一级别。mui输入行。

　　代码如下：

　　div= mui-input-row Mui-search input type= search class= Mui-input-clear placeholder= /div 3)语音输入*5 only:为了方便快速输入，Mui集成了HTML5的语音输入，只需要添加。对应的输入控件上的语音类。

　　4)密码框：添加。mui-input-password类添加到input元素中以使用它。

　　代码如下：

　　form class= mui-input-group div class= mui-input-row 标签密码框/标签输入类型= password class= mui-input-password placeholder=请输入密码/div/form5.list (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:灰色；}右侧添加导航箭头

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。