mui学习

改变状态栏的颜色

mui.init({

statusBarBackground: '#f7f7f7'

});

</script>

生成顶部导航栏

在Hbuilder中输入mheader，可以快速生成顶部导航栏。

<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> //返回键left

<h1 class="mui-title">mui学习</h1>

</header>

titile 为图片

<body>

</h1>

</header>

</body>

除顶部导航、底部选项卡两个控件之外，其它控件都建议放在.mui-content控件内，在Hbuilder中输入mbody，可快速生成包含.mui-content的代码块。

使用系统集成的图片:

只需要在span节点上分别增加.mui-icon、.mui-icon-name两个类即可（name为图标名称，例如：weixin、weibo等），如下代码即可显示一个微信图标：

mui中的图标并不是图片，而是字体

多个图标字体合成一个字体文件，避免每张图片都需要联网请求；

字体可任意缩放，而图片放大会失真、缩小则浪费像素；

可通过css任意改变颜色、设置阴影及透明效果；

创建tableview

ul li class = mui-table-view

cell class = mui-table-view-cell

cell上自带有右箭头 class = mui-navigate-right

创建switch

switch class = mum-switch 添加手势off - on class = mum-switch-handle

<li class="mui-table-view-cell">仅在WiFi下载图片

</div>

</li>

</li>

</li>

</ul>

</div>

弹框 addEventListener 添加监听事件点击

