2018-06-04
2018-06-07 本文已影响115人
手中的风信子
基础布局
一、头部
核心：mui-bar mui-bar-nav
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">标题</h1>
</header>
二、主体部分
核心：mui-content
<div class="mui-content">
<!--输入内容-->
</div>
三、tabbar
核心:mui-table-view
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse mui-active">
<a class="mui-navigate-right" href="#">面板1</a>
<div class="mui-collapse-content">
<p>面板1子内容</p>
</div>
</li>
</ul>
切换bar-item
<script type="text/javascript" charset="utf-8">
mui.init();
//设置默认打开首页显示的子页序号；
var Index=0;
//把子页的路径写在数组里面
var subpages = ['html/home.html','html/message.html','html/setting.html','html/listTable.html'];
//所有的plus-*方法写在mui.plusReady中或者后面。
mui.plusReady(function(){
//获取当前页面所属的Webview窗口对象
var self = plus.webview.currentWebview();
for (var i =0;i<4;i++) {
//创建webview子界面
var sub = plus.webview.create(
subpages[i], //子页url
subpages[i], //子页id
{
top: '45px',//设置距离顶部的距离
bottom: '50px'//设置距离底部的距离
}
);
//如不是我们设置的默认的子页则隐藏，否则添加到窗口中
if (i != Index) {
sub.hide();
}
//将webview对象填充到窗口
self.append(sub);
}
//当前激活选项
var activeTab = subpages[Index],title=document.querySelector(".mui-title");
//选项卡点击事件
mui('.mui-bar-tab').on('tap','.mui-tab-item',function(){
//获取目标子页的id getAttribute() 方法返回指定属性名的属性值。
var targetTab = this.getAttribute('href');
if (activeTab==targetTab) {
return;
}
//更换标题
title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
//显示目标选项卡
plus.webview.show(targetTab);
//隐藏当前选项卡
plus.webview.hide(activeTab);
//更改当前活跃的选项卡
activeTab = targetTab;
})
})
</script>
四、折叠面板
核心:
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse mui-active">
<a class="mui-navigate-right" href="#">面板1</a>
<div class="mui-collapse-content">
<p>面板1子内容</p>
</div>
</li>
</ul>
代码激活:macc
五、button
核心:
mui-btn
代码激活:mbutton
六、轮播组件
1. 核心:
<div class="mui-slider">
<div class="mui-slider-group">
<!--第一个内容区容器-->
<div class="mui-slider-item">
<!-- 具体内容 -->
<a href="#"><img src="../images/banner_1.jpg"/></a>
</div>
<!--第二个内容区-->
<div class="mui-slider-item">
<!-- 具体内容 -->
</div>
</div>
</div>
代码激活:mslider
2. 轮播圆点:
<!--圆点放置的位置默认和group平级-->
<div class="mui-slider-indicator">
<!--默认第一个为选中状态-->
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
3. 自动轮播
mui.plusReady(function() {
//自动轮播图片 获得slider插件对象
var slider = mui('.mui-slider');
slider.slider({
interval: 2000 //自动轮播周期，若为0则不自动播放，默认为0；
})
//监听轮播图片轮播事件
document.querySelector('.mui-slider').addEventListener('slide',function (e) {
console.log("第"+e.detail.slideNumber+"张图片");
})
})
4. 切换到指定索引
function changeTo (index) {
var slider = mui('.mui-slider');
slider.slider().gotoItem(index);
}
七、input表单
1.核心
<!--输入组-->
<form class="mui-input-group topOffset">
<!--输入项-->
<div class="mui-input-row">
<label>输入项</label>
<input type="text" class="mui-input-clear" placeholder="请输入姓名">
</div>
<!--//按钮项目-->
<div class="mui-button-row">
<button type="button" class="mui-btn mui-btn-primary">确认</button>
<button type="button" class="mui-btn mui-btn-danger">取消</button>
</div>
</form>
2.输入项快速删除:
<input type="text" class="mui-input-clear" placeholder="请输入姓名">
3.激活代码: minput
八：list列表
1.核心
<!--正常列表-->
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
项目1
</a>
<!--数字角标-->
<span class="mui-badge mui-badge-green">22</span>
</li>
</ul>
2.图文列表
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-right" src="../images/banner_1.jpg">
<div class="mui-media-body">
幸福
<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
</div>
</a>
</li>
</ul>
3. 激活代码:mlist
九. picker选择器
注意：引入mui.picker.css、mui.poppicker.css、mui.dtpicker.css、mui.picker.min.js
1.核心:
var picker = new mui.PopPicker();
//修改上方按钮文字
var picker = new mui.PopPicker({
buttons: ['cancel', 'OK']
});
2.设置数据:支持数组
picker.setData([{
value: 'xigua',
text: '西瓜'
},
{
value: 'lz',
text: '荔枝'
}
]);
3.显示并且获取点击回调
picker.show(function(selectItem) {
console.log(selectItem.length);
console.log(selectItem[0].value);
console.log(selectItem[0].text);
})
4.设置默认值
picker.pickers[0].setSelectedIndex(2, 1000);
十.多级联动选择器
1.核心
//显示多级选择器
function showMorePicker() {
var picker = new mui.PopPicker({
layer: 2
});
picker.setData([{
value: '100000',
text: '北京市',
children: [{
value: '100001',
text: '东城区'
}]
},
{
value: '120000',
text: '天津市',
children: [{
value: '120101',
text: '和平区'
}, {
value: "120102",
text: "河东区"
}, {
value: "120104",
text: "南开区"
}]
},
]);
picker.pickers[0].setSelectedIndex(1);
picker.pickers[1].setSelectedIndex(1);
picker.show(function(e) {
console.log(e);
})
}
十一 设置日期选择器
1.核心
//显示日期选择器
function showPickerDate() {
//一定要加上../css/mui.dtpicker.css引用
// var dtPicker = new mui.DtPicker();
// dtPicker.show(function(selectItems) {
// console.log(selectItems.y); //{text: "2016",value: 2016}
// console.log(selectItems.m); //{text: "05",value: "05"}
// })
var dtPicker = new mui.DtPicker({
type: 'datetime',
beginYear: 2000,
endYear:2020 ,//设置结束日期
// labels: ['Year', 'Mon', 'Day', 'Hour', 'min'], //设置默认标签区域提示语，默认为年月日分十秒
// customData: {
// h: [{
// value: 'AM',
// text: 'AM'
// },
// {
// value: 'PM',
// text: 'PM'
// }
// ]
// } //时间/日期别名
});
//这里格式一定要是06-04
dtPicker.setSelectedValue("2018-06-04 10:10");
dtPicker.show(function(e) {
console.log(e);
mui.toast(e);
})
}
十二.复选框
1.核心
mui-input-row mui-checkbox
2.激活代码
mch
3.获取复选框的值
function getCheckBoxValue () {
var checks = getCheckBox("check_box");
if (checks.length<1) {
alert("请选择");
}else{
mui.toast(checks);
}
}
function getCheckBox (name) {
console.log(name);
var checkObj = document.getElementsByClassName(name);
var checkVal = new Array();
var k = 0;
for (var i = 0; i < checkObj.length;i++) {
if (checkObj[i].checked) {
checkVal[k] = checkObj[i].value;
k++;
}
}
return checkVal;
}
十三.单选框
1.核心
mui-radio
2.激活代码
mra
3.获取单选框的值
function getVals () {
var res = getRadioRes('rds');
if (res==null) {
alert("请选择");
}else{
mui.toast(res);
}
}
// 获取单选框值
function getRadioRes (className) {
var rdsbj = document.getElementsByClassName(className);
console.log(rdsbj);
var checkVal = null;
for (var i = 0;i<rdsbj.length;i++) {
if (rdsbj[i].checked) {
checkVal = rdsbj[i].value;
}
}
return checkVal;
}
