js+css 灵活层叠 绝对/相对 定位 2
<#import "/WEB-INF/macros/itemChoice.ftl" as queryMacros>
<style type="text/css">
.wrap{
width:100%;
margin:0 auto;
font-family:"微软雅黑";
}
#header{
margin:10px;
height:20px;
font-weight:bold;
font-size:14px;
text-align:left;
}
#container{
position:relative;
margin:2px;
height:20px;
text-align:center;
}
#left_side{ /* position:absolute; */
top:0px;
left:0px;
position:absolute;
font-size:14px;
height:100%;
}
#content{
margin:0px 100px 0px 100px;
font-size:14px;
width:25%;
height:100%;
background:#000;
color:#00EE00;
text-align:right;
}
#right_side{ /* position:absolute; */
top:0px;
left:0px;
margin-left: 72%;
position:absolute;
width:17%;
height:100%;
text-align:left;
}
#footer{
height:1px;
width:100%;
background:#6e6e6e;
margin-top:20px;
}
.tempDrawDiv{position:absolute; border:1px dashed blue; width:0px; height:0px;left:0px; top:0px; overflow:hidden;}
.tempPlotRetc{position:absolute; border:1px solid #CCCCCC; overflow:hidden; background:#EFEFEF ; opacity:0.8; }
.touming{background:rgba(0,0,0,0.1) none repeat scroll !important; /*实现非IE背景透明，文字不透明*/
background:black; display:inline; filter:Alpha(opacity=10);/*实现IE背景透明 width:100px; height:100px; */
color:green; font-size:18px; display:inline; font-weight:bold;}
.touming2{background:rgba(0,0,0,0.1) none repeat scroll !important; /*实现FF背景透明，文字不透明*/
background:black; display:inline; filter:Alpha(opacity=10);/*实现IE背景透明 width:100px; height:100px; */
color:green; font-size:12px; display:inline; font-weight:bold;}
.touming p{ position:relative;display:inline;}/*实现IE文字不透明*/
/* <tr style='color:red;' ><td>"+ (i+1) + " : " + data.name+"</td></tr> */
</style>
<div class="magMainRight" id="magMainRightHeight" >
<div class="magxk" id="tt1"><i class="ico2"></i><a href="#">运行监测</a>|<span>项目运行</span></div>
<div class="h10" id="tt2"></div>
<div class="right-sec" id="tt3" >
<div class="rec100 fixed" style="display:display;">
<form action="${base}/pump/homepage/projrun!show.action" id="form_query_jiben_${_menuId}" class="form form-horizontal">
<input name="_menuId" type="hidden" value="${_menuId}">
<input name="area" type="hidden" value="" />
<@queryMacros.search formId="form_query_jiben_${_menuId}" leverNumber="3" customEvent="null">
</@queryMacros.search>
<input type="button" id="query${_menuId}" value="查询" class="button1" οnclick="showDatas();">
<input type="hidden" id="reverseFlush" οnclick="tempFlushItemRun();" >
</form>
</div>
</div>
<div class="h10" id="tt4" ></div>
<!-- 第二部分 -->
<div class="right-sec" >
<div class="rec100 fixed" style="height:70%;">
<div class="xq-title" id="tt5" style=""><i class="i3"></i>项目实时运行图<span style="float:right">
<a href=# οnclick="showItemPhoto${_menuId}();">查看/隐藏项目现场图片</a></span>
<input type="button" id="plotPlacesPicture" value="图片位置绘制" class="btn btn-success" οnclick="plotPlacesPicture()">
<input type="button" id="finishPlotPicture" disabled="disabled" value="结束绘制" class="btn btn-danger" οnclick="finishPlotPicture();">
<input type="button" id="initializePicture" disabled="disabled" value="图片初始化" class="btn btn-info" οnclick="initializePicture();">
</div>
<div id="itemPhoto_display${_menuId}" style="height:400px;display:none;"></div>
<div class="col-md-9" style="">
<center>
<table id="tempTable" width="778" border="0" align="left" cellpadding="0" cellspacing="0" >
<tr >
<td >
<span id="autoClickOne" style="position:absolute;background-color:red;height:0.1;width:0.1;" οnclick="GetControlPositionFirstCoordinate(this);" ></span>
</td>
</tr>
<tr>
<td align="left" >
<span style="text-align:left;" id="tempTableDiv" >
<img id="pumpRunImage${_menuId}" src="/xiangmutu.jpg" style="max-width:100%;max-height:100%;"/>
</span>
</td>
</tr>
<tr>
<td align="right" >
<span id="autoClickTwo" style="position:absolute;background-color:red;height:0.1;width:0.1;" οnclick="GetControlPositionLastCoordinate(this);"></span>
</td>
</tr>
</table>
</center>
</div>
<div class="col-md-3">
<table id="pumps_data_div_${_menuId}" class="table table-striped" >
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var tempObjArr = new Array() ;
var wId = "storeDiv";
var startX = 0 , startY = 0;
var firstOne = null ;
var lastOne = null ;
var currentTableHeight = $("#magMainRightHeight").height() ;
var uncalled_for = $("#tt1").height() + $("#tt2").height() + $("#tt3").height() + $("#tt4").height() + $("#tt5").height() ;
function plotPlacesPicture(){
document.getElementById('plotPlacesPicture').disabled=true ;
document.getElementById('finishPlotPicture').disabled=false ;
document.getElementById('initializePicture').disabled=true ;
document.onmousedown = function(e){
var evt = window.event || e;
var target = e.target || e.srcElement;
if(target.id == 'finishPlotPicture') {
document.onmousemove = null ;
document.onmouseup = null ;
document.onmousedown = null ;
return;
}
try{
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
startX = evt.clientX + scrollLeft;
startY = evt.clientY + scrollTop;
if( startX > lastOne[0] || startX < firstOne[0] || (startY > (lastOne[1]-currentTableHeight)) || ((startY) < (firstOne[1]-currentTableHeight)) ){
// alert("请在项目图片中选择开始位置！"); return ;
}
var div = $("<div id="+(wId)+" class='tempPlotRetc' style='position:absolute;float:left;margin-left:"+startX+"px;margin-top:"+(startY-(currentTableHeight+uncalled_for))+"px;width:200; height:30; '>"+
"<input type='text' style='display:none;' value="+(startX)+","+(startY-(currentTableHeight+uncalled_for))+" >"+
"<input type='text' style='display:none;width:38px;' onKeyUp='bdText(this);' value=''><span id='bd'></span>"+
"</div>");
div.appendTo($("body"));
}catch(e){
//alert(e);
}
}
}
function initializePicture(){
Main.isProRun = 0 ;
var valueAndZuoBiao = new Array() ;
$("div[id^=storeDiv]").each(function(i){
$(this).find("input").each(function(q){
if(q==0){
valueAndZuoBiao[i] = $(this).attr("value") ;
}
if(q==1){
if( $(this).val() == "" ){
valueAndZuoBiao[i] = 0 + "," + valueAndZuoBiao[i] ;
}else{
valueAndZuoBiao[i] = $(this).val() + "," + valueAndZuoBiao[i] ;
}
}
});
});
$("div[id^=storeDiv]").each(function(i){ $(this).remove() });
for(var ooooo in valueAndZuoBiao ){
var tempValue = valueAndZuoBiao[ooooo].split(",");
var tempHeight = 0 ;
for( var ttmm in tempObjArr ){
var tempObjArrString = tempObjArr[ttmm].split(",");
if( tempValue[0] == tempObjArrString[0] ){
$.ajax({
type: 'POST' ,
url: '${base}/pump/homepage/projrun!getPictureByPumpId.action' ,
data: {tempPump:valueAndZuoBiao[ooooo]} ,
dataType: 'json' ,
async : false ,
success: function(data){
showDatas();
}
});
}
}
}
}
function finishPlotPicture(){
document.onmousemove = null ;
document.onmouseup = null ;
document.onmousedown = null ;
document.getElementById('plotPlacesPicture').disabled=false;
document.getElementById('finishPlotPicture').disabled=true ;
document.getElementById('initializePicture').disabled=false ;
$("div[id^=storeDiv]").each(function(i){
$(this).find("input").each(function(q){
if(q==1){
$(this).css("display","");
}
});
});
Main.isProRun = 1 ;
}
function bdText(obj){
for( var ttmm in tempObjArr ){
var tempObjArrString = tempObjArr[ttmm].split(",");
if( tempObjArrString[0] == $(obj).attr("value") ){
$(obj).next().text( tempObjArrString[1] );
return ;
}else{
$(obj).next().text( " " );
}
}
}
function removeThisElement(obj){
if( confirm("确定删除?")){
var delStr = $(obj).attr("id") ;
$("body").find("div[id^='"+delStr+"']").each(function(i){
$(this).remove() ;
});
var delId = $(obj).attr("value") ;
$.ajax({
url: Main.ContextPath + "${base}/pump/homepage/projrun!delPictureYmzbById.action",
dataType: 'json',
data: {delId:delId} ,
type: 'post',
success: function(datas){ }
});
}
}
function GetControlPositionFirstCoordinate(object) {
var firstCoordinate = document.getElementById('autoClickOne').getBoundingClientRect() ;
firstOne = (Math.round(firstCoordinate.left)+","+Math.round(firstCoordinate.top)).split(",") ;
}
function GetControlPositionLastCoordinate(object) {
var lastCoordinate = document.getElementById('autoClickTwo').getBoundingClientRect() ;
lastOne = (Math.round(lastCoordinate.left)+","+Math.round(lastCoordinate.top)).split(",") ;
}
$("#autoClickOne").trigger("click");
$("#autoClickTwo").trigger("click");
function tempFlushItemRun() {
$("#form_query_jiben_"+${_menuId}).find("select[name^=area]").each(function(i){
$(this).parent().remove();
});
$("#form_query_jiben_"+${_menuId}).find("select[name^=customer]").each(function(w){
$(this).parent().remove();
});
$("#form_query_jiben_"+${_menuId}).find("select[name^=contract]").each(function(w){
$(this).parent().remove();
});
$("#form_query_jiben_"+${_menuId}).find("select[name^=pump]").each(function(w){
$(this).parent().remove();
});
$("#form_query_jiben_"+${_menuId}).find("select[name^=meter]").each(function(w){
$(this).parent().remove();
});
$("#form_query_jiben_"+${_menuId}).find("label").each(function(i){
if( $(this).text()=="省市:" ){
$(this).remove();
}else if( $(this).text()=="客户:" ){
$(this).remove();
}else if( $(this).text()=="项目:" ){
$(this).remove();
}else if( $(this).text()=="水泵:" ){
$(this).remove();
}else if( $(this).text()=="测量点:" ){
$(this).remove();
}
});
setTimeout(function(){
$.ajax({
url: Main.ContextPath + "/pump/diagnose/pumpTree!getPumpZtree.action",
dataType: 'json',
data: {enterprise:Main.enterprise.id,showMeter:true,showPump:true},
async : true ,
type: 'post',
success: function(datas){
flushMacro(datas, ${_menuId} , 3 );
Main.commonTreeStructs = datas;
showDatas();
}
});
},500);
}
function showDatas(){
$("body").find("div[id^=zbid]").each(function(i){
$(this).remove() ;
});
$contractId = $("#contractform_query_jiben_${_menuId}").val();
jugeSelect( "form_query_jiben_${_menuId}" ,
function(){
// 暂注释
$projImg = $('#pumpRunImage${_menuId}');
$projImg.attr('src','${base}/pump/homepage/projrun!showProjImage.action?contract='+$contractId);
$tableCustomerListGrid = $('#pumps_data_div_${_menuId}');
$tableCustomerListGrid.html('');
$.ajax({
url : '${base}/pump/homepage/projrun!showProjDatas.action',
dataType : 'json',
data : {customer:$("#customerform_query_jiben_${_menuId}").val(),area:$("#areaform_query_jiben_${_menuId}").val(),contract:$("#contractform_query_jiben_${_menuId}").val()},
type : 'post',
success : function(result) {
if(!MyTools.procErrMsg(result,true)) {
for(var i=0;i<result.datas.length;i++){
var tempHeight = 0 ;
var data = result.datas[i];
tempObjArr[i] = (i+1) + "," + data.name ;
if(typeof(data.name)!='undefined'){
if( data.ymzb == "zbIsNull" ){
// $tableCustomerListGrid.append("<div id='header' style='color:red;' >"+ (i+1) + " : " + data.name+"</div>");
$tableCustomerListGrid.append("<tr style='color:red;' ><td>"+ (i+1) + " : " + data.name+"</td></tr>");
}else{
// $tableCustomerListGrid.append("<div id='header' style='color:green;' >"+ (i+1) + " : " + data.name+"</div>");
$tableCustomerListGrid.append("<tr style='color:green;' ><td>"+ (i+1) + " : " + data.name+"</td></tr>");
var data = result.datas[i];
var pumpZuoBiao = (data.ymzb).split(",");
var i_Unit,p_Unit;
typeof(data.i_0_Unit) != 'undefined' ? i_Unit = data.i_0_Unit : i_Unit = "";
typeof(data.p_Unit) != 'undefined' ? p_Unit = data.p_Unit : p_Unit = "";
div = $("<div id='zbid"+data.eeId+"' value='"+data.eeId+"' οndblclick='removeThisElement(this);' class='touming' style=' display:inline;position:absolute;margin-left:"+(parseInt(pumpZuoBiao[0]))+"px;margin-top:"+(parseInt(pumpZuoBiao[1])+tempHeight)+"px;'><p>"+data.name+"</p></div>");
tempHeight+=21;
div.appendTo($("body"));
if(typeof(data.i_0)!='undefined'){
if(data.i_0=="断开"){
div = $("<div id='zbid"+data.eeId+"' value='"+data.eeId+"' οndblclick='removeThisElement(this);' class='touming2' style=' color:red; display:inline;position:absolute;margin-left:"+(parseInt(pumpZuoBiao[0]))+"px;margin-top:"+(parseInt(pumpZuoBiao[1])+tempHeight)+"px;'><p>"+data.i_0_Label+" : "+data.i_0+"("+i_Unit+")</p></div>");
}else{
div = $("<div id='zbid"+data.eeId+"' value='"+data.eeId+"' οndblclick='removeThisElement(this);' class='touming2' style=' color:green; display:inline;position:absolute;margin-left:"+(parseInt(pumpZuoBiao[0]))+"px;margin-top:"+(parseInt(pumpZuoBiao[1])+tempHeight)+"px;'><p>"+data.i_0_Label+" : "+data.i_0+"("+i_Unit+")</p></div>");
}
tempHeight+=14;
div.appendTo($("body"));
}
if(typeof(data.p)!='undefined'){
if(data.p=="断开"){
div = $("<div id='zbid"+data.eeId+"' value='"+data.eeId+"' οndblclick='removeThisElement(this);' class='touming2' style=' color:red; display:inline;position:absolute;margin-left:"+(parseInt(pumpZuoBiao[0]))+"px;margin-top:"+(parseInt(pumpZuoBiao[1])+tempHeight)+"px;'><p>"+data.p_Label+" : "+data.p+"("+p_Unit+")</p></div>");
}else{
div = $("<div id='zbid"+data.eeId+"' value='"+data.eeId+"' οndblclick='removeThisElement(this);' class='touming2' style=' color:green; display:inline;position:absolute;margin-left:"+(parseInt(pumpZuoBiao[0]))+"px;margin-top:"+(parseInt(pumpZuoBiao[1])+tempHeight)+"px;'><p>"+data.p_Label+" : "+data.p+"("+p_Unit+")</p></div>");
}
tempHeight+=14;
div.appendTo($("body"));
}
if(typeof(data.cgq) != 'undefined' && data.cgq.length > 0){
for(var j=0;j<data.cgq.length;j++){
var cgq = data.cgq[j];
if(cgq.value=="断开"){
div = $("<div id='zbid"+data.eeId+"' value='"+data.eeId+"' οndblclick='removeThisElement(this);' class='touming2' style=' color:red; display:inline;position:absolute;margin-left:"+(parseInt(pumpZuoBiao[0]))+"px;margin-top:"+(parseInt(pumpZuoBiao[1])+tempHeight)+"px;'><p>"+cgq.label+" : "+cgq.value+"("+cgq.unit+")</p></div>");
}else{
div = $("<div id='zbid"+data.eeId+"' value='"+data.eeId+"' οndblclick='removeThisElement(this);' class='touming2' style=' color:green; display:inline;position:absolute;margin-left:"+(parseInt(pumpZuoBiao[0]))+"px;margin-top:"+(parseInt(pumpZuoBiao[1])+tempHeight)+"px;'><p>"+cgq.label+" : "+cgq.value+"("+cgq.unit+")</p></div>");
}
tempHeight+=14;
div.appendTo($("body"));
}
} } } } } }
});
});
}
showDatas();
function showItemPhoto${_menuId}() {
var item = $("#form_query_jiben_${_menuId} select[name='contract']").val();
if(item == "") {
alert("请选择项目");
return ;
} // alert( $("#itemPhoto_display${_menuId}").css('display') == "none" );
if( $("#itemPhoto_display${_menuId}").css('display') == "none" ){
$("body").find("div").each(function(i){
var tempString = $(this).attr("id") ;
if(tempString){
if( tempString.substring(0,4) == "zbid" ){
$(this).remove() ;
}
}
});
}else{
showDatas();
}
$('#itemPhoto_display${_menuId}').toggle('slow');
PageUtil.loadAjaxPageHtml("${base}/pump/monitor/item!getItemsitePhoto.action",{contract:item},function(data){
$("#itemPhoto_display${_menuId}").html(data);
});
}
</script>
js+css 灵活层叠 绝对/相对 定位 2相关推荐
- html中通过定位 实现下拉,JS+CSS相对定位实现的下拉菜单
本文实例讲述了JS+CSS相对定位实现的下拉菜单.分享给大家供大家参考.具体如下: 这里使用的是相对定位,不过效果还可以,用时候再修整一下,这个只是实现了大概功能,还有许多细节没有修饰. 运行效果截图 ...
- 前端(js/css/html)那些小的知识点，持续更新......
前端(js/css/html)那些小的知识点,持续更新...... 1.行内元素与块级元素有哪些及区别? 块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示.通过样式控制, ...
- css transparent张鑫旭,js/css 张鑫旭.md at master · baipu/js · GitHub
title tags grammar_cjkRuby css 张鑫旭 新建,模板,小书匠 true [toc] 1.Relative 和absolute的搭配: 限制 相对定位 限制层级关系,abso ...
- python博客下载本地文件_解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了...
1.今天网上下载一个博客项目,发现本地访问,js,css加载不了. 我想应该是项目上线的安全措施,但是我想调试项目.找到方法如下 在settings.py里面编辑 添加 STATICFILES_DIR ...
- HTML+JS+CSS+xml快速入门
一. HTML 1.HTML是什么 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,由开发者编写的HTML文件会在浏览器中被加载和解析,然后通过一个页面表 ...
- js+css+html实现放大镜效果
js+css+html实现放大镜效果 1 案例描述 2 编写HTML代码 3 编写CSS代码 4 编写JavaScript代码 5 总代码 1 案例描述 在很多网页中,我们都能看到一个类似于放大镜的效 ...
- JS / CSS / 网络部分知识总结
(1)垂直两栏左边固定 右边自适应 //基本布局*{margin: 0;padding: 0;}.outer{height: 200px;}.left{background-color: gold;h ...
- js+css+html制作下拉菜单
js+css+html制作下拉菜单 1 案例需求 2 编写HTML结构代码 3 编写css样式 4 编写JavaScript部分 5 全部代码 1 案例需求 使用JavaScript+css+html ...
- js 判断js,css是否引入，确保不重复引入
js 判断js,css是否引入,确保不重复引入 (2009-10-31 21:33:44) 转载▼ 标签: 杂谈 分类: js 基本原理: function loadjscssfile(filenam ...
最新文章
- JVM-01:类的加载机制
- leetcode算法题--二叉树的前序遍历
- 解决 GStreamer 遇到了常规流错误问题
- The hierarchy of the type UserOperateLogAdvisor is inconsistent
- 【树链剖分】洛谷树（P3401）
- 全球10大受欢迎的顶级编程语言与薪资水平
- 用成交量判断股价走势是否正常
- 《未来简史》--读后感
- SPJ数据库-初识sql语句（05）（注释版）
- Google Authenticator(谷歌身份验证器)C#版
- OFD文件转PDF怎么转换？教你一键转换方法
- 基于时频域统计特征提取的自然环境声音识别方法
- 华为手机卡在升级界面_华为手机停在开机界面，进入不了主界面，该怎么办？...
- ionic知识系列：Could not remove dir ‘/data/data/io.ionic.starter/code_cache/.ll/‘
- 五个经典漏斗模型，看漏斗思维穿透流程化的本质
- 手机注册邮箱怎么弄？
- gb28181简单实现sip信令服务器（java版基于springboot）：一、netty创建udp服务器
- 骑士人才招聘系统源码SE版 v3.16.0
- 时间与运动--位姿轨迹
- selenium 打开火狐浏览器版本兼容问题踩的坑