
有关 plus.webview.close() 时画面会闪一下的问题,官方并没有回答,请入内避免重复踩坑
当使用 plus.webview.close() 关掉某个页面,就算那个页面在背景或是 hide()画面都会闪一下的问题,
跟手机硬件应该有关,已经有几个人提出这个问题多次,但是官方并没有任何正面回答
请不要踩坑,浪费时想方法
跟Q友小清新 测试的结果
lenovo a3000h 会闪
samsung note8 不会闪
asus zd551kl 不会闪
即然跟硬件相关,就应该不是官方的问题了...但有问题还是希望官方出面说明一下而不是不闻不问哦..
官方解决明确问题的速度是相当快的,这点请大家多给官方鼓励
请大家如果有其他手机测试,可以跟帖注明会不会闪
当使用 plus.webview.close() 关掉某个页面,就算那个页面在背景或是 hide()画面都会闪一下的问题,
跟手机硬件应该有关,已经有几个人提出这个问题多次,但是官方并没有任何正面回答
请不要踩坑,浪费时想方法
跟Q友小清新 测试的结果
lenovo a3000h 会闪
samsung note8 不会闪
asus zd551kl 不会闪
即然跟硬件相关,就应该不是官方的问题了...但有问题还是希望官方出面说明一下而不是不闻不问哦..
官方解决明确问题的速度是相当快的,这点请大家多给官方鼓励
请大家如果有其他手机测试,可以跟帖注明会不会闪
收起阅读 »
值更新问题,解决方法
mui.plusReady()执行一次,如何刷新传值:
一,利用事件处理,每次触法预加载一次,刷新数据;
二,在mui.openWindow()里设置 createNew:true,重新打开新窗口,将mui.plusReady()再执行一次;
mui.plusReady()执行一次,如何刷新传值:
一,利用事件处理,每次触法预加载一次,刷新数据;
二,在mui.openWindow()里设置 createNew:true,重新打开新窗口,将mui.plusReady()再执行一次;

调试方式介绍二 真机运行
HBuilder对前端代码的调试方式有边改边看、真机运行、webkit remote debug真机调试3种。
系列文章目录导航:
- 调试方式介绍一 边改边看
- [调试方式介绍二 真机运行]
- 调试方式介绍三 webkit remote debug之Chrome调试Android手机
- 调试方式介绍四 webkit remote debug之Safari调试iOS手机
真机运行是调试手机App的轻量级常用工具。
不管是iOS还是Android,不管是模拟器还是真机,都可以与HBuilder连接进行真机运行。
以往开发App,需要改一个界面,然后打包,然后安装到手机上,然后进入那个界面,看看改对了没。没有的话循环这套动作,非常低效。
有了真机运行,改了代码后保存,手机立即看到效果,如果在手机上运行时发生错误,那么日志和错误信息也都可以反馈到HBuilder控制台。
有些开发者喜欢alert大法,但事实上在HBuilder的js里敲clog,用打日志来调程序更好。
由于iOS模拟器仅mac电脑上可以用,所以HBuilder的mac版才支持iOS模拟器。安装xcode就会自带iOS模拟器。
Android模拟器较多,如果要使用webkit remote debug功能,需要Google官方模拟器。但官方模拟器比较卡,很多人也在使用三方轻量级模拟器比如海马玩,但这类模拟器不能通过chrome的控制台调试。
真机运行并不是打包,不要所以不能改app的icon、splash启动图等。
如果真机运行无法连接,请参考这里http://ask.dcloud.net.cn/article/97
HBuilder对前端代码的调试方式有边改边看、真机运行、webkit remote debug真机调试3种。
系列文章目录导航:
- 调试方式介绍一 边改边看
- [调试方式介绍二 真机运行]
- 调试方式介绍三 webkit remote debug之Chrome调试Android手机
- 调试方式介绍四 webkit remote debug之Safari调试iOS手机
真机运行是调试手机App的轻量级常用工具。
不管是iOS还是Android,不管是模拟器还是真机,都可以与HBuilder连接进行真机运行。
以往开发App,需要改一个界面,然后打包,然后安装到手机上,然后进入那个界面,看看改对了没。没有的话循环这套动作,非常低效。
有了真机运行,改了代码后保存,手机立即看到效果,如果在手机上运行时发生错误,那么日志和错误信息也都可以反馈到HBuilder控制台。
有些开发者喜欢alert大法,但事实上在HBuilder的js里敲clog,用打日志来调程序更好。
由于iOS模拟器仅mac电脑上可以用,所以HBuilder的mac版才支持iOS模拟器。安装xcode就会自带iOS模拟器。
Android模拟器较多,如果要使用webkit remote debug功能,需要Google官方模拟器。但官方模拟器比较卡,很多人也在使用三方轻量级模拟器比如海马玩,但这类模拟器不能通过chrome的控制台调试。
真机运行并不是打包,不要所以不能改app的icon、splash启动图等。
如果真机运行无法连接,请参考这里http://ask.dcloud.net.cn/article/97
收起阅读 »
调试方式介绍一 边改边看
HBuilder对前端代码的调试方式有边改边看、真机运行、webkit remote debug真机调试3种。
系列文章目录导航:
- [调试方式介绍一 边改边看]
- 调试方式介绍二 真机运行
- 调试方式介绍三 webkit remote debug之Chrome调试Android手机
- 调试方式介绍四 webkit remote debug之Safari调试iOS手机
边改边看
边改边看是轻量级的界面调试工具,最方便最常用。
在HBuilder右上角切换开发模式,可以选边改边看方式,切换模式的快捷键是Ctrl+p。
进入边改边看后,左边显示代码,右边显示浏览器。
HBuilder的windows版,右边的浏览器是chrome;在mac版,右边的浏览器是Safari。
截止到HBuilder7.6的内嵌chrome版本是35,ua是:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.138 Safari/537.36
1. 左边写代码,保存后右边自动刷新
在左边写代码,保存时右边会自动刷新页面,非常方便调界面。
对于less、sass等预编译语言,在ctrl+s后自动输出css后,也会继续激活浏览器的刷新。
HBuilder对markdown的支持也很好,本身编辑器就有高亮和着色功能,同时边改边看里也可以预览HTML效果。
2. 代码和浏览器元素互跳转
windows版的边改边看还支持代码和页面元素的互相跳转。
对代码里的一个div点右键,选“高亮浏览器内对应元素”,就会看到右侧浏览器里指定的元素高亮了。