mui.plusReady(function(){

document.getElementById("clear").addEventListener('tap', function() {

plus.nativeUI.confirm("确认删除吗?”, function(e){},"提醒", ["确认", "取消”]);

});

</script>

actionsheet 长按保存图片到相册

mui.init({

gestureConfig:{longtap: true} //允许长按

});

var code = document.getElementById('code');

//添加监听

code.addEventListener('longtap', function(){

plus.nativeUI.actionSheet({

cancel : '取消',

buttons : [{title : '保存到相册'}]

}, function(e){

var index = e.index;

if (e.index == 1) {

plus.gallery.save(code.src, function () {

mui.toast('保存成功');

}, function(){

mui.toast('保存失败,请重试');

})

}

});

</script>

生成带有返回箭头的navigation —mheader 待返回箭头

点击cell跳转另外一个VC

mui.plusReady(function(){

document.getElementById("about").addEventListener('tap', function() {

//plus.webview.show("about.html", 'slide-in-right', 200);

mui.openWindow({url: "about.html",show:{autoShow:true}});

});

图片居中显示

文章开头缩进2个文本

.artical {font-size: 14px; text-indent: 2em;}

body .mui.content margin : 0px 来消除navigation的自带的高度

mui.plusReady(function() {

//创建子窗口

plus.webview.currentWebview().append(plus.webview.create('list.html', 'list', {

top: "44px",

bottom: "0px"

}));

折叠面板

某个面板默认展开，只需要在包含.mui-collapse类的li节点上，增加.mui-active

<a class="mui-navigate-right" href="#">ItemItemItemItemItemItemItemItemI<br />temItemItemItemItemItem<br /> 1</a>

the first page content

</div>

</li>

the second page content

</div>

</li>

the third page conten

</div>

</li>

</ul>

数字角标

无需底色，则增加.mui-badge-inverted类

button

无底色、有边框的按钮，增加.mui-btn-outlined类

<button class="mui-btn mui-btn-success">green</button>

轮播图

</div>

<!--自动轮播—yans>

var gallery = mui('.mui-slider');

gallery.slider({interval:5000});

</script>

图文列表

幸福

<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办</p>

</div></a></li>

木屋

<p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖</p>

</div></a></li>

</ul>

个数增减

</div>

侧滑

caidanjuti zhanshi d content

</div>

</aside>

</header>

zhujiemian zhanshi content

</div>

弹出菜单

<li class="mui-table-view-cell"><a href="#">Itrem1</a></li>

<li class="mui-table-view-cell"><a href="#">Itrem2</a></li>

<li class="mui-table-view-cell"><a href="#">Itrem3</a></li>

<li class="mui-table-view-cell"><a href="#">Itrem4</a></li>

<li class="mui-table-view-cell"><a href="#">Itrem5</a></li>

</ul>

</div>

<a href="#popover" id="apenPopover" class="mui-btn mui-btn-primary mui-btn-block">打开弹出菜单</a>

弹出菜单单选款

<label>radio</label>

</div>

<label>radio2</label>

</div>

var list = document.querySelector('.mui-table-view.mui-table-view-radio');

list.addEventListener('select', function(e){

console("当前选中的为" + e.detail.el.innerText);

});

</script>

</div>

</div>

</div>

</div>

<li class="mui-table-view-cell">第1个选项卡子项</li>

</ul>

</div>

<li class="mui-table-view-cell">第2个选项卡子项</li>

</ul>

</div>

mui学习的更多相关文章

mui学习记录
1.页面间传值 2.mui如何增加自定义icon图标 http://ask.dcloud.net.cn/article/128 3.设计基于HTML5的APP登录功能及安全调用接口的方式(原理篇) h ...
mui学习笔记
一.页面刷新问题 1.父页面A跳转到子页面B,B页面修改数据后再跳回A页面,刷新A页面数据 (1).父页面A代码 window.addEventListener("pageflowrefre ...
H5+ and mui学习记录
基础 1.H5+ 定义实现了一些调用原生方法的对象 2.其他的原生方法可以通过Native.js调用 webview 3.webview是调用原生界面的H5+对象 4.单个webview只承载单个页面 ...
mui学习链接
http://dev.dcloud.net.cn/mui/snippet/ http://www.bcty365.com/content-146-2453-1.html hbuilder转rem值: ...
MUI学习03-滚动图（幻灯片）及菜单项（九宫格）
引入CSS:<link rel="stylesheet" href="../css/mui.min.css"& ...
MUI学习04-开关按钮
HTML代码如下: <div class="mui-switch"> <div class="mui-switch-handle">&l ...
MUI学习03-弹出菜单(弹出列表)
弹出菜单HTML代码如下: <div class="mui-content">  <button ...
MUI学习02-顶部导航栏
建议:先看一下MUI注意事项连接:http://ask.dcloud.net.cn/article/122 固定栏靠前所谓的固定栏,也就是带有.mui-bar属性的节点,都是基于fixed定位的元 ...
MUI学习01-MUI概括、使用前引入CSS及JS
1.MUI含义目标:追求性能体验,追求原生UI感觉重要特征:轻量优势:MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K 基础:MUI以iOS平台UI为基础,补充部分 ...

随机推荐

无法连接到localhost。其他信息：用户“sa”登录失败。原因：该用户被禁用。（Microsoft Sql Server,错误：18470）.
18470错误: 解决方案: 使用windows身份验证登录之后,选择安全性--->登录名--->sa--->右击--->属性: 右击选择属性进入属性页面: 选择状态,然后再登 ...
Varnish 入门
本文将介绍 varnish 的工作流程,安装以及 varnish 的配置三个方面的内容.首先简单的介绍 varnish 以及其工作流程,大概了解其内部原理,然后介绍了 varnish 的安装方法,最后 ...
c# 24种设计模式
备忘录模式(Memento Pattern) 策略模式(Strategy Pattern) 抽象工厂模式(Abstract Factory Pattern) 代理模式(Proxy Pattern) 单 ...
10.Mysql索引
10.索引的设计和使用10.1 索引概述BTREE索引:Mysql(MyIASM和Innodb)默认的索引类型.前缀索引:对索引字段的前N个字符创建索引.N的最大取值和存储引擎有关,MyIASM支持最 ...
hdu 1198 (并查集 or dfs) Farm Irrigation
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1198 有题目图11种土地块,块中的绿色线条为土地块中修好的水渠,现在一片土地由上述的各种土地块组成,需要浇 ...
python基础易错题
1.以下代码输入什么: class Person: a = 1 def __init__(self): pass def getAge(self): print(__name__) p = Perso ...
How to convert a PDF file to JPEGs using PHP
Hey, Today I would like to show you how we can convert PDF to JPEG using imagick extension. Imagick ...
[Python] 代码中有中文注释会报错
原因如果文件里有非ASCII字符,需要在第一行或第二行指定编码声明. 解决方法在第一行或是第二行加入这么一句# -- coding: utf-8 -- ASCII知识普及: ASCII(Ameri ...
企业官网原型制作分享-Starbucks
星巴克是全球著名的咖啡连锁店,星巴克的产品不单是咖啡,咖啡只是一种载体.而正是通过咖啡这种载体,星巴克把一种独特的格调传送给顾客.咖啡的消费很大程度上是一种感性的文化层次上的消费,文化的沟通需要的就是 ...
EasyUITree设置节点选中
function callback1(){ reloadMind(); LoadTree0($("); setTimeout(function(){ var node = $('#tt1') ...

mui学习

mui学习的更多相关文章

随机推荐

热门专题