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为基础,补充部分 ...

随机推荐

Lucene/Solr企业级搜索学习资源
Solr是一个独立的企业级搜索应用服务器,它对外提供类似于Web-service的API接口.用户可以通过http请求,向搜索引擎服务器提交一定格式的XML文件,生成索引:也可以通过Http GSol ...
Oracle性能优化3-sql优化一定要等价
做sql优化的前提瞧见是sql等价 1.MAX MIN写法的分与合 drop table t purge; create table t as select * from dba_objects; a ...
js 标准对象
在JavaScript的世界里,一切都是对象. 但是某些对象还是和其他对象不太一样.为了区分对象的类型,我们用typeof操作符获取对象的类型,它总是返回一个字符串: typeof 123; // ' ...
（转）Silverlight调用的JS方法返回对象数组的处理方法
最近在做Silverlight应用,需要用Silverlight调用页面中Javascript方法.这个JS方法返回一个对象数组给Silverlight.对于这个对象数组怎么在Silverlight ...
qr 生成二维码
package com.common; import com.swetake.util.Qrcode; import jp.sourceforge.qrcode.QRCodeDecoder; impo ...
github 与gitlab之间的工程创建
1.从github上git clone下来一个工程,Clone with HTTPS(不是ssh模式,要权限). 2.进入git下来的包cd 包下,打开gedit /.git/config,内容大致如 ...
oracle使用3DES加密
CREATE OR REPLACE PACKAGE dbc_cryptor IS SYSKEY VARCHAR2(16) := '0000000012345678'; SYSIV VARCHAR2(1 ...
449. Serialize and Deserialize BST
https://leetcode.com/problems/serialize-and-deserialize-bst/#/description Serialization is the proce ...
Neural Network Basics
在学习NLP之前还是要打好基础,第二部分就是神经网络基础. 知识点总结: 1.神经网络概要: 2. 神经网络表示: 第0层为输入层(input layer).隐藏层(hidden layer).输出层 ...
fastq-to-fasta转换及fasta拆分、合并
格式转换: use awk :awk 'BEGIN{P=1}{if(P==1||P==2){gsub(/^[@]/,">");print}; if(P==4)P=0; P++ ...

mui学习

mui学习的更多相关文章

随机推荐

热门专题