必优博客

本博客所有文章均属原创作品，如有转载，请注明作者：biuuu，来源：http://www.biuuu.com/?p=583

使用absolutize prototype port实现Javascript绝对定位，可用于下拉框中绝对定位某个元素，如按钮，文本框等，让元素固定。

absolutize prototype port库文件(当前版本1.0.0)

使用方法

1. <script text="text/javascript">
2. $(document).ready(function(){
3. $('#biuuu').absolutize();
4. });
5. </script>

HTML页面

1. <div>
2. <input type="button" id="biuuu" value="查找">
3. </div>

absolutize类js库代码如下：

1. jQuery.fn.absolutize = function()
2. {
3. return this.each(function()
4. {
5. var element = jQuery(this);
6. if (element.css('position') == 'absolute')
7. {
8. return element;
9. }
10. var offsets = element.offset();
11. var top = offsets.top;
12. var left = offsets.left;
13. var width = element[0].clientWidth;
14. var height = element[0].clientHeight;
15. element._originalLeft = left - parseFloat(element.css("left") || 0);
16. element._originalTop = top - parseFloat(element.css("top") || 0);
17. element._originalWidth = element.css("width");
18. element._originalHeight = element.css("height");
19. element.css("position", "absolute");
20. element.css("top", top + 'px');
21. element.css("left", left + 'px');
22. element.css("width", width + 'px');
23. element.css("height", height + 'px');
24. return element;
25. });
26. }

仔细阅读absolutize类js库代码，实现过程非常简单。其实此库可实现很多扩展，可应用于其它自定义库。

对于绝对定位，如果使用jQuery插件absolutize prototype port应该比较方便，大家可适当修改absolutize prototype port的JS库代码，直接应用。