MUI--高性能前端框架
2016-07-31 08:47
519 查看
MUI是什么?
最接近原生APP体验的高性能前端框架。相比同类框架的优势?
性能和体验的差距,一直是mobile app开发者放弃HTML5的首要原因。
浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新、侧滑抽屉卡顿等问题,这些都让HTML5开发者倍感挫败,尤其拿到Android低端机运行,摔手机的心都有;
浏览器默认控件样式又少又丑,制作一个漂亮的控件非常麻烦,也有一些制作简单的ui框架但性能低下。
mui框架有效的解决了这些问题,这是一个可以方便开发出高性能App的框架,也是目前最接近原生App效果的框架。
如何使用?
本次我们以一个简单的例子来进行说明,简单看一下MUI的使用。1、登录官网下载组件包
2、将组件包加入到项目中
3、引用组件中的相关文件。
4、添加简单代码实现功能。
DEMO
1、首先简述一下下载组件的方式,因为我找起来确实花了不少的时间a、登录官网
b、点击如下图片处
c、点击code,如下图片
d、点击下载
e、下载压缩包即可
到现在,下载已经没有问题了,我看正式开始例子。
1、打开压缩包将dist文件夹中的内容直接添加到项目中。
2、在head标签中引入如下文件
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--标准mui.css--> <link rel="stylesheet" href="../css/mui.min.css">
3、在body标签中写如下内容
<header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">单选框(radio)</h1> </header> <div class="mui-content"> <h5 class="mui-content-padded">图标左对齐</h5> <div class="mui-card"> <form class="mui-input-group"> <div class="mui-input-row mui-radio mui-left"> <label>radio</label> <input name="radio1" type="radio"> </div> <div class="mui-input-row mui-radio mui-left"> <label>radio</label> <input name="radio1" type="radio" checked> </div> <div class="mui-input-row mui-radio mui-left mui-disabled"> <label>disabled radio</label> <input name="radio1" type="radio" disabled="disabled"> </div> </form> </div> <h5 class="mui-content-padded">图标右对齐</h5> <div class="mui-card"> <form class="mui-input-group"> <div class="mui-input-row mui-radio"> <label>radio</label> <input name="radio1" type="radio"> </div> <div class="mui-input-row mui-radio"> <label>radio</label> <input name="radio1" type="radio" checked> </div> <div class="mui-input-row mui-radio mui-disabled"> <label>disabled radio</label> <input name="radio1" type="radio" disabled="disabled"> </div> </form> </div> <h5 class="mui-content-padded">列表模式的单选框</h5> <ul class="mui-table-view mui-table-view-radio"> <li class="mui-table-view-cell"> <a class="mui-navigate-right"> Item 1 </a> </li> <li class="mui-table-view-cell mui-selected"> <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> <div class="mui-content-padded"> <p id="info"></p> </div> </div>4、js的内容如下:
<script src="../js/mui.min.js"></script> <script> mui.init({ swipeBack:true //启用右滑关闭功能 }); var info = document.getElementById("info"); document.querySelector('.mui-table-view.mui-table-view-radio').addEventListener('selected',function(e){ info.innerHTML = "当前选中的为:"+e.detail.el.innerText; }); </script>5、下过预览如下
我同时使用了bootstrap和MUI,个人感觉做移动端软件的话还是MUI要好用些,以上是一个简单的应用,请大牛们多多指点。
相关文章推荐
- 96. Unique Binary Search Trees && 95. Unique Binary Search Trees II && 241. Different Ways to Add Parentheses && 282. Expression Add Operators
- LeetCode- Count Numbers with Unique Digits
- Windows消息响应机制之四:PostQuitMessage和GetMessage函数
- vue spa project build
- dojo/dom dojo/domConstruct dojo/query
- 【连载】研究EasyUI系统——EasyUI入门例子
- URAL 2026 Dean and Schedule 贪心、双端队列(deque)、队列(queue)
- 蓝牙之三-StateMachine
- 基于EasyUI Treegrid的权限管理资源列表
- UVA1584 UVALive3225 Circular Sequence【水题】
- hdu3080 The plan of city rebuild(最小生成树)
- Java实现一个GUI的SEO软文生成器v1
- 解决Android Studio Gradle Build特别慢的问题
- ue4-日志使用
- stack/queue
- ue4 选人工具
- ue4-定时器(废弃)
- Android UI控件--单选与复选框
- 自定义UITableViewCell
- ue4 内存管理 – 实践