Home >Web Front-end >JS Tutorial >jQuery location plugin_jquery
Plug-in code:
/*Floating fixed layer at any position*/
/*No Sword (http://regedit.cnblogs.com) 08-03-11*/
/*Description: You can specify The layer floats to any position on the web page. When the scroll bar scrolls, it will remain at the current position and will not flash */
/*2008-4-1 modification: Invalid when the right position is customized , add a judgment here
If it has a value, it will not be set. If it has no value, it will add 18px. Fixed the problem of layer position under ie6
*/
/* call:
1 No parameter call :Default float in the lower right corner
$("#id").floatdiv();
2 built-in fixed position float
//lower right corner
$("#id").floatdiv(" rightbottom");
//Lower left corner
$("#id").floatdiv("leftbottom");
//Lower right corner
$("#id").floatdiv(" rightbottom");
//Upper left corner
$("#id").floatdiv("lefttop");
//Upper right corner
$("#id").floatdiv(" righttop");
//Centered
$("#id").floatdiv("middle");
3 Custom position floating
$("#id").floatdiv({ left:"10px",top:"10px"});
With the above parameters, set the floating layer at 10 pixels from the left and 10 pixels from the top
*/
jQuery.fn.floatdiv=function (location){
//ie6 wants to hide the vertical scroll bar
var isIE6=false;
if($.browser.msie && $.browser.version=="6.0"){
$ ("html").css("overflow-x","auto").css("overflow-y","hidden");
isIE6=true;
};
$(" body").css({margin:"0px",padding:"0 10px 0 10px",
border:"0px",
height:"100%",
overflow:"auto"
});
return this.each(function(){
var loc;//The absolute positioning position of the layer
if(location==undefined || location.constructor == String){
switch(location){
case("rightbottom")://lower right corner
loc={right:"0px",bottom:"0px"};
break;
case( "leftbottom")://lower left corner
loc={left:"0px",bottom:"0px"};
break;
case("lefttop")://upper left corner
loc={left:"0px",top:"0px"};
break;
case("righttop")://upper right corner
loc={right:"0px",top:" 0px"};
break;
case("middle")://center
var l=0;//left
var t=0;//top
var windowWidth ,windowHeight;//The height and width of the window
//Get the height and width of the window
if (self.innerHeight) {
windowWidth=self.innerWidth;
windowHeight=self.innerHeight;
}else if (document.documentElement&&document.documentElement.clientHeight) {
windowWidth=document.documentElement.clientWidth;
windowHeight=document.documentElement.clientHeight;
} else if (document.body) {
windowWidth=document.body.clientWidth;
windowHeight=document.body.clientHeight;
}
l=windowWidth/2-$(this).width()/2;
t= windowHeight/2-$(this).height()/2;
loc={left:l "px",top:t "px"};
break;
default://default is Lower right corner
loc={right:"0px",bottom:"0px"};
break;
}
}else{
loc=location;
}
$(this).css("z-index","9999").css(loc).css("position","fixed");
if(isIE6){
if(loc.right !=undefined){
//2008-4-1 modification: It is invalid when customizing the right position. Add a judgment here
//If there is a value, it will not be set. If there is no value, 18px will be added. Corrected Layer position
if($(this).css("right")==null || $(this).css("right")==""){
$(this).css( "right","18px");
}
}
$(this).css("position","absolute");
}
});
} ;
Usage:
/*Floating fixed layer at any position*/
/*Description: You can make the specified layer float to any position on the web page, and it will remain at the current position when the scroll bar scrolls. Change, no flashing */
/*Call:
$("#id").floatdiv ();
2 Built-in fixed position float
//Lower right corner
$("#id").floatdiv("rightbottom") ;
//Lower left corner
$("#id").floatdiv("leftbottom");
//Lower right corner
$( "#id").floatdiv("rightbottom");
//Upper left corner
$("#id").floatdiv("lefttop");
//Upper right corner
$("#id").floatdiv("righttop");
$("#id").floatdiv( "middle");
3 Custom position float
$("#id").floatdiv({left:"10px",top:"10px" });