jQuery实现，动态自动定位弹窗。JS分页，Ajax请求
工作中碰到一个问题，一个页面中碰到多个地方需要弹窗数据。
网上找了一圈，没有找到合适的，所以自己写了一个。
兼容IE7+，chrome。其它未测试。
需求：点击任意的输入框（也可其它元素，代码中有注释），在输入框下，出现弹窗。出现我需要的数据
效果：
窗口1
窗口2
代码如下：
<style type="text/css">
#on_select{
<span style="white-space:pre"> </span> visibility:hidden;/*初始隐藏*/
<span style="white-space:pre"> </span> width: 350px;
<span style="white-space:pre"> </span> height: 280px;
<span style="white-space:pre"> </span> position: absolute;
<span style="white-space:pre"> </span> z-index: 200;
<span style="white-space:pre"> </span> background-color: white;
<span style="white-space:pre"> </span> color: black;
<span style="white-space:pre"> </span> border: 1px solid #2b8fce;
<span style="white-space:pre"> </span> top:0px;
<span style="white-space:pre"> </span> left: 0px;
}
#on_select ul{
<span style="white-space:pre"> </span>list-style:none; /* 去掉ul前面的符号 */
margin: 0px; /* 与外界元素的距离为0 */
padding: 0px; /* 与内部元素的距离为0 */
width: 100%; /* 宽度根据元素内容调整 */
}
#on_select ul li
{
float:left; /* 向左漂移，将竖排变为横排 */
cursor: pointer;
}
#div_ul1{
background-color: #2b8fce;
height: 30px;
}
#div_ul1 li{
<span style="white-space:pre"> </span>height: 25px;
<span style="white-space:pre"> </span>padding-top: 5px;
<span style="white-space:pre"> </span>width: 20%;
<span style="white-space:pre"> </span>color:#e6f9ff;
}
#div_ul2 li{
<span style="white-space:pre"> </span>width: 100px;
<span style="white-space:pre"> </span>font-size: 12px;
<span style="white-space:pre"> </span>color: #666;
<span style="white-space:pre"> </span>height: 25px;
<span style="white-space:pre"> </span>padding-left:10px;
<span style="white-space:pre"> </span>text-align: left;
}<pre name="code" class="html"><style>
<div id="on_select"> <div style="height: 25px;padding-top: 5px;background-color:#eef1f8;"><a style="cursor: pointer;" onclick="hd()">关闭</a></div> <ul id="div_ul1"> <li onclick="changeul2(this)" id="li1" value="1">A-E</li> <li onclick="changeul2(this)" value="2">F-J</li> <li onclick="changeul2(this)" value="3">K-O</li> <li onclick="changeul2(this)" value="4">P-T</li> <li onclick="changeul2(this)" value="5">U-Z</li> </ul> <div style="height: 2px;width: 100%;background-color:#66c8e8;display: block;"></div> <ul id="div_ul2"> </ul> </div>//此段代码，必须写在body标签中
<pre name="code" class="html"><script type="text/javascript">
var ctpage;//当前页
var allpage;//总页数
var size=24;//大小
var s;//总数
var ctclick;//当前被点击的输入框，因为多个输入框使用。所以需要记录
/* var tab=$("#table_3");//用于IE浏览器
var version = $.browser.version;//用于IE浏览器 */ $("#mainMine").click(function(){/* 设置需要弹窗的输入框，当然可以选其它你需要作为弹窗点的元素 */
changeValue(document.getElementById("mainMine"));
}); $("#otherMainMine").click(function(){/* 设置第二个弹窗点 */
changeValue(document.getElementById("otherMainMine"));
});
<pre name="code" class="html"><span style="white-space:pre"> </span>/* 多个地方需要，如上，多设置几个 */</pre> function changeValue(vid){//调用此函数，出现弹窗<span style="white-space:pre"> </span>ctclick=vid;changeRect();
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>function changeRect(){ //设置选择框的位置和数据<span style="white-space:pre"> </span>var d=document.getElementById("li1");//获取第一个类别<span style="white-space:pre"> </span>changeul2(d);//设置默认页面
<span style="white-space:pre"> </span>$("#on_select").css("visibility","visible");//选择框设置为显示<span style="white-space:pre"> </span>$("#on_select").css("top",$(ctclick).offset().top+$(ctclick).height());<span style="white-space:pre"> </span>/*<span style="font-family: Arial, Helvetica, sans-serif;">$(ctclick).offset().top获取需要弹窗元素距离最外层父元素顶部的绝对距离</span><span style="font-family: Arial, Helvetica, sans-serif;">*/</span>
$("#on_select").css("left",$(ctclick).offset().left);<pre name="code" class="html"><span style="white-space:pre"> </span>/*<span style="font-family: Arial, Helvetica, sans-serif;">$(ctclick).offset().left获取需要弹窗元素距离最外层父元素左边的绝对距离</span><span style="font-family: Arial, Helvetica, sans-serif;">*/</span>
<span style="font-family: Arial, Helvetica, sans-serif;"></span><pre name="code" class="html"> };
/*到此实现弹窗*/
$("#on_select").mouseleave(function(){//鼠标离开弹窗效果
$("#on_select").css("visibility","hidden");
});
/* 改变div_ul2里面的值 */
function changeul2(u){
ctpage=1;//设置初始第一页
$("#div_ul1").children().css("background-color", "transparent").css("color","#e6f9ff");//设置所以选择项背景为透明
$(u).css("background-color","#66c8e8").css("color","white").css("font-weight","bold");//设置当前选择项背景颜色
$.ajax({
url:"getCatalog.action?CatalogId="+u.value,
async:false,
success:function(data){
s=data.split(",");//解析数据
allpage=parseInt((s.length-1)/size+1);//设置总页数
$("#div_ul2").empty();
for(var i=(ctpage-1)*size;i<ctpage*size;i++)
{
$("#div_ul2").append("<li onclick='changeMM(this)'>"+s[i]+"</li>");
}
$("#div_ul2").append("<div id='page_div'><a>上一页</a> | <a class='next' onclick='changepage("+(ctpage+1)+")'>下一页</a></div>");
}
});
}
//分页显示
function changepage(page){
var sn=page*size;//当前页显示数组中的哪些数据
if(page==allpage && (s.length-(page-1)*size)<size){//判断是不是最后一页
sn=s.length;
}
$("#div_ul2").empty();
for(var i=(page-1)*size;i<sn;i++)//动态加入上一页，下一页，首页上页不可点击。尾页一样
{
$("#div_ul2").append("<li onclick='changeMM(this)'>"+s[i]+"</li>");
}
if(page==1){
$("#div_ul2").append("<div id='page_div'><a>上一页</a> | <a class='next' onclick='changepage("+(page+1)+")'>下一页</a></div>");
}else if(page==allpage){
//alert(page==allpage);
$("#div_ul2").append("<div id='page_div'><a class='back' onclick='changepage("+(page-1)+")'>上一页</a> | <a>下一页</a></div>");
}else {
$("#div_ul2").append("<div id='page_div'><a class='back' onclick='changepage("+(page-1)+")'>上一页</a> | <a class='next' onclick='changepage("+(page+1)+")'>下一页</a></div>");
}
}
function changeMM(ipt){//设置输入框里面的值
$(ctclick).empty();//清空数据
$(ctclick).val(ipt.innerText);//重填数据
if(ctclick!=document.getElementById("mainMine")){
$("#on_select").css("visibility","hidden");
return ;
}
<script>
版权声明：本文为博主原创文章，未经博主允许不得转载。
