<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>javascript与jQuery设置取得div绝对位置一个小应用(像日历控件一样,在编辑框下面显示一个层)</title>
<script type="text/javascript" src="jquery-1.3.2.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>
</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>
分享到:
相关推荐
下面小编就为大家带来一篇JavaScript和jQuery获取input框的绝对位置实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
如何用javascript获取input输入框中的值,js/jq通过name、id、class获取input输入框中的value 先准备一段 HTML <input type="text" id="CN_NAME" name="CN_NAME" class="CN_NAME"> 一、jquery获取input文本框...
Use jQuery to create interactive elements that respond to visitor input. Get acquainted with jQuery UI. Expand your interface with tabbed panels, dialog boxes, date pickers, and other widgets. ...
如何用javascript获取input输入框中的值,js/jq通过name、id、class获取input输入框中的value 先准备一段 HTML <input type="text" name"username" id="user" placeholder="用户名" class="uusr"> 一、...
好看的select下拉框(带搜索功能),由于默认select样式过丑而且有些东西还不好改,这个是利用input框和ul来实现一个下拉框的效果。分为不带搜索功能和带搜索功能两个部分。以及jquery与javascript两种实现
多年收集积累的JS、jQuery插件、UI集合(90个),前端学习资料 11款JQuery动画效果的导航菜单‘等资料 15jQueryDemo.rar 3DGallery.zip bootstrap-3.3.2-dist.zip bootstrap-3.3.2.zip easyUI 1.4.4 Demo easyzoom....
<script type="text/javascript" src="../js/jquery-1.4.2.js"> * 引入日期插件的文件 * 日期插件的js文件 <script type="text/javascript" src="./jquery.datepick.js"> * 日期插件的css文件 ...
(14)选择id号为radioA的input元素后面的第一个input兄弟元素 (15)选择id号为radioA的input元素后面的所有input兄弟元素 (16)选择dom sample页面中第3个tr元素 (17)选择其type属性值checkbox且索引为偶数...
#jquery.input-group 向结构化表单组添加验证和状态,与 Bootstrap 表单输入兼容。 ###使用 bower bower install jquery.input-group 或 npm npm install jquery.input-group jquery.input-group 至少需要一定的 ...
jQuery插件提供跨浏览器的oninput事件 这是分支 它修复了因更改了jquery api而导致的一些错误。
原因很简单, 第一 JS 是应用客户端的 , 速度影响并不那么明显 , 但是一定要注意什么时候用JQuery的选择器 , 什么时候用JavaScript的选择器 ! 我个人是这样理解的 , 如果在选择对象时 , 逻辑比较容易则不要使用...
本文实例讲述了jQuery中:input选择器用法。分享给大家供大家参考。具体分析如下: 此选择器匹配所有的input元素。例如:<input type=”text” />等等 语法结构: 代码如下:$(“:input”) 实例代码: 代码如下:...
本文实例讲述了jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能。分享给大家供大家参考,具体如下: 最近都成为页面仔了,主要工作都放在了前段,以前总是写后台程序,对前端的一些技术 html,css,...
jquery.rangeinput jQuery插件,用于为输入字段指定最小值和最大值,并带有在每个范围限制处启用/禁用的按钮列表。属性属性“ data-min”和“ data-max”是必需的。 属性“ data-msg”是可选的,并且仅在传递了选项...
JavaScript+jQuery 网页特效设计 ...当文本框(包括<input>和中的文本被选中的时触发) scroll() 当滚动条发生变化时触发 resize() 当调整浏览器窗口大小时触发 2、事件的绑定 bind() 方法:可以向被选元素添加一个或多
CSS3实现动态输入框input框特效.zip
十进制化jquery插件jQuery 插件,可自动向 INPUT 字段添加小数。 例如,如果输入体重,您可以输入1853以获得185.3 。 或者,如果以米为单位输入大小,您可以输入186以获得1.86 。 使用: 包含 jQuery 包含插件代码将...