反之,对浏览器某个元素点右键,也会有“查找文档中对应元素”的选项,点击后会跳转到相应代码段落。
3. 控制台
边改边看有2个控制台,默认控制台显示在HBuilder下方,直接输出了log和错误日志。
控制台显示了代码行号,点击后可直接转到该行代码。
另一个控制台,是chrome控制台。
在HBuilder windows版的边改边看里点右键,可以选择启动chrome控制台。
(mac版HBuilder的边改边看是Safari浏览器,暂时调不出控制台)
chrome控制台的功能非常多,检查css覆盖、调试js、查看网页加载性能...这里不详细介绍,请自行谷百。
但有一个功能要强调下,就是手机设置。
在控制台里选Emulation的device,可以看到iphone、nexus等很多手机。
如果你需要开发触屏版网页,需要使用touch功能,就一定要选择成手机开发模式。默认的pc模式是不支持touch事件的。
不过要注意,虽然这里的浏览器控制台可以选手机,但只是模拟手机浏览器,plus扩展的原生api是无法调用和调试的。
php等服务器语言也支持边改边看,在设置里搜索web服务器,添加外部web服务器,配好地址也可以边改边看。
至于php本身语言的调试,可以通过php插件做来,本文不详述。
HBuilder对前端代码的调试方式有边改边看、真机运行、webkit remote debug真机调试3种。
系列文章目录导航:
- [调试方式介绍一 边改边看]
- 调试方式介绍二 真机运行
- 调试方式介绍三 webkit remote debug之Chrome调试Android手机
- 调试方式介绍四 webkit remote debug之Safari调试iOS手机
边改边看
边改边看是轻量级的界面调试工具,最方便最常用。
在HBuilder右上角切换开发模式,可以选边改边看方式,切换模式的快捷键是Ctrl+p。
进入边改边看后,左边显示代码,右边显示浏览器。
HBuilder的windows版,右边的浏览器是chrome;在mac版,右边的浏览器是Safari。
截止到HBuilder7.6的内嵌chrome版本是35,ua是:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.138 Safari/537.36
1. 左边写代码,保存后右边自动刷新
在左边写代码,保存时右边会自动刷新页面,非常方便调界面。
对于less、sass等预编译语言,在ctrl+s后自动输出css后,也会继续激活浏览器的刷新。
HBuilder对markdown的支持也很好,本身编辑器就有高亮和着色功能,同时边改边看里也可以预览HTML效果。
2. 代码和浏览器元素互跳转
windows版的边改边看还支持代码和页面元素的互相跳转。
对代码里的一个div点右键,选“高亮浏览器内对应元素”,就会看到右侧浏览器里指定的元素高亮了。
反之,对浏览器某个元素点右键,也会有“查找文档中对应元素”的选项,点击后会跳转到相应代码段落。
3. 控制台
边改边看有2个控制台,默认控制台显示在HBuilder下方,直接输出了log和错误日志。
控制台显示了代码行号,点击后可直接转到该行代码。
另一个控制台,是chrome控制台。
在HBuilder windows版的边改边看里点右键,可以选择启动chrome控制台。
(mac版HBuilder的边改边看是Safari浏览器,暂时调不出控制台)
chrome控制台的功能非常多,检查css覆盖、调试js、查看网页加载性能...这里不详细介绍,请自行谷百。
但有一个功能要强调下,就是手机设置。
在控制台里选Emulation的device,可以看到iphone、nexus等很多手机。
如果你需要开发触屏版网页,需要使用touch功能,就一定要选择成手机开发模式。默认的pc模式是不支持touch事件的。
不过要注意,虽然这里的浏览器控制台可以选手机,但只是模拟手机浏览器,plus扩展的原生api是无法调用和调试的。
php等服务器语言也支持边改边看,在设置里搜索web服务器,添加外部web服务器,配好地址也可以边改边看。
至于php本身语言的调试,可以通过php插件做来,本文不详述。

