最近在工作中接到这么一个需求。
1、使用jquery weui框架。
2、实现点击按钮出现weui对话框，并在对话框中嵌套weui的时间picker。
最初的实现的方法如下(代码已删)：
1、直接弹出picker。
2、使用jq的append等方法追加元素。
3、通过css !important使weui自带的css属性无效，并调整picker所在位置。
结果：成功实现，但是代码太多，看上去很恶心，后续出现 多次渲染元素时，只点击第一个按钮有效，第二个无法正常弹出的bug。
后来的实现方法：
1、调用modal弹出对话框。
2、动态设置modal的css选择器
3、调用picker使其在自己设置的css选择器上内联显示。
这样做完确实很好用，但是只点击第一次正常显示，再点击就无法弹出picker,经多次试验后，发现唯一的css只能调用一次内联picker，而且无法使用内置的方法关闭picker。
于是我通过时间戳创建了动态css选择器，用户选择完时间后，再把选择的数据动态添加到现有的input中。
完整代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/city-picker.min.js"></script>
<style type="text/css">
* {
touch-action: pan-y;
}
</style>
</head>
<body>
<button class="ipt">签到</button>
<input type="text" id="getvalue" readonly="readonly" />
<br />
<button class="ipt2">签退</button>
<input type="text" id="getvalue2" readonly="readonly" />
</body>
<script type="text/javascript">
//返回一个数组，提供给weui的picker让其在每次弹出默认都显示现在的时间。
function initTime() {
var arr = [];
var d = new Date()
var hh = d.getHours()
var mm = d.getMinutes()
if(mm >= 0 && mm <= 9){
mm = '0' + mm;
}
var ss = d.getSeconds()
if (ss >= 0 && ss <= 9) {
ss = '0' + ss;
}
arr.push(hh.toString(),mm.toString(),ss.toString())
return arr;
};
//返回一个数组，内容为0~num的string值。
function getNum(num) {
var arr = []
for(i = 0; i < num; i++) {
if(i >= 0 && i <= 9) {
i = '0' + i;
}
arr.push(i.toString())
}
return arr
};
//时间选择器
function showPicker(id) {
//用时间戳创建唯一标记
var elstamp = new Date().getTime()
//生成唯一input,该input存储picker获取到的值
$('body').append('<input hidden="hidden" type="text" class="' + elstamp + '" />')
//调用弹窗
$.modal({
title: "Hello",
text: '<div id="' + elstamp + '"></div>',
buttons: [
{
text: "确认",
className: "default",
onClick: function() {
$('#' + id).val('');
//获取唯一input的值到固定input中
$('#' + id).val($('.' + elstamp).val().replace(' ', ':').replace(' ', ':'))
$('.' + elstamp).remove()
}
},
]
});
//内联使用picker
$('.' + elstamp).picker({
cols: [{
textAlign: 'center',
values: getNum(24)
},
{
textAlign: 'center',
values: getNum(60)
},
{
textAlign: 'center',
values: getNum(60)
}
],
container: '#' + elstamp,
value: initTime()
});
}
//点击事件
$('.ipt').on('click', function() {
showPicker('getvalue');
})
$('.ipt2').on('click', function() {
showPicker('getvalue2');
})
</script>
</html>
因为我没找到更好的方法，而且接手项目时基带的jq组件库就是weui，所以我也就懒得自己写一个picker了，这样更快捷。
有条件的情况下，还是建议自己写一个。
最终效果如下：
GIF.gif
网友评论