子iframe中div随着iframe的滚动条而移动;点击li时会自动将li文本内容 添加到UEdeite中去

@iframe中div随着iframe的滚动条而移动!点击li 时 触发事件 ,UEdite动态插入数据

动态生成ul 下li 并为li 添加触发事件;以及点击li文本时 会自动将li的内容插入到 UEdite富文本框内

1父页面div 存在子 iframe

<div>
				<div id="right" style="background-color:white;">
					<iframe id="mainFrame" name="mainFrame" src=""
						style="overflow: visible;" scrolling="yes" frameborder="no"
						width="100%" height="650"></iframe>
		
			</div>
	</div>

子页面:
iframe 内部页面;

<script type="text/javascript">

$(function(){
	//div 跟跟随 iframe 的下拉 移动 
	var  parentWindow = $(window.parent.document); //获取页面 窗体的 【父亲窗体】
	var frm = window.parent.document.getElementById("mainFrame").contentWindow; //【获取 id="mainFrame" 的iframe的窗体】
    $(frm).scroll(function(){  //让 ifrmaer的窗体 触发 滚动条事件【 scroll】;
   
      var menuYloc = $("#boxRight").offset().top; //此ID为随着屏幕滚动div的ID  
      var screlltopvalue = $(frm).scrollTop(); //获取 iframe【 滚动条】移动值 ;
     if(screlltopvalue > 76){ //如果  滚动条 移动值 大于76 时,boxRight就会随着 【滚动条】 移动
    	 $("#boxRight").animate({ top: screlltopvalue+"px" }, { duration: 600, queue: false }); 
     }
   });
    

});


      //点击  ul 下li 触发事件 并将 li中文本内容 插入 到 UEdite 富文本框光标移动位置后;
		$("ul li").click(function(){
	
		    var li_val = $(this).text();	 //获取点击 li的文本内容;
		    var parentId =  $(this).parent().attr("id"); //获取 点击对象(li)的父对象(ul对象)并获取id
			ue.focus();		//富文本 编译器  光标前
			if(parentId =="chinseId") //判断 父选择器的id 是中文还是英文 
			ue.execCommand('inserthtml',li_val); //在UEdite的富文本框内添加  li的内容
			if(parentId == "keyId") 
		    ue.execCommand('inserthtml','['+li_val+']');
		})  
	 
//根据条件查询报告字典数据 
function getReportDataByAjax(typeValue){
    var chineseName = $("#chineseName").val();

	if(typeValue =='0' ){
	  //重置 
	  $("#chineseName").val("");
	  chineseName = null ;
	 
	}
	
	$.ajax({
	   type:"GET",
	   url:"${ctx}/reportDataFormer/getReportDataByAjax",
	   data:{
	     chineseName:chineseName
	   },
	   async:true,
	   success:function(data){

		  if(data!=null){
		  //添加 数据 
		    AddListToUl(data);
		  }else{
		  //无数据  清除 所有 ul下的li 
		   $("#chinseId").find("li").remove();
		   $("#keyId").find("li").remove();
		  }
	   }
	  
	});
	
}

**//先清除老数据 再 添加数据到ul  并为 新增li 添加 事件** 
function AddListToUl(listData){
    $("#chinseId").find("li").remove();
	$("#keyId").find("li").remove();
   for( var  i=0 ;i<listData.length;i++){
      var li_chinese_str="<li id=\"lineid"+i+"\"  class=\"li1\" ><a>"+listData[i].chineseName+"</a></li>";
	  var li_key_str ="<li id=\"lineid"+i+"\"  class=\"li1\" ><a>"+listData[i].keyName+"</a></li>";
	   $("#chinseId").append(li_chinese_str);
	   $("#keyId").append(li_key_str);
   }
   //新增数据  增加 动态  事件 
     $("ul li").click(function(){
	    var li_val = $(this).text();	
	    var parentId =  $(this).parent().attr("id");
		ue.focus();
		if(parentId =="chinseId")
		ue.execCommand('inserthtml',li_val);
		if(parentId == "keyId")
	   ue.execCommand('inserthtml','['+li_val+']');
	})  
}

//判断 数据是否为 null 或者 undefined 或者 空 
function CheckISnullOrEmpty(value){
  var  reg= /^\s*$/;
  return (value !=null && value !=underfined && !reg.test(value));
}
	</script>


<div  class=""  id ="boxRight" >
	 
	 <!--  查询条件 -->
	 <div  class="checkTiaojian">
	   <label class="m-label" style="width: 80px;margin-left: 4%;">字段意思:</label>
				<input type="text"  id="chineseName"  name="chineseName" style="width:40%;height:34px;border: 1px solid #8dcfd3;color: #8e8e8e;">
				<input  class="btn btn-primary"  id='setStation' type="button" style='background-color: #0066CC;color:#F7F7F7;margin-top: 6px;margin-left:10px'    value="查询" onclick="getReportDataByAjax('1');" />
			    <input  class="btn btn-primary"  id='setStation' type="button" style='background-color: #0066CC;color:#F7F7F7;margin-top: 6px;margin-left:10px'    value="重置" onclick="getReportDataByAjax('0');" />
	 </div>
     <div class="Subjects">
       <ul id="chinseId">
	     <li id="lineid"  class="li1" ><a>1号线 设备故障影响清客【合计】</a></li>
	     <li id="lineid2" class="li1" ><a>1号线 设备故障影响清客【人防门/卷帘门】 </a></li>
	     <li id="lineid3" class="li1" ><a>1号线 设备故障影响清客</a></li>
	     <li id="lineid2" class="li1" ><a>1号线 设备故障影响清客</a></li>
	    </ul>
     </div>
      <div class="Subjects">
	   <ul id="keyId"> 
	      <li id="lineid"  class="li1"  ><a>oneWorkingDiagramPlanedCount2</a></li>
	      <li id="lineid2" class="li1"  ><a>oneWorkingDiagramPlanedCount2</a></li>
	      <li id="lineid3" class="li1" ><a>oneWorkingDiagramPlanedCount2</a></li>
	      <li id="lineid2" class="li1" ><a>oneWorkingDiagramRealCount</a></li>
	     
	   </ul>
	  </div>
	</div>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值