转载请注明出处:http://blog.csdn.net/qq_26525215 本文源自【大学之旅_谙忆的博客】 如何对MUI中的switch开关按钮进行监听, 页面代码如下: <form class="<em>mui</em>-input-group">
1、快速构建页面 1.1 新建含mui的HTML文件 在Hbuilder中,新建HTML文件,选择”含mui的HTML“模板,可以快速生成mui页面模板,该模板默认处理了mui的js、css资源引用。 图1.2 MUI顶部 1.4设置底部导航栏 第一种,MUI有自带的图标库 ? mui-icon mui-icon-left-nav mui-pull-left">
" style="background:white;;">
mui.plusReady(function() { //1.把数组转换为对象存入 var str = JSON.stringify(array); plus.storage.setItem
//调用方法 /* 1、tm.os.ios/tm.os.android/tm.os.versions().webKit //表示安卓设备/ios设备/webKit内核 */ var tm = (function(document) { "use strict"; var readyRE = /complete|loaded|interactive/, //complete 可返回浏览器是否已完成对图像的加载。 idSelectorRE = /^#([\w-]+)$/,
最近参加比赛,项目使用了 MUI,有些内容在使用过程中遇到了很多问题,记录下来,方便以后遇到时更好的解决。 页面 页面,或者说窗口,在 MUI 里叫做 Webviewer, 获取页面 ID - 跳转前提 获取页面 ID mui.plusReady(function(){ var ws=plus.webview.currentWebview ; console.log( "当前Webview窗口:"+ws.getURL() ); }); 页面跳转 关闭当前页面,跳转到父页,并刷新 在子页面初始化时,注册beforeback方法; mui.init (main,'gohome'); 二级页面返回 var taskList = plus.webview.getWebviewById('tasklist'); taskList.reload(); mui.back mui.openWindow({ url: 'my-task-list.html', id: 'tasklist', } 页面刷新 function reflash(){
接下来由我给大家讲解一下MUI列表式布局的代码。
普通列表
.mui-table-view类,然后在li标签中加入.mui-table-view-cell类,非常的简单。 代码如下:
<style type="text/css">
.mui-table-view-cell.mui-active{
background-color 图文列表
.mui-media:媒体类
.mui-media-object:媒体对象
.mui-media-body:媒体主体
.mui-pull-left/right:该类的作用是使图片左/右浮动。 ">
<img class="<em>mui</em>-media-object <em>mui</em>-pull-left
–标准mui.css–> <link rel=”stylesheet” href=”../css/mui.min.css”> <! /css/mui.picker.min.css” /> <style> html, body, .mui-content { height: 0px; margin: ”> <div class=”mui-content-padded”> <h5 class=”mui-content-padded”>常规示例 <button id=’demo4 ′ class=”btn mui-btn mui-btn-block”>选择日期 …</button>
< /js/mui.min.js”></script> <script src=”..var scroll = mui('.mui-scroll-wrapper').scroll(); document.querySelector('.mui-scroll-wrapper').addEventListener
1 <script type="text/javascript" charset="utf-8"> 2 mui.init(); 3 mui.plusReady document.getElementById("test").addEventListener("tap", function() { 5 mui.openWindow test"> 跳转 search.html 20 接收 21 <script type="text/javascript" charset="utf-8"> 22 mui.init //业务数据获取完毕,并已插入当前页面DOM; 27 //注意:若为ajax请求,则需将如下代码放在处理完ajax响应数据之后; 28 mui.plusReady 关闭等待框 33 plus.nativeUI.closeWaiting(); 34 //显示当前页面 35 mui.currentWebview.show
/css/mui.min.css" rel="stylesheet" /> </head> <body>
,然后手动拷贝到项目中使用; MUI的介绍 MUI是最接近原生APP体验的高性能前端框架。 image-20200315212803694 MUI的基本使用 下载MUI 访问github进行下载:https://github.com/dcloudio/mui ? 导入MUI 首先将MUI的文件拷贝到项目中,如下: ? image-20200315222330414 在main.js导入MUI,如下: ? /static/lib/mui-master/dist/css/mui.min.css' 在app组件使用mui按钮 首先看看官网的示例,如下: ? type="button" class="mui-btn mui-btn-warning">黄色</button> <button type="button" class="<em>mui</em>-btn <em>mui</em>-btn-danger
如果用的mui的scroll控件。
xgplayer-fullscreen').trigger("click"); lockOrientation(); }) //强制横屏及全屏 function lockOrientation(){ mui.plusReady xgplayer-fullscreen').css('display','none'); $("#videoPlayBox").show(); $(".wrap-top").hide(); }); } //返回 mui.plusReady (function() { plus.screen.lockOrientation("portrait-primary"); var old_back = mui.back; mui.back =
基于MUI、H5+这一套技术开发APP,曾经写了几篇相关文章关注的人还真不少,以至于我总感觉现在开发H5比原生的更火热。今天就来分析下,算是以往的一个学习总结。 结论: 只要会前端开发就能开发APP了,对于没有原生开发能力,对于一些简单的、不那么复杂的应用或者没那么高要求的标准可以用MUI,因为上手简单,开发速度快、成本低。 未来: 我们使用MUI、H5+开发APP主要为了简单方便快速,我们的APP复杂度也没那么高,同时因为我们的客户不确定有时要iOS的、有时要Android的,我们的队伍原生人少,前端多。 所以现有的项目如果没有特殊情况一般都会用MUI。 跨平台一直是我们的希望,我们也在不断的摸索、学习、尝试。 我个人使用MUI主要开发Android,因为我自己做了个小项目(dctt前面文章有介绍),单独在Android上我认为效果还是可以的。
="utf-8">
mui.init();
</script>
</head>
<body>
hello
mui点击加载,下拉刷新,上下整合代码 mui的是上拉加载,但是老大说要做成点击加载,所以就改了一些 代码应该是有些问题的,测到了大家就自己改下。 /css/mui.min.css" rel="stylesheet" /> 10 <link rel="stylesheet" type="text/css" href=".. </div> 21 <div id="pullrefresh" class="<em>mui</em>-content" style="padding-bottom: 0;background: # /js/<em>mui</em>.min.js"></script> 40 <script type="text/javascript" src=".. ) { 176 <em>mui</em>.plusReady(function() { 177 setTimeout(function() { <em>mui</em>('#pullrefresh
如下:
效果图1 image.png 效果图2 image.png 效果图3 image.png 效果图4 image.png DEMO : https://github.com/Light413/mui_demo
首先声明:由于backgroundColor的值采用的是RGBA,IE8及以下不支持,所以此效果不支持IE8及以下的浏览器 此效果采用的RGBA做的透明渐变,所以CSS样式中的backgroundColor的值必须是RGBA css代码 body,p,h1{margin: 0;} .module-layer{ width: 100%; position: fixed; top: 0; left: 0; z-index: 100000; } .module-layer-