这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
下面小编就为大家带来一篇 JavaScript 和 jQuery 获取 input 框的绝对位置实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
实例如下:
- <!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>
来源: http://www.phperz.com/article/17/0528/331232.html