1.MUI含义 目标:追求性能体验,追求原生UI感觉 重要特征:轻量 优势:MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K 基础:MUI以iOS平台UI为基础,补充部分Android平台特有的UI控件 2.下载Hello mui App 下载地址:https://github.com/dcloudio/mui   ——绿色按钮 3. mui 文档 mui官网:http://dev.dcloud.net.cn/mui/ui/ 正式使用步骤: 步骤1:在<head>

头部(mh) <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">标题</h1> </header> 图标 <span class="mui-spin

js依赖mui.css生成图片验证码 相关css和js引入路径 https://cdnjs.cloudflare.com/ajax/libs/mui/3.7.1/css/mui.css https://cdnjs.cloudflare.com/ajax/libs/mui/3.7.1/css/mui.min.css https://cdnjs.cloudflare.com/ajax/libs/mui/3.7.1/fonts/mui.ttf https://cdnjs.cloudflare.com/

最近在开发APP的过程中,遇到一个问题,就是内容有一个固定的头部和底部.         头部就是我们常用的header了,底部的话,就放置一个button,用来提交页面数据或者进入下一个页面等,效果如下: 这里面需要注意到的地方就是,头和底是固定的,但是中间的部分呢,由于要设置24小时的内容,从图中可以看到,只显示了03:00~13:00的内容,剩下的内容没显示出来.这里面,我们就需要用到区域滚动了,就是保持头和底不动,中间滚动,所以,我们就要用到MUI的scorll组件,根据MUI官网的介绍

mui 下拉刷新 此文提供的是mui这种下拉刷新.悬浮于页面上,比较好用. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-

使用HBuilder空项目搭建h5原生开发框架需要的文件配置: *css:mui.min.css *fonts:mui.ttf mui-icon-extra.ttf *js:mui.js mui.min.js 修改fonts可以在mui.main.css文件里面寻找@font-face 附文件包下载地址:http://files.cnblogs.com/files/bg-tab/h5libmui.zip vue-resource: GET: //打开文件 get里面参数(url,参数{a:1,b

今天实现9宫格菜单.先上效果图: 就是这个效果咯,界面不太美观,底部导航栏是为了苹果用户没有返回按键设计的,只是为了方便演示而已,没有做过多的处理.首先先说一下这个底部导航栏如何实现,这个底部导航栏小编我写在了主页面index.html中,下面附上代码: <!-- 底部nav开始 --> <nav class="mui-bar mui-bar-tab"> <a id="goBack" class="mui-tab-item m

今天感觉无聊,想听一首音乐.没有添加其他页面,只是在index_list.html页面进行代码添加而已. <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,min

本篇博文是继续MUI(1)博文. 上一篇博文小编写了两个页面,一个页面只写了一个头部导航栏,另一个页面写了一个按钮,然后这两个页面进行合并显示,即在头部导航栏页面加载显示另一个页面的按钮.仔细观察上一篇的最后截图效果会发现,在头部导航栏的左上角有一个侧滑图标,本篇博文就是实现一个侧滑菜单效果. 还是继续上一篇博文中应用到的项目,只是在之前项目的基础之上新建了一个页面,index_menu.html页面.index.html页面源代码如下: <!DOCTYPE html> <html>

今天小编用HBuilder+MUI开发移动APP,不用Android原生也不用IOS原生,仅仅用HTML5+MUI.小编也是初学者所以如有不准确的地方望大家指出帮助小编改正,同时也可以促进大家的深入学习. HBuilder的下载官网地址:http://www.dcloud.io/:MUI官网下载地址:https://www.muicss.com/. HBuilder是免费的,但是仅仅需要登录,安心注册,方向登录使用,完全免费的. 第一次启动HBuilder需要登录和简单的设置不过很easy啦.启

神坑记录: 1.js报错异常:没有找到"innerHeight"属性? 解决方案:暂时不知原因,通过对mui.view.js进行调试得知是跳转目标页没有 .mui-navbar-left 这个css类.所以加入到指定位置即可.详细看demo 2.背景颜色记得设置,如果没有设置层的背景颜色,默认是透明的会看到上一页作为背景就尴尬了 3.在问题1的基础上衍生,第一次成功,第二次会失败? 解决方案:在mui.viw.js大约244行中找到如下代码并且注释 if (this.previousN

MUI + SDK 使用笔记:   MUI是什么:http://ask.dcloud.net.cn/article/91   /* MUI 使用说明: * * 1.每个用到mui的页面都调用下mui.init. * 2.如果需要使用大H5+对象,就写到plusReady中,如plus对象. */   '''[MUI开发注意事项]-----------------------------------------------------------------------------------  

我们假设a.html 和b.html a.html 页面代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"

<!-- 校园公告详情界面 用于显示校园公告的详情信息 在校园公告界面点击某一条目后 进入本界面查看详情 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maxim

在MUI 框架中实现了支付宝支付后,以为MUI微信支付,也没什么大问题,结果这个问题困扰了我几天,后面再同事的提醒下终于弄出来了, 问题出在,开始使用Dcloud 公有证书 怎么也付不了....,后面改成自己就OK了....希望后来者看到此博,能节约一点时间. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" co

前端开发APP,从HBuilder开始~ 序 通过 HTML5 开发移动App 时,会发现HTML5 很多能力不具备.为弥补HTML5 能力的不足,在W3C 中国的指导下成立了www.HTML5Plus.org组织,推出HTML5+规范. HTML5+扩展了JavaScript 对象plus,使得js 可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头.陀螺仪.文件系统等,业务能力如上传下载.二维码.地图.支付.语音输入.消息推送等. HBuilder 的手机原生能力调用分2 个层

最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的变量,那就会报错,靠~~悲催了,就是说js如果动态加载(非浏览器加载因为浏览器加载时同步加载的会等待前一个js加载完成后才进行下一个js加载,这样就不会出现问题)那加载的文件是异步进行的,难怪啊!然后在网上找了些资料说用ajax同步加载,然后我试了真可以,下面就是我的代码分享出来给大家,但是注意这样

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title&

一.打开子页面 mui.init({ subpages:[{ url:your-subpage-url,//子页面HTML地址,支持本地地址和网络地址 id:your-subpage-id,//子页面标志 styles:{ top:subpage-top-position,//子页面顶部位置 bottom:subpage-bottom-position,//子页面底部位置 width:subpage-width,//子页面宽度,默认为100% height:subpage-height,//子页