如何自定义不打包的文件,unpackage配置
方法1:
HBuilder的工程目录下有一个灰色的unpackage目录,把文件放在那里,打包和真机运行都不会同步那个目录。
比如"参考"、"备用"之类的目录都放到那里去。
方法2:
HBuilder 6.8.2.201512111923起支持在manifest里配置不打包。除了unpackage目录,还可以自定义其他目录和文件。
1.打开manifest代码视图
2.根节点下增加"unpackage"节点,该节点的值为一个数组,开发者可自主在该数组中添加打包时要排除的文件(带相对项目根目录的路径)
例:
"unpackage":[
"js",
"forder/test.html"
]
项目下相对根目录的js目录和forder目录下的test.html在打包时将会被过滤
2个方法可以并用。
方法1:
HBuilder的工程目录下有一个灰色的unpackage目录,把文件放在那里,打包和真机运行都不会同步那个目录。
比如"参考"、"备用"之类的目录都放到那里去。
方法2:
HBuilder 6.8.2.201512111923起支持在manifest里配置不打包。除了unpackage目录,还可以自定义其他目录和文件。
1.打开manifest代码视图
2.根节点下增加"unpackage"节点,该节点的值为一个数组,开发者可自主在该数组中添加打包时要排除的文件(带相对项目根目录的路径)
例:
"unpackage":[
"js",
"forder/test.html"
]
项目下相对根目录的js目录和forder目录下的test.html在打包时将会被过滤
2个方法可以并用。
收起阅读 »
蓝牙连接扫码枪问题解决
本方法基于SDK中的集成方式实现,通过js调用相关接口,实现蓝牙功能
注意:目前只支持安卓端
1、是否打开蓝牙设备 plus.bluetooth.isBlueToothOpened
2、打开蓝牙设备 plus.bluetooth.openBlueTooth
3、关闭蓝牙设备 plus.bluetooth.closeBlueTooth
4、获取可用设备 plus.bluetooth.getEnableDevices
5、设置当前设备 plus.bluetooth.setCurrentDevice
6、连接设备 plus.bluetooth.connectDevice
7、断开连接设备 plus.bluetooth.disconnectDevice
8、开始扫描 plus.bluetooth.startScan
目前版本已经测试调通,但仍带改进,如果有问题可以交流
本方法基于SDK中的集成方式实现,通过js调用相关接口,实现蓝牙功能
注意:目前只支持安卓端
1、是否打开蓝牙设备 plus.bluetooth.isBlueToothOpened
2、打开蓝牙设备 plus.bluetooth.openBlueTooth
3、关闭蓝牙设备 plus.bluetooth.closeBlueTooth
4、获取可用设备 plus.bluetooth.getEnableDevices
5、设置当前设备 plus.bluetooth.setCurrentDevice
6、连接设备 plus.bluetooth.connectDevice
7、断开连接设备 plus.bluetooth.disconnectDevice
8、开始扫描 plus.bluetooth.startScan
目前版本已经测试调通,但仍带改进,如果有问题可以交流
收起阅读 »
header去掉边框阴影方法
<header class="mui-bar mui-bar-nav" style="box-shadow: 0px 0px 0px #413D4A;">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left color-e"></a>
<h1 class="mui-title font-size-20">基本信息</h1>
</header>
<header class="mui-bar mui-bar-nav" style="box-shadow: 0px 0px 0px #413D4A;">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left color-e"></a>
<h1 class="mui-title font-size-20">基本信息</h1>
</header>
收起阅读 »

