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>  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 */
     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> 20%;
<span style="white-space:pre">	</span>color:#e6f9ff;
}
#div_ul2 li{
<span style="white-space:pre">	</span> 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; 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>

版权声明：本文为博主原创文章，未经博主允许不得转载。