使用jQuery实现Div浮动层查询功能
"此资源主要介绍了如何使用Div和CSS实现一个浮动层显示功能,特别是与JavaScript结合,用于查询等交互操作。通过输入框的keyup事件触发查询,并利用jQuery获取Div的位置,创建并显示透明的浮动层。" 在网页设计中,Div(Division)是一种常见的HTML元素,用于对页面内容进行布局和分组。`div`标签通常配合CSS样式来控制其位置、大小、颜色等属性,以实现各种复杂的设计效果。在这个例子中,我们看到一个与JavaScript交互的Div浮动层,用于展示查询结果。 首先,有一个`div`元素,它的ID是"ts",这是用来存放查询结果的浮动层。接着,有一个`input`元素,当用户在其中输入时,会触发`queryName()`函数,执行查询操作。 当页面加载完成时,JavaScript中的`$(function(){...})`块会被执行。这个块使用jQuery库,它获取了`ajax` ID的`input`元素的偏移量(`offset().top`和`offset().left`),高度(`height()`),然后设置`ts` Div的样式,使其定位在`ajax`输入框下方,隐藏(`display:none`),并设置了边框宽度和宽度。这种定位方式(`position:absolute`)使Div相对于最近的非静态定位祖先元素定位,如果没有这样的祖先,则相对于初始包含块(通常是body)。 `queryName()`函数获取用户输入的值,并调用外部函数`kingTool.turing`进行查询。查询结果通过`ajaxQuery`回调函数处理,该函数显示`ts` Div并清除其中的内容,然后调用`createSelect`函数生成新的内容。 `createSelect`函数接收一个以`#`分隔的字符串列表,将每个条目转化为一个可点击的Div元素,添加到`ts` Div中。每个Div元素都有一个`click`事件监听器,当用户点击时,输入框的值更新为选中的内容,并隐藏浮动层。同时,还有一个`mouseout`事件监听器,当鼠标离开Div时,恢复其默认背景颜色。 这个示例展示了如何结合HTML、CSS和JavaScript实现一个动态的、交互式的查询功能,利用Div作为浮动层显示结果,提供良好的用户体验。通过这种方法,开发者可以方便地创建各种交互式的Web应用程序,如搜索建议、下拉菜单等。
<input type="text" name="ajax" onkeyup="queryName()" id="ajax" />
////////////////////////////////////////////////////////
$(function(){
var X=$("#ajax").offset().top;
var Y=$("#ajax").offset().left;
var h=$("#ajax").height();
//找到id为ts的div然后对其进行样式设置。相对路径,距左侧,距上侧,是否显示,边界颜色
$("#ts").css({"position":"absolute","left":Y+"px","top":(X+h+5)+"px","display":"none","border":"#CCC solid 1px","width":"200px"});
//对其title的行进行挂事件
})
function queryName(){
//将其转换成jquery对象在进行传值
var pros = document.getElementById("ajax").value;
kingTool.turing(pros,ajaxQuery);
}
function ajaxQuery(data){
//对传回的集合进行处理
$("#ts").show();
$("#ts").empty();
createSelect(data);
}
function createSelect(list){
var str=list.split("#")
//一个是序号,一个是value
$.each(str,function(k,info){
if(info!=""){
//增加样式
$div=$("<div>"+info+"</div>").addClass("div");
//绑定事件
下载后可阅读完整内容,剩余1页未读,立即下载
- 粉丝: 0
- 资源: 1
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 李兴华Java基础教程:从入门到精通
- U盘与硬盘启动安装教程:从菜鸟到专家
- C++面试宝典:动态内存管理与继承解析
- C++ STL源码深度解析:专家级剖析与关键技术
- C/C++调用DOS命令实战指南
- 神经网络补偿的多传感器航迹融合技术
- GIS中的大地坐标系与椭球体解析
- 海思Hi3515 H.264编解码处理器用户手册
- Oracle基础练习题与解答
- 谷歌地球3D建筑筛选新流程详解
- CFO与CIO携手:数据管理与企业增值的战略
- Eclipse IDE基础教程:从入门到精通
- Shell脚本专家宝典:全面学习与资源指南
- Tomcat安装指南:附带JDK配置步骤
- NA3003A电子水准仪数据格式解析与转换研究
- 自动化专业英语词汇精华:必备术语集锦