자바스크립트 공개 스크립트 라이브러리 시리즈(1): 팝업 레이어 스크립트_javascript 기술

1. 요약
이 기사 시리즈는 일반적인 크로스 브라우저 스크립팅 방법을 추상화하기 위한 것입니다.

이 기사에서는 플로팅 레이어를 팝업하는 자바스크립트 기능과 함수의 원리와 기능.

2. 효과 얻기
스크립트를 사용하여 플로팅 레이어를 팝업하는 것은 가장 일반적으로 사용되는 스크립팅 방법 중 하나입니다. 렌더링은 다음과 같습니다.

사진에서 '항공사'를 클릭하면 '항공사' 아래에 플로팅 레이어가 나타납니다.

팝용 스크립트가 꽤 많이 있습니다. -up 상자가 있으며 우리가 사용할 수 있는 다양한 타사 JS 프레임워크가 있습니다. 그러나 일부 스크립트는 너무 단순하여 팝업 효과를 대략적으로만 달성하고 유연성, 다양성 및 크로스 브라우저 기능을 무시합니다. .JS 프레임워크를 사용하는 것은 약간의 낭비입니다. 그래서 몇 가지 정보를 수집하고 정리한 후 아래에 ScriptHelper 클래스의 팝업 레이어 방법을 작성했습니다.
다중 브라우저 지원
객체지향 메소드 캡슐화 사용
사용이 간편하고 활용도가 높습니다.
위치 계산 등 추출 기능을 모두 별도로 호출할 수 있으며 그에 따라 2차 개발을 계속할 수 있습니다.

3. 스크립트 방법
아래에서는 먼저 스크립트 방법을 설명하고 마지막으로 스크립트의 원리를 설명하겠습니다.

코드 복사코드는 다음과 같습니다.

/* ==================== ScriptHelper 开始 ==================== */
/* scriptHelper 脚本帮助对象.
创建人: ziqiu.zhang 2008.3.5
添加函数:
getScroll():得到鼠标滚过的距离-兼容XHTML
getClient():得到浏览器当前显示区域的大小-兼容XHTML
showDivCommon():显示图层.
使用举例:

我是测试图层我是测试图层

事件源

*/
function scriptHelper()
{
}

// 得到鼠标滚过的距离 scrollTop 与 scrollLeft
/* 用法与测试:
var myScroll = getScroll();
alert("myScroll.scrollTop:" + myScroll.scrollTop);
alert("myScroll.scrollLeft:" + myScroll.scrollLeft);
*/
scriptHelper.prototype.getScroll = function ()
{
var scrollTop = 0, scrollLeft = 0;
scrollTop = (document.body.scrollTop > document.documentElement.scrollTop)? document.body.scrollTop:document.documentElement.scrollTop;
if( isNaN(scrollTop) || scrollTop <0 ){ scrollTop = 0 ;}
scrollLeft = (document.body.scrollLeft > document.documentElement.scrollLeft )? document.body.scrollLeft:document.documentElement.scrollLeft;
if( isNaN(scrollLeft) || scrollLeft <0 ){ scrollLeft = 0 ;}
return { scrollTop:scrollTop, scrollLeft: scrollLeft};
}
// 得到浏览器当前显示区域的大小 clientHeight 与 clientWidth
/* 用法与测试:
var myScroll = getScroll();
alert("myScroll.sTop:" + myScroll.sTop);
alert("myScroll.sLeft:" + myScroll.sLeft);
*/
scriptHelper.prototype.getClient = function ()
{
//判断页面是否符合XHTML标准
var isXhtml = true;
if( document.documentElement == null || document.documentElement.clientHeight <= 0)
{
if( document.body.clientHeight>0 )
{
isXhtml = false;
}
}
this.clientHeight = isXhtml?document.documentElement.clientHeight:document.body.clientHeight;
this.clientWidth = isXhtml?document.documentElement.clientWidth:document.body.clientWidth;
return {clientHeight:this.clientHeight,clientWidth:this.clientWidth};
}