可接收小数点的数字输入框 NumberBox
因为项目需要能步进小数点的数字输入框,但是mui 的数字输入框只能步进整数
原本是打算参考 mui 源码自已写一个
後来发现只要把 parseInt 改成 parseFloat 就搞定
感谢官方,感谢工作人员
以下代码除了 parseInt 改成 parseFloat 之外,其馀都没有变动
放在 js 文档内,可直接使用
/**
* 数字输入框
* varstion 1.0.1
* by Houfeng
* Houfeng@DCloud.io
*/
(function($) {
var touchSupport = ('ontouchstart' in document);
var tapEventName = touchSupport ? 'tap' : 'click';
var changeEventName = 'change';
var holderClassName = 'mui-numbox';
var plusClassName = 'mui-numbox-btn-plus';
var minusClassName = 'mui-numbox-btn-minus';
var inputClassName = 'mui-numbox-input';
var Numbox = $.Numbox = $.Class.extend({
/**
* 构造函数
**/
init: function(holder, options) {
var self = this;
if (!holder) {
throw "构造 numbox 时缺少容器元素";
}
self.holder = holder;
options = options || {};
options.step = parseFloat(options.step || 1);
self.options = options;
self.input = $.qsa('.' + inputClassName, self.holder)[0];
self.plus = $.qsa('.' + plusClassName, self.holder)[0];
self.minus = $.qsa('.' + minusClassName, self.holder)[0];
self.checkValue();
self.initEvent();
},
/**
* 初始化事件绑定
**/
initEvent: function() {
var self = this;
self.plus.addEventListener(tapEventName, function(event) {
var val = parseFloat(self.input.value) + self.options.step;
self.input.value = val.toString();
$.trigger(self.input, changeEventName, null);
});
self.minus.addEventListener(tapEventName, function(event) {
var val = parseFloat(self.input.value) - self.options.step;
self.input.value = val.toString();
$.trigger(self.input, changeEventName, null);
});
self.input.addEventListener(changeEventName, function(event) {
self.checkValue();
var val = parseFloat(self.input.value);
//触发顶层容器
$.trigger(self.holder, changeEventName, {
value: val
});
});
},
/**
* 获取当前值
**/
getValue: function() {
var self = this;
return parseFloat(self.input.value);
},
/**
* 验证当前值是法合法
**/
checkValue: function() {
var self = this;
var val = self.input.value;
if (val == null || val == '' || isNaN(val)) {
self.input.value = self.options.min || 0;
self.minus.disabled = self.options.min != null;
} else {
var val = parseFloat(val);
if (self.options.max != null && !isNaN(self.options.max) && val >= parseFloat(self.options.max)) {
val = self.options.max;
self.plus.disabled = true;
} else {
self.plus.disabled = false;
}
if (self.options.min != null && !isNaN(self.options.min) && val <= parseFloat(self.options.min)) {
val = self.options.min;
self.minus.disabled = true;
} else {
self.minus.disabled = false;
}
self.input.value = val;
}
},
/**
* 更新选项
**/
setOption: function(name, value) {
var self = this;
self.options[name] = value;
}
});
$.fn.numbox = function(options) {
var instanceArray = [];
//遍历选择的元素
this.each(function(i, element) {
if (element.numbox) return;
if (options) {
element.numbox = new Numbox(element, options);
} else {
var optionsText = element.getAttribute('data-numbox-options');
var options = optionsText ? JSON.parse(optionsText) : {};
options.step = element.getAttribute('data-numbox-step') || options.step;
options.min = element.getAttribute('data-numbox-min') || options.min;
options.max = element.getAttribute('data-numbox-max') || options.max;
element.numbox = new Numbox(element, options);
}
});
return this[0] ? this[0].numbox : null;
}
//自动处理 class='mui-locker' 的 dom
$.ready(function() {
$('.' + holderClassName).numbox();
});
}(mui))
附件为参考效果图
因为项目需要能步进小数点的数字输入框,但是mui 的数字输入框只能步进整数
原本是打算参考 mui 源码自已写一个
後来发现只要把 parseInt 改成 parseFloat 就搞定
感谢官方,感谢工作人员
以下代码除了 parseInt 改成 parseFloat 之外,其馀都没有变动
放在 js 文档内,可直接使用
/**
* 数字输入框
* varstion 1.0.1
* by Houfeng
* Houfeng@DCloud.io
*/
(function($) {
var touchSupport = ('ontouchstart' in document);
var tapEventName = touchSupport ? 'tap' : 'click';
var changeEventName = 'change';
var holderClassName = 'mui-numbox';
var plusClassName = 'mui-numbox-btn-plus';
var minusClassName = 'mui-numbox-btn-minus';
var inputClassName = 'mui-numbox-input';
var Numbox = $.Numbox = $.Class.extend({
/**
* 构造函数
**/
init: function(holder, options) {
var self = this;
if (!holder) {
throw "构造 numbox 时缺少容器元素";
}
self.holder = holder;
options = options || {};
options.step = parseFloat(options.step || 1);
self.options = options;
self.input = $.qsa('.' + inputClassName, self.holder)[0];
self.plus = $.qsa('.' + plusClassName, self.holder)[0];
self.minus = $.qsa('.' + minusClassName, self.holder)[0];
self.checkValue();
self.initEvent();
},
/**
* 初始化事件绑定
**/
initEvent: function() {
var self = this;
self.plus.addEventListener(tapEventName, function(event) {
var val = parseFloat(self.input.value) + self.options.step;
self.input.value = val.toString();
$.trigger(self.input, changeEventName, null);
});
self.minus.addEventListener(tapEventName, function(event) {
var val = parseFloat(self.input.value) - self.options.step;
self.input.value = val.toString();
$.trigger(self.input, changeEventName, null);
});
self.input.addEventListener(changeEventName, function(event) {
self.checkValue();
var val = parseFloat(self.input.value);
//触发顶层容器
$.trigger(self.holder, changeEventName, {
value: val
});
});
},
/**
* 获取当前值
**/
getValue: function() {
var self = this;
return parseFloat(self.input.value);
},
/**
* 验证当前值是法合法
**/
checkValue: function() {
var self = this;
var val = self.input.value;
if (val == null || val == '' || isNaN(val)) {
self.input.value = self.options.min || 0;
self.minus.disabled = self.options.min != null;
} else {
var val = parseFloat(val);
if (self.options.max != null && !isNaN(self.options.max) && val >= parseFloat(self.options.max)) {
val = self.options.max;
self.plus.disabled = true;
} else {
self.plus.disabled = false;
}
if (self.options.min != null && !isNaN(self.options.min) && val <= parseFloat(self.options.min)) {
val = self.options.min;
self.minus.disabled = true;
} else {
self.minus.disabled = false;
}
self.input.value = val;
}
},
/**
* 更新选项
**/
setOption: function(name, value) {
var self = this;
self.options[name] = value;
}
});
$.fn.numbox = function(options) {
var instanceArray = [];
//遍历选择的元素
this.each(function(i, element) {
if (element.numbox) return;
if (options) {
element.numbox = new Numbox(element, options);
} else {
var optionsText = element.getAttribute('data-numbox-options');
var options = optionsText ? JSON.parse(optionsText) : {};
options.step = element.getAttribute('data-numbox-step') || options.step;
options.min = element.getAttribute('data-numbox-min') || options.min;
options.max = element.getAttribute('data-numbox-max') || options.max;
element.numbox = new Numbox(element, options);
}
});
return this[0] ? this[0].numbox : null;
}
//自动处理 class='mui-locker' 的 dom
$.ready(function() {
$('.' + holderClassName).numbox();
});
}(mui))
附件为参考效果图
收起阅读 »
修改的一个简单日历
引入mui.css和mui.js 在plusReady中调用initCalendar();就可以了
//CSS
.riqi {
background: white;
width: 94%;
left: 50%;
overflow: hidden;
margin: auto;
margin-top: 40px;
z-index: 2;
position: fixed;
margin-left: -47%;
padding: 1em 0.5em;
top: 10%;
display: block;
}
.toubu {
width: 99%;
margin: auto;
}
.toubu>div {
width: 50%;
float: left;
}
.toubu>div>*,
.toubu>div {
height: 30px;
line-height: 30px;
text-align: center;
}
.toubu>div>a {
background: #41BC7B;
color: white;
width: 30px;
font-size: 18px;
float: left;
}
.toubu>div>div {
float: left;
width: 60px;
text-align: center;
border-top: 1px solid darkgray;
border-bottom: 1px solid darkgray;
}
.toubu>div>div>span {}
.toubu>div.yue>* {
float: right;
}
/**table************************/
table {
border-collapse: collapse;
}
table>thead>tr>th {
font-size: 14px;
padding: 2px 2px;
border: 1px solid #D7D7D7;
}
table,
th,
td {
border: 1px solid #D7D7D7;
text-align: center;
color: #666666;
width: 14.28%;
font-size: 12px;
height: 2em;
line-height: 2em;
}
.table>table {
margin-top: 4em;
width: 100%;
}
.table>table td.light {
color: white;
background: #41BC7B;
}
.table>table td {
color: #5C5B5B;
background-color: #BDBDBD;
}
.jiezhishijian .shifouxuanzhong a {
font-size: 12px;
height: 2.5em;
line-height: 2.5em;
padding: 0;
}
#sure {
float: right;
color: #41BC7B;
margin: 10px 15px;
}
#cancle {
float: right;
color: #41BC7B;
margin: 10px 15px;
}
.table>table td.choose {
background-color: red;
}
//JS
var currentday, currentyear, currentmonth, nian, yue, tapelement;
//初始化
function initCalendar() {
var div = document.createElement("div");
div.className = 'riqi top_center';
div.id = 'riqi';
div.innerHTML = '<div class="toubu"><div class="nian"> <a id="nian_jian" class="jian">-</a><div><span id="nian" class="nian">2015</span><span>年</span></div> <a id="nian_jia" class="jia">+</a> </div> <div class="yue"> <a id="yue_jia" class="jia">+</a> <div><span id="yue" class="yue">12</span><span>月</span></div> <a id="yue_jian" class="jian">-</a> </div> </div> <div class="table"> <table> <thead> <tr> <th>周日</th> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> <th>周六</th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td><td></td></tr></tbody></table></div><a id="cancle">取消</a><a id="sure">确定</a>';
document.body.appendChild(div);
nian = document.getElementById("nian");
yue = document.getElementById("yue");
var data = new Date();
currentday = data.getDate(); //获取当前日
currentyear = data.getFullYear(); //获取当前年
currentmonth = data.getMonth() + 1; //获取当前月(现实月份)
boundTap();
initcontent(data);
}
//绑定点击事件
function boundTap() {
mui('tbody').on('tap', 'td', function() {
if (this.innerText == '') {
return;
}
try {
tapelement.classList.remove('choose');
} catch (e) {
//TODO handle the exception
}
console.log(this.innerText);
this.classList.add('choose');
tapelement = this;
});
}
function initcontent(data) {
getCalender(data.getFullYear(), data.getMonth() + 1);
//加减点击
mui('.top_center').on('tap', '.jia,.jian', function() {
switch (this.id) {
case 'nian_jia':
if (nian.innerText == currentyear) {
return;
}
nian.innerText++;
break;
case 'nian_jian':
nian.innerText--;
break;
case 'yue_jia':
if (yue.innerText == 12) {
if (nian.innerText == currentyear) {
return;
} else {
nian.innerText++;
yue.innerText = 1;
}
} else {
yue.innerText++;
}
break;
case 'yue_jian':
if (yue.innerText == 1) {
nian.innerText--;
yue.innerText = 12;
} else {
yue.innerText--;
}
break;
default:
break;
}
getCalender(nian.innerText, yue.innerText);
});
}
/**
* 返回传递月份的天数
* @param {Object} year 年份
* @param {Object} month 月份(现实月份)
*/
function getDaynum(year, month) {
var tianShu;
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
tianShu = 31;
} else if (month != 2) {
tianShu = 30;
} else {
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
tianShu = 29;
} else {
tianShu = 28;
}
}
return tianShu;
}
/**
* 获取日历排列情况
* @param {Object} year 年份
* @param {Object} month 月份(现实月份)
*/
function getCalender(year, month) {
var daynum = getDaynum(year, month);
var xingqi = new Date(year + '/' + month + '/1').getDay();
var current_day = 0;
mui('tbody td').each(function(index, element) {
if (index >= xingqi && current_day < daynum) {
current_day++;
element.innerText = current_day;
if (year == currentyear && month == currentmonth && current_day == currentday) {
element.className = 'light';
} else {
element.className = '';
}
} else {
element.className = '';
element.innerText = '';
}
});
}
引入mui.css和mui.js 在plusReady中调用initCalendar();就可以了
//CSS
.riqi {
background: white;
width: 94%;
left: 50%;
overflow: hidden;
margin: auto;
margin-top: 40px;
z-index: 2;
position: fixed;
margin-left: -47%;
padding: 1em 0.5em;
top: 10%;
display: block;
}
.toubu {
width: 99%;
margin: auto;
}
.toubu>div {
width: 50%;
float: left;
}
.toubu>div>*,
.toubu>div {
height: 30px;
line-height: 30px;
text-align: center;
}
.toubu>div>a {
background: #41BC7B;
color: white;
width: 30px;
font-size: 18px;
float: left;
}
.toubu>div>div {
float: left;
width: 60px;
text-align: center;
border-top: 1px solid darkgray;
border-bottom: 1px solid darkgray;
}
.toubu>div>div>span {}
.toubu>div.yue>* {
float: right;
}
/**table************************/
table {
border-collapse: collapse;
}
table>thead>tr>th {
font-size: 14px;
padding: 2px 2px;
border: 1px solid #D7D7D7;
}
table,
th,
td {
border: 1px solid #D7D7D7;
text-align: center;
color: #666666;
width: 14.28%;
font-size: 12px;
height: 2em;
line-height: 2em;
}
.table>table {
margin-top: 4em;
width: 100%;
}
.table>table td.light {
color: white;
background: #41BC7B;
}
.table>table td {
color: #5C5B5B;
background-color: #BDBDBD;
}
.jiezhishijian .shifouxuanzhong a {
font-size: 12px;
height: 2.5em;
line-height: 2.5em;
padding: 0;
}
#sure {
float: right;
color: #41BC7B;
margin: 10px 15px;
}
#cancle {
float: right;
color: #41BC7B;
margin: 10px 15px;
}
.table>table td.choose {
background-color: red;
}
//JS
var currentday, currentyear, currentmonth, nian, yue, tapelement;
//初始化
function initCalendar() {
var div = document.createElement("div");
div.className = 'riqi top_center';
div.id = 'riqi';
div.innerHTML = '<div class="toubu"><div class="nian"> <a id="nian_jian" class="jian">-</a><div><span id="nian" class="nian">2015</span><span>年</span></div> <a id="nian_jia" class="jia">+</a> </div> <div class="yue"> <a id="yue_jia" class="jia">+</a> <div><span id="yue" class="yue">12</span><span>月</span></div> <a id="yue_jian" class="jian">-</a> </div> </div> <div class="table"> <table> <thead> <tr> <th>周日</th> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> <th>周六</th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td><td></td></tr></tbody></table></div><a id="cancle">取消</a><a id="sure">确定</a>';
document.body.appendChild(div);
nian = document.getElementById("nian");
yue = document.getElementById("yue");
var data = new Date();
currentday = data.getDate(); //获取当前日
currentyear = data.getFullYear(); //获取当前年
currentmonth = data.getMonth() + 1; //获取当前月(现实月份)
boundTap();
initcontent(data);
}
//绑定点击事件
function boundTap() {
mui('tbody').on('tap', 'td', function() {
if (this.innerText == '') {
return;
}
try {
tapelement.classList.remove('choose');
} catch (e) {
//TODO handle the exception
}
console.log(this.innerText);
this.classList.add('choose');
tapelement = this;
});
}
function initcontent(data) {
getCalender(data.getFullYear(), data.getMonth() + 1);
//加减点击
mui('.top_center').on('tap', '.jia,.jian', function() {
switch (this.id) {
case 'nian_jia':
if (nian.innerText == currentyear) {
return;
}
nian.innerText++;
break;
case 'nian_jian':
nian.innerText--;
break;
case 'yue_jia':
if (yue.innerText == 12) {
if (nian.innerText == currentyear) {
return;
} else {
nian.innerText++;
yue.innerText = 1;
}
} else {
yue.innerText++;
}
break;
case 'yue_jian':
if (yue.innerText == 1) {
nian.innerText--;
yue.innerText = 12;
} else {
yue.innerText--;
}
break;
default:
break;
}
getCalender(nian.innerText, yue.innerText);
});
}
/**
* 返回传递月份的天数
* @param {Object} year 年份
* @param {Object} month 月份(现实月份)
*/
function getDaynum(year, month) {
var tianShu;
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
tianShu = 31;
} else if (month != 2) {
tianShu = 30;
} else {
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
tianShu = 29;
} else {
tianShu = 28;
}
}
return tianShu;
}
/**
* 获取日历排列情况
* @param {Object} year 年份
* @param {Object} month 月份(现实月份)
*/
function getCalender(year, month) {
var daynum = getDaynum(year, month);
var xingqi = new Date(year + '/' + month + '/1').getDay();
var current_day = 0;
mui('tbody td').each(function(index, element) {
if (index >= xingqi && current_day < daynum) {
current_day++;
element.innerText = current_day;
if (year == currentyear && month == currentmonth && current_day == currentday) {
element.className = 'light';
} else {
element.className = '';
}
} else {
element.className = '';
element.innerText = '';
}
});
}
收起阅读 »

