@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>