// 显示图层,再次调用则隐藏
/* 参数说明:
sObj : 要弹出图层的事件源
divId : 要显示的图层ID
sObjHeight : 事件源的高度,默认为20.需要手工传入是因为对于由于事件源对象可能是各种HTML元素,有些元素高度的计算无法跨浏览器通用.
moveLeft : 手工向左移动的距离.不移动则为0(默认).
divObjHeight: 弹出层的高度.如果传入大于0的此参数, 则当事件源下方空间不足时,在事件源上方弹出层.如果不传此参数则一直在事件源下方弹出.
用法与测试:

事件源

*/
scriptHelper.prototype.showDivCommon = function (sObj,divId, sObjHeight, moveLeft, divObjHeight)
{
//버블링 이벤트 취소
if( typeof(window)! ='정의되지 않음' && window != null && window.event != null )
{
window.event.cancelBubble = true
}
else if( ScriptHelper.showDivCommon.caller.arguments[ 0] != null )
{
ScriptHelper.showDivCommon.caller.arguments[0].cancelBubble = true;
}
//매개변수 감지가 전달되지 않은 경우 기본값을 설정합니다. value
if( moveLeft == null )
{
moveLeft = 0
}
if( sObjHeight == null )
{
sObjHeight = 20; }
if(divObjHeight == null)
{
divObjHeight = 0;
}

var divObj = document.getElementById(divId); >var sObjOffsetTop = 0; //이벤트 소스의 수직 거리
var sObjOffsetLeft = 0; //이벤트 소스의 수평 거리
var myClient = this.getClient()
var myScroll = this.getScroll( ); var sWidth = sObj.width; //이벤트 소스 객체의 너비
var sHeight = sObjHeight; //이벤트 소스 객체의 높이
var BottomSpace; >/* 이벤트 소스 컨트롤의 높이와 너비를 가져옵니다.*/
if( sWidth == null )
{
sWidth = 100;//얻을 수 없는 경우 100입니다.
}
else
{
sWidth = sWidth 1; //1px 거리 유지
}

if( divObj.style.display.toLowerCase() != "none" )
{
/ /레이어 숨기기
divObj.style.display = "none"
}
else
{
if( sObj == null )
{
alert("이벤트 소스 개체가 null입니다.");
return false
}
/* 이벤트 소스 개체의 오프셋 가져오기*/
var tempObj = sObj; 이벤트 소스 좌표를 계산하는 데 사용되는 임시 Object
while( tempObj && tempObj.tagName.toUpperCase() != "BODY" )
{
sObjOffsetTop = tempObj.offsetTop
sObjOffsetLeft = tempObj.offsetLeft; ;
tempObj.offsetParent;
}
tempObj = null;

/* 바닥으로부터의 거리 가져오기*/
bottomSpace =parseInt(myClient.clientHeight) parseInt(sObjOffsetTop) -parseInt(myScroll.scrollTop)) -parseInt(sHeight);
/* 레이어 표시 위치 설정*/
//이벤트 소스 아래 공간이 부족하고 상단 컨트롤이 충분한 경우 팝업 레이어를 수용하기 위해 위에 표시됩니다.
if( divObjHeight>0 && BottomSpace < divObjHeight && sObjOffsetTop >divObjHeight )
{
divObj.style .top = (parseInt(sObjOffsetTop) -parseInt(divObjHeight) - 10).toString() "p x ";
}
else
{
divObj.style.top = (parseInt( sObjOffsetTop ) parseInt( sHeight ) ).toString() "px";
}
divObj.style.left = (parseInt( sObjOffsetLeft ) -parseInt( moveLeft ) ).toString()
divObj. style.display="block";
}
}

// 레이어 닫기
/* 매개변수 설명:
divId: 숨길 레이어의 ID
사용법 및 테스트:
ScriptHelper.closeDivCommon('testDiv');
*/
scriptHelper.prototype.closeDivCommon = function (divId)
{
//
var divObj = document .getElementById(divId); //레이어 객체 가져오기
if( divObj != null )
{
divObj.style.display = "none"
}
}
//scriptHelper 클래스의 인스턴스 객체를 생성합니다.
var ScriptHelper = new scriptHelper()
/* ================ = ScriptHelper end ==================== */



4. 사용 예

다음으로 만듭니다. 이 스크립트를 사용하는 방법을 보여주는 HTML 페이지입니다.
1. 스크립트 파일 참조 위 코드를 ScriptHelper.js 파일에 저장합니다. 페이지로:
>2. 하위 메뉴 작성먼저 하위 메뉴 레이어 2개를 작성합니다.

코드 복사


코드는 다음과 같습니다.

1-1

1-2

< ;/div>

2-1

2-2

하위 메뉴의 경우 가장 중요한 것은 위치와 표시라는 두 가지 스타일을 설정하는 것입니다.
position:absolute를 사용하면 이 레이어를 정확하게 배치하고 표시할 수 있으므로
표시 위치를 제어할 수 있습니다. :none은 로드 시 레이어가 표시되지 않도록 합니다.
메인 메뉴 코드를 다음과 같이 작성합니다.

코드 복사


코드는 다음과 같습니다.

메뉴1
메뉴2
NoSubMenu

그 중 Menu1과 Menu2가 있습니다. 하위 메뉴, NoSubMenu에는 하위 메뉴가 없습니다.
메뉴 객체를 생성하기 위해 a 요소를 사용했지만 여기에 추가된 href 속성이 없기 때문에 기본적으로 마우스를 올려도 손그림으로 바뀌지 않습니다. 여기에 CursorHand 스타일을 추가해야 하며 하위 스타일의 코드는 다음과 같습니다.

가장 중요한 것은 메뉴에 추가된 onclick 이벤트입니다. 이 이벤트는 ScriptHelper.showDivCommon 메소드를 호출하여 레이어를 표시합니다.
메서드의 첫 번째 매개변수 값은 다음과 같습니다. 이벤트 소스 객체가 전달되고, 함수 내 이벤트 소스를 기준으로 표시 위치가 계산됩니다.
메서드의 두 번째 매개변수는 팝업 이미지의 ID를 나타냅니다.
세 번째 매개변수는 method는 아래쪽 오프셋을 설정하는 데 사용되는 선택적 매개변수입니다. 우리가 계산하는 위치는 "Menu1"이므로 일반적으로 이 요소의 왼쪽 상단 좌표를 설정해야 합니다. 이벤트 소스의 높이로 설정하면 기본값은 20px입니다.
메소드의 네 번째 매개변수는 왼쪽 오프셋을 설정하는 데 사용되는 매개변수입니다. 기본값은 0px입니다. ;
메소드의 다섯 번째 매개변수는 선택 매개변수로 팝업 레이어 높이에 전달되어야 합니다. 이 속성을 사용하면 팝업 레이어가 이벤트 소스 위에 나타날 수 있습니다. 이 속성을 전달합니다. 레이어는 항상 이벤트 소스 아래에 나타납니다.
4. 효과 및 전체 코드

전체 예제 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다: