jQuery插件absolutizePrototypePort实现Javascript绝对定位

使用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库代码,直接应用。

共有0个回答