二重监听事件,含参数函数参数只能传递一次(解决方法利用缓存读取传参)
二重监听事件,含参数函数参数只能传递一次:代码如下
function appendByGallery(id) {
document.getElementById("bg_update").style.display = "none";
plus.gallery.pick(function(path) {
document.getElementById(id).src = path;
// alert(path);
return false;
});
}
mui(".zzboxli").on('tap','img',function(){
var id = this.getAttribute("id");
document.getElementById("bg_update").style.display = "block";
document.getElementById("b_updates").addEventListener('tap',function(){
appendByGallery(newid);
});
});
document.getElementById("bg_update").addEventListener('tap',function(){
document.getElementById("bg_update").style.display = "none";
});
利用缓存解决:代码如下
function appendByGallery(id) {
document.getElementById("bg_update").style.display = "none";
plus.gallery.pick(function(path) {
document.getElementById(id).src = path;
// alert(path);
return false;
});
}
mui(".zzboxli").on('tap','img',function(){
var id = this.getAttribute("id");
plus.storage.setItem('a', id);
document.getElementById("bg_update").style.display = "block";
document.getElementById("b_updates").addEventListener('tap',function(){
var newid = plus.storage.getItem('a');
appendByGallery(newid);
});
});
document.getElementById("bg_update").addEventListener('tap',function(){
document.getElementById("bg_update").style.display = "none";
});
二重监听事件,含参数函数参数只能传递一次:代码如下
function appendByGallery(id) {
document.getElementById("bg_update").style.display = "none";
plus.gallery.pick(function(path) {
document.getElementById(id).src = path;
// alert(path);
return false;
});
}
mui(".zzboxli").on('tap','img',function(){
var id = this.getAttribute("id");
document.getElementById("bg_update").style.display = "block";
document.getElementById("b_updates").addEventListener('tap',function(){
appendByGallery(newid);
});
});
document.getElementById("bg_update").addEventListener('tap',function(){
document.getElementById("bg_update").style.display = "none";
});
利用缓存解决:代码如下
function appendByGallery(id) {
document.getElementById("bg_update").style.display = "none";
plus.gallery.pick(function(path) {
document.getElementById(id).src = path;
// alert(path);
return false;
});
}
mui(".zzboxli").on('tap','img',function(){
var id = this.getAttribute("id");
plus.storage.setItem('a', id);
document.getElementById("bg_update").style.display = "block";
document.getElementById("b_updates").addEventListener('tap',function(){
var newid = plus.storage.getItem('a');
appendByGallery(newid);
});
});
document.getElementById("bg_update").addEventListener('tap',function(){
document.getElementById("bg_update").style.display = "none";
});
收起阅读 »