Jquery-设置拖拽控制面板
html代码
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<style>
</style>
<!--字体颜色-->
<link rel="stylesheet" href="css/font_awesome/css/font-awesome.css" type="text/css"/>
<!--日历css-->
<link rel="stylesheet" href="css/ion.calendar.css">
</head>
<body>
<div class="control-panel" id="controlbox">
<div class="panel-header">
<i class="fa fa-calendar panel-tool-icon" aria-hidden="true"></i> 控制面板
<div class="panel-tool">
<div class="panel-tool-icon">
<i class="fa fa-chevron-up" aria-hidden="true"></i>
</div>
<div class="panel-tool-icon">
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<div class="panel-tool-icon">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
<!--<div class="panel-tool-restore"><i class="fa fa-calendar" aria-hidden="true"></i></div>-->
</div>
</div>
<!--contentBody-->
<div class="panel-body">
<table class="tb-outside">
<tr>
<td style="width:160px;">
<div class="panel-body-left" style="height: 30px;margin-left:5px;">
<strong>选择网站群</strong><br>
<!--<select style="width:150px;font-size:12px;" onmousedown="if(this.options.length>21){this.size=20}" onblur="this.size=1" onchange="this.size=1">-->
<select style="width:150px;font-size:12px;">
<option value=0>所有网站群</option>
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
<option>选项四</option>
<option selected>选项五</option>
<option>选项六</option>
<option>选项七</option>
<option>选项二</option>
<option>选项三</option>
<option>选项四</option>
<option>选项五</option>
<option>选项六</option>
<option>选项七</option>
<option>选项七</option>
<option>选项二</option>
<option>选项三</option>
<option>选项四</option>
<option>选项五</option>
<option>选项六</option>
<option>选项七</option>
<option>选项五</option>
<option>选项六</option>
<option>选项七</option>
</select>
</div>
<div style="height: 164px;margin-left: 5px;margin-top: 3px;">
<strong>所有站点</strong><br>
<select style="width:150px;font-size:11px;height:146px;" size="9">
<option>所有站点</option>
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
<option>选项四</option>
<option selected>选项五</option>
<option>选项六</option>
<option>选项七</option>
<option>选项二</option>
<option>选项三</option>
<option>选项四</option>
<option>选项五</option>
<option>选项六</option>
<option>选项七</option>
<option>选项七</option>
<option>选项二</option>
<option>选项三</option>
<option>选项四</option>
<option>选项五</option>
<option>选项六</option>
<option>选项七</option>
<option>选项五</option>
<option>选项六</option>
<option>选项七</option>
</select>
</div>
</td>
<td>
<div class="panel-body-right" style="height: 155px;margin-left:0px;">
<ul>
<li style="width: 195px;">
<div id="calendar"></div>
</li>
<li class="panel-body-right-end" style="width: 40px;">
<div><strong>快捷:</strong></div>
<div>昨日</div>
<div>本周</div>
<div>本月</div>
<div>今年</div>
<div>上周</div>
<div>上月</div>
</li>
</ul>
</div>
<div class="panel-body-right-footer" style="height: 40px;width:160px;margin-left:0px;">
<nobr>
<input type="radio" id="control_date0" name="period_type" style="width:10px;height:10px"><label for="control_date0">从<input type="text" class="date_select" placeholder="请选择日期" size="6"> <i class="fa fa-calendar-minus-o" aria-hidden="true"></i>
到<input type="text" class="date_select" placeholder="请选择日期" size="6"> <i class="fa fa-calendar-plus-o" aria-hidden="true"></i></label>
</nobr>
<nobr>
<input type="radio" id="control_date1" name="period_type" style="width:10px;height:10px;margin-left:10px;"><label for="control_date1">不限</label>
<input type="radio" id="control_date2" name="period_type" style="width:10px;height:10px;margin-left:10px;"><label for="control_date2">最近一天</label>
<input type="radio" id="control_date3" name="period_type" style="width:10px;height:10px;margin-left:10px;"><label for="control_date3">默认</label>
</nobr>
</div>
</td>
</tr>
</table>
</div>
<div class="panel-footer">
<span>
<!--style="color:red;"-->
取消<i class="fa fa-ban" aria-hidden="true"></i>
</span>
<span>
<!--style="color:green;"-->
确认<i class="fa fa-check" aria-hidden="true"></i>
</span>
</div>
</div>
<div style="width: 100%;height:1500px;">
sdfsdfasdfasdfasdfadfasdfasdfasdfasdfasfasfdafdfsd
</div>
<!--引入jQuery-->
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<!--日历js(3)-->
<script src="js/moment.min.js"></script>
<script src="js/moment.zh-cn.js"></script>
<script src="js/ion.calendar.js"></script>
<script>
function dragFunc(id) {
var Drag = document.getElementById(id);
Drag.onmousedown = function(event) {
var ev = event || window.event;
event.stopPropagation();
var disX = ev.clientX - Drag.offsetLeft;
var disY = ev.clientY - Drag.offsetTop;
document.onmousemove = function(event) {
var ev = event || window.event;
Drag.style.left = ev.clientX - disX + "px";
Drag.style.top = ev.clientY - disY + "px";
Drag.style.cursor = "move";
};
};
Drag.onmouseup = function() {
document.onmousemove = null;
this.style.cursor = "default";
};
};
$(function(){
$("#calendar").ionCalendar({
lang: 'zh-cn'
});
$('.date_select').each(function(){
$(this).ionDatePicker({
lang: 'zh-cn',
format: 'YYYY-MM-DD'
});
console.log(232323);
});
/*控制面板可拖动*/
dragFunc("controlbox");
});
</script>
</body>
</html>
扫一扫
684
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
