点击隐藏显示几点击其他地方隐藏问题代码还没封装

来源：互联网发布：体育馆视频监控软件编辑：程序博客网时间：2024/06/01 10:36

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo1</title>
<style type="text/css">
.demo1{
height:300px;
}
</style>
</head>
<body>

<div style="height:500px;"></div>
<div class="demo1">
方本框：<input type="text" id="J-xl" class="laydate-icon" readonly="readonly">
</div>

<div class="demo1">
按钮触发：<input type="text" id="J-xl-2" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})"><input type="button" id="J-xl-2-btn" value="打开">
</div>

<div class="demo1">
<label for="J-xl-3">Label触发：</label><input type="text" id="J-xl-3" >
</div>

<div class="demo1">
直接传dom：<input type="text" id="J-xl-4" >
<div id="test" style="border: 1px solid red; display: none;" >
ss
<br />
ss
<br />
ss
<br />
ss
<br />
vv
</div>
</div>

<script type="text/javascript" src="/vuejs/js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../laydate.dev.js"></script>
<script type="text/javascript">
$(function(){
$("#J-xl-4").click(function(even){
var test = document.getElementById("test");
shde(test);
stopMosup("click", "#J-xl-4");
stopMosup("click", "#test");
});
$(document).on('mouseup', document, function(){
var box = document.getElementById("test");
if(box && box.style.display !== 'none'){
shde(box, 1)
}
})
var stopMosup = function(evt, elem){
if(evt !== 'mouseup'){
$(document).on('mouseup', elem, function(ev){
stopmp(ev);
});
}
};
var stopmp = function(e){
e = e || window.event;
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
return this;
};
var shde = function(elem, type){
elem.style.display = type ? 'none' : 'block';
};

$("#J-xl").click(function(){
laydate({
elem: '#J-xl',
event: 'click', //触发事件
istime: true,
istoday: true,
min: laydate.now()+" 00:00:00", //设定最小日期为当前日期
max: '2099-06-16 23:59:59', //最大日期
format: 'YYYY-MM-DD hh:mm:ss', // 分隔符可以任意定义，该例子表示只显示年月
choose: function(datas){
console.log(datas);
},
data : [
{date:'2017-07-30',data:'1'},
{date:'2017-07-31',data:'1'},
{date:'2017-07-12',data:'0'},
{date:'2017-07-13',data:'0'},
{date:'2017-09-01',data:'0'},
{date:'2017-08-01',data:'1'},
{date:'2017-08-16',data:'0'},
{date:'2017-08-17',data:'1'},
{date:'2017-08-13',data:'0'},
{date:'2017-09-09',data:'0'},
//{date:'2017-10-10',data:'0'},
{date:'2017-09-06',data:'0'},
{date:'2017-09-12',data:'12'},
{date:'2017-10-13',data:'13'},
// {date:'2017-10-14',data:'114'},
{date:'2017-10-15',data:'15'},
{date:'2017-10-16',data:'16'},
{date:'2017-10-17',data:'17'},
{date:'2017-10-18',data:'1'},
{date:'2017-10-19',data:'9'},
{date:'2017-10-20',data:'10'},
{date:'2017-10-21',data:'1'},
{date:'2017-10-22',data:'9'},
{date:'2017-10-23',data:'2'},
{date:'2017-10-24',data:'2'},
{date:'2017-10-25',data:'5'},
{date:'2017-10-26',data:'16'},
{date:'2017-10-27',data:'7'},
{date:'2017-10-28',data:'2'},
{date:'2017-10-29',data:'9'},
// {date:'2017-10-30',data:'130'},
{date:'2017-10-31',data:'31'},
{date:'2017-11-01',data:'1'},
{date:'2017-11-02',data:'2'},
{date:'2017-11-03',data:'3'},
{date:'2017-11-04',data:'4'},
{date:'2017-11-05',data:'5'},
{date:'2017-11-06',data:'6'},
{date:'2017-11-07',data:'7'},
{date:'2017-11-08',data:'8'},
{date:'2017-11-09',data:'9'},
{date:'2017-11-10',data:'0'},
{date:'2017-11-11',data:'1'},
// {date:'2017-11-12',data:'112'},
{date:'2017-11-13',data:'11'},
{date:'2017-11-14',data:'4'},
{date:'2017-11-15',data:'5'},
{date:'2017-11-16',data:'16'},
{date:'2017-11-17',data:'17'},
{date:'2017-11-18',data:'8'},
{date:'2017-11-19',data:'19'},
{date:'2017-11-20',data:'20'},
{date:'2017-11-21',data:'21'},
{date:'2017-11-22',data:'22'},
{date:'2017-11-23',data:'3'},
{date:'2017-11-24',data:'24'},
// {date:'2017-11-25',data:'125'},
{date:'2017-11-26',data:'26'},
{date:'2017-11-27',data:'2'},
{date:'2017-11-28',data:'28'},
{date:'2017-11-29',data:'9'},
{date:'2017-11-30',data:'0'},
{date:'2017-12-01',data:'21'},
{date:'2017-12-02',data:'12'},
{date:'2017-12-03',data:'13'},
{date:'2017-12-04',data:'12'},
{date:'2018-01-04',data:'12'},
],
url:"localhost:9999/test"

});
});
});
/*document.getElementById('J-xl-2-btn').onclick = function(){
laydate.destroy(
$("#laydate_box").remove()
)
var test= document.getElementById("#J-xl-2-btn");
alert($("#J-xl-2-btn").width());
}
laydate.prototype.row = function(){
alert(123)
}
var datas = [
{date:'2018-06-30',data:'1'},
{date:'2018-06-31',data:'1'},
{date:'2018-06-12',data:'0'},
{date:'2018-06-13',data:'0'},

]
laydate.ajaxData(datas, "localhost:9999/test")

// document.getElementById('J-xl-2-btn').onclick = function(){
// laydate({
// elem: '#J-xl-2'
// });
// }

// laydate({
// elem: '#J-xl-3'
// });

laydate({
elem: document.getElementById('J-xl-4')
});*/
</script>
</body>
</html>

阅读全文

0 0