1 /** 2 * stick 3 * @constructor 4 * @author putaoshu@126.com 5 * @date 2012-03-20 6 * @param {Object} options 组件配置 7 * @param {Object} options.obj null 粘到那个元素上 8 * @param {Object} options.stickTo null 被粘的对象 9 * @param {Boolean} options.resize true 窗口有变更自动更新 10 * @param {Boolean} options.autoShow false 主体元素有被遮挡时,把主体转移到上面 11 * @param {Object} options.css 12 * @param {Number} options.css.type 0 输入偏移量,1为默认输入 13 * @param {String} options.css.position 'absolute' position 14 * @param {Number} options.css.top 0 向上的偏移量 15 * @param {Number} options.css.left 0 向左的偏移量 16 * @param {Number} options.css.zIndex 2 zIndex 17 * @example 18 vui.stick({ 19 stick:$('#more'), 20 stickTo:$('#moreOperateLayer'), 21 autoShow:true, 22 css:{ 23 top:3, 24 left:0, 25 zIndex:20 26 } 27 }); 28 */ 29 30 vui.stick = function(options) { 31 32 options = $.extend({ 33 stick :null, 34 stickTo : null, 35 resize : true,//窗口有变更自动更新 36 autoShow : false,//自适应:即在主体元素有被遮挡时,把主体转移到上面 37 css:{ 38 type:0, 39 position:'absolute', 40 top : 0, 41 left : 0, 42 zIndex : 2 43 } 44 },options); 45 46 function getStyle(){ 47 var offsetResult = {}; 48 if (options.css.type){ 49 offsetResult = { 50 top: options.css.top, 51 left: options.css.left 52 } 53 54 //自适应:即在主体元素有被遮挡时,把主体转移到上面 55 if (options.autoShow){ 56 var docHeight = $(window).height()+$(document).scrollTop(); 57 var coreTop = offsetResult.top+options.stickTo.outerHeight(); 58 if (coreTop>docHeight){ 59 offsetResult.top = offsetResult.top - options.stickTo.outerHeight(); 60 } 61 } 62 63 }else{ 64 offsetResult = { 65 top: options.stick.offset().top + options.css.top + options.stick.outerHeight(), 66 left: options.stick.offset().left + options.css.left 67 } 68 69 //自适应:即在主体元素有被遮挡时,把主体转移到上面 70 if (options.autoShow){ 71 var docHeight = $(window).height()+$(document).scrollTop(); 72 var coreTop = offsetResult.top+options.stickTo.outerHeight(); 73 if (coreTop>docHeight){ 74 offsetResult.top = options.stick.offset().top - options.stickTo.outerHeight(); 75 } 76 } 77 } 78 79 return offsetResult; 80 } 81 82 options.stickTo.css({position:'absolute',zIndex:options.css.zIndex,top:getStyle().top,left:getStyle().left}).show(); 83 84 if (options.resize){ 85 $(window).resize(function(){ 86 options.stickTo.css(getStyle()); 87 }); 88 } 89 } 90 91