今天的一个小应用,需要像日历控件的效果那样,显示对省份的选择。弹出层,同时将显示的值展示在文本框中,或者其他的显示层中。简单代码实现,大家可以在此基础上不断扩展。
代码供大家参考。
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>javascript与jQuery设置取得div绝对位置一个小应用(像日历控件一样,在编辑框下面显示一个层)</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
//全局变量,获得焦点的ID
var onFocusID = "";
//取得绝对位置
function absPos(node){
var x=y=0;
do{
x+=node.offsetLeft;
y+=node.offsetTop;
}while(node=node.offsetParent);
return{
'x':x,
'y':y
};
}
//显示省份
function showProvince(obj){
//javascript的方法
//jQuery("#divProvince").css("left",absPos(obj).x);
//jQuery("#divProvince").css("top",absPos(obj).y + jQuery(obj).outerHeight());
//jQuery的方法
jQuery("#divProvince").css("left",jQuery(obj).offset().left);
jQuery("#divProvince").css("top",jQuery(obj).offset().top + jQuery(obj).outerHeight());
jQuery("#divProvince").show();
onFocusID = obj.id;
}
//隐藏省份
function hideProvince(){
jQuery("#divProvince").hide();
}
//
$(function(){
$("#divProvince input").each(function(){
$(this).click(function(){
//this.checked="checked";
//alert(jQuery(this).attr("value"));
if(onFocusID != ""){
$("#"+onFocusID).val($(this).val());
}
$("#divProvince").hide();
});
});
});
</script>
</head>
<body>
<table>
<tr>
<td>省份</td>
<td><input id="txtOne" type="text" onfocus="showProvince(this);" /></td>
</tr>
<tr>
<td>省份</td>
<td><input id="txtTwo" type="text" onfocus="showProvince(this);" /></td>
</tr>
<tr>
<td>省份</td>
<td><a id="aOne" onclick="showProvince(this);"">点击查看</a></td>
</tr>
</table>
<div id="divProvince" style="display:none; position:absolute;width:260px;background-color:#BFEBEE; border:1px solid #BEC0BF;padding:5px;font-size:12px;">
<input id="Radio1" type="radio" value="北京" />北京
<input id="Radio2" type="radio" value="上海" />上海
<input id="Radio3" type="radio" value="天津" />天津
<input id="Radio4" type="radio" value="重庆" />重庆
<input id="Radio5" type="radio" value="安徽" />安徽
<input id="Radio6" type="radio" value="福建" />福建
<input id="Radio7" type="radio" value="甘肃" />甘肃
<input id="Radio8" type="radio" value="广东" />广东
<input id="Radio9" type="radio" value="广西" />广西
<input id="Radio10" type="radio" value="贵州" />贵州
<input id="Radio11" type="radio" value="海南" />海南
<input id="Radio12" type="radio" value="河北" />河北
<input id="Radio13" type="radio" value="河南" />河南
<input id="Radio14" type="radio" value="黑龙江" />黑龙江
<input id="Radio15" type="radio" value="湖北" />湖北
<input id="Radio16" type="radio" value="湖南" />湖南
<input id="Radio17" type="radio" value="吉林" />吉林
<input id="Radio18" type="radio" value="江苏" />江苏
<input id="Radio19" type="radio" value="江西" />江西
<input id="Radio20" type="radio" value="辽宁" />辽宁
<input id="Radio21" type="radio" value="内蒙古" />内蒙古
<input id="Radio22" type="radio" value="宁夏" />宁夏
<input id="Radio23" type="radio" value="青海" />青海
<input id="Radio24" type="radio" value="山东" />山东
<input id="Radio25" type="radio" value="山西" />山西
<input id="Radio26" type="radio" value="陕西" />陕西
<input id="Radio27" type="radio" value="四川" />四川
<input id="Radio28" type="radio" value="西藏" />西藏
<input id="Radio29" type="radio" value="新.疆" />新疆
<input id="Radio30" type="radio" value="云南" />云南
<input id="Radio31" type="radio" value="浙江" />浙江
<input id="Radio32" type="radio" value="香港" />香港
<input id="Radio33" type="radio" value="澳门" />澳门
<input id="Radio34" type="radio" value="台湾" />台湾
<span style="cursor:pointer;color:red;" onclick="hideProvince();">取消</span>
</div>
</body>
</html>
相关推荐
实例如下: <!...<... <head>...javascript与jQuery设置取得div绝对位置一个小应用(像日历控件一样,在编辑框下面显示一个层)</title> <script type="text/javascript" src="jquery-1.3.
主要介绍了JavaScript和JQuery获取DIV值的方法,结合具体实例形式对比分析了javascript与jQuery获取页面div元素值的实现技巧,需要的朋友可以参考下
5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载 9....
5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载 9....
本书紧密围绕网页设计师在进行Web前台开发中实际需要掌握的技术,全面介绍了使用DIV+CSS、JavaScript、jQuery进行Web页面设计和制作技巧。本书不是单纯地讲解语法,而是通过一个真实的网站进行贯穿,引导出相应的...
第1部分 JavaScript.cCSS与DOM基础篇 第1章 ccJavaScript概述 1.1 JavaScript的起源 1.2 浏览器之争 1.2.1 DHTML 1.2.2 浏览器之间的冲突 1.2.3 标准的制定 1.3 JavaScript的实现 1.3.1...
包含JavaScript、JQuery、CSS+DIV等的实列代码,是一部不可多得的前端开发参考资料。
使用JQUERY做的一个页面DIV动态隐藏 显示 点击+号图片后 DIV会自动隐藏 点击-号图片后 DIV会自动显示 隐藏的DIV区域内的控件值后台仍可以取得到,当页面刷新时,也不会改变隐藏区域的隐藏状态 使用JQUERY将页面状态...
有AjaxJavaScript、CalendarPlug-in、css-template、ToolTips、JQuery Tab、DIV+CSS
div css jquery 列表 javascript 创建的菜单
HTML静态网页设计作业,采用DIV+CSS布局,共有多个页面,使用CSS排版比较丰富,色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js,有的视频+音乐+...
常用来控制div滚动条的scroll样式,可以自己修改合适的效果
第6章 用CSS设置表格与表单的样式 6.1 控制表格 6.2 表格实例一:隔行变色 6.3 表格实例二:鼠标经过时变色的表格 6.4 表格实例三:日历 6.5 CSS与表单 6.6 综合实例一:直接输入...
jquery点击div层图片爆炸碎裂效果,可以添加图片,做成点击碎屏效果
Java学习好东西啊!
如果使用a标签跳转到指定的div区域,则只需要把a标签的href属性设置为“#divId”就好了,比如: 跳转到div <div di=dction_1> 这里是被跳转的区域 </div> 第二个,使用jquery添加或者移除class属性 也很简单,使用...
jquery实现div上下移动 <div> <div class="pt"> <a href="javascript:;" onclick="up(this);">上移 <a href="javascript:;" onclick="down(this);">下移 内容一 </div> <div class="pt"> <a href="javascript...
DIV+CSS+JQUERY源码实例
JQ JS javascript layui UI组件 元素 div 拖动插件JQ JS javascript layui UI组件 元素 div 拖动插件