1 /** 2 * position fixed (兼容IE6) 3 * @constructor 4 * @author putaoshu@126.com 5 * @date 2012-07-03 6 * @param {Object} obj 主对象 7 * @param {Object} options 组件配置 8 * @param {Number} options.top null top 9 * @param {Number} options.bottom null bottom 10 * @param {Number} options.left null left 11 * @param {Number} options.right null right 12 * @param {Number} options.zIndex null right 13 * @param {Number} options.place null 方位选择:topLeft,topRight,topCenter,bottomLeft,bottomRight,bottomCenter 14 * @see top,bottom,left,right需要指定两项并且和place参数不能同时设置 15 * @example 16 vui.fixed($('#test'),{place:'bottomRight'}) 17 vui.fixed($('#test'),{ 18 top:1, 19 left:1 20 }) 21 */ 22 23 vui.fixed=function(obj,options){ 24 options = $.extend({ 25 top : null, 26 bottom :null, 27 left : null, 28 right : null, 29 place : null,//topLeft,topRight,topCenter,bottomLeft,bottomRight,bottomCenter 30 zIndex : 2 31 },options); 32 33 var o = { 34 isIe6 : vui.browser.ie6, 35 init:function (){ 36 //check place 37 var placeArray = ['topLeft','topRight','topCenter','bottomLeft','bottomRight','bottomCenter']; 38 if(options.place && vui.indexOf(placeArray,options.place) == -1){ 39 alert('place param error'); 40 return; 41 } 42 43 //style init 44 var positionValue = 'fixed'; 45 if (this.isIe6){ 46 positionValue = 'absolute'; 47 } 48 obj.css({position:positionValue,zIndex:options.zIndex,top:'',bottom:'',left:'',right:''}); 49 50 this.set(); 51 this.bindResize(); 52 this.bindScroll(); 53 }, 54 set:function (){ 55 //do 56 if (options.place){ 57 this.place(); 58 }else{ 59 this.normal(); 60 } 61 }, 62 //精确定位 63 normal:function (){ 64 var css = {}; 65 if (options.top != null){ 66 css.top = this.isIe6 ? (options.top + this.css.scrollTop()) : options.top 67 } 68 if (options.left != null){ 69 css.left = this.isIe6 ? (options.left + this.css.scrollLeft()) : options.left 70 } 71 if (options.bottom != null){ 72 if (this.isIe6){ 73 css.top = this.css.top() - options.bottom; 74 }else{ 75 css.bottom = options.bottom; 76 } 77 } 78 if (options.right != null){ 79 if (this.isIe6){ 80 css.left = this.css.left() - options.right; 81 }else{ 82 css.right = options.right; 83 } 84 } 85 obj.css(css); 86 }, 87 //方位定位 88 place:function (){ 89 var place = options.place; 90 this[place](); 91 }, 92 bindScroll:function (){ 93 var $this = this; 94 $(window).bind('scroll',function(){ 95 $this.set(); 96 }) 97 }, 98 bindResize:function (){ 99 var $this = this; 100 $(window).resize(function(){ 101 $this.set(); 102 }); 103 }, 104 css:{ 105 center:function (){ 106 return ( $(window).width() ) /2 + this.scrollLeft() - ( obj.outerWidth() /2); 107 }, 108 top:function (){ 109 return $(window).height()+this.scrollTop() - obj.outerHeight(); 110 }, 111 left:function (){ 112 return $(window).width() + this.scrollLeft() - obj.outerWidth(); 113 }, 114 scrollTop:function (){ 115 return $(document).scrollTop(); 116 }, 117 scrollLeft:function (){ 118 return $(document).scrollLeft(); 119 } 120 }, 121 bottomLeft:function (){ 122 if (this.isIe6){ 123 var left = this.css.scrollLeft(); 124 var top = this.css.top(); 125 obj.css({left:left,top:top}); 126 }else{ 127 obj.css({left:0,bottom:0}); 128 } 129 }, 130 bottomCenter:function (){ 131 if (this.isIe6){ 132 var left = this.css.center(); 133 var top = this.css.top(); 134 obj.css({left:left,top:top}); 135 }else{ 136 obj.css({left:'50%',bottom:0,marginLeft:-obj.outerWidth()/2}); 137 } 138 }, 139 bottomRight:function (){ 140 if (this.isIe6){ 141 var left = this.css.left(); 142 var top = this.css.top(); 143 obj.css({left:left,top:top}); 144 }else{ 145 obj.css({right:0,bottom:0}); 146 } 147 }, 148 topLeft:function (){ 149 if (this.isIe6){ 150 var left = this.css.scrollLeft(); 151 var top = this.css.scrollTop(); 152 obj.css({left:left,top:top}); 153 }else{ 154 obj.css({left:0,top:0}); 155 } 156 }, 157 topCenter:function (){ 158 if (this.isIe6){ 159 var left = this.css.center(); 160 var top = this.css.scrollTop(); 161 obj.css({left:left,top:top}); 162 }else{ 163 obj.css({left:'50%',top:0,marginLeft:-obj.outerWidth()/2}); 164 } 165 }, 166 topRight:function (){ 167 if (this.isIe6){ 168 var left = this.css.left(); 169 var top = $(document).scrollTop(); 170 obj.css({left:left,top:top}); 171 }else{ 172 obj.css({right:0,top:0}); 173 } 174 } 175 } 176 177 o.init(); 178 } 179 180