XP 접이식 메뉴 및 모방 QQ2006 menu_javascript 기술

기능:

더 나은 외관: 메뉴 제목에 아이콘이 추가되었습니다.
더 나은 액션: 메뉴 슬라이딩 인 및 슬라이딩 아웃 효과를 구현했습니다.
더 쉬워진 사용: 쉽게 사용할 수 있도록 많은 댓글이 추가되었습니다.

물론 아직 발견되지 않은 문제도 있습니다. 조언 부탁드립니다 :)
style.height의 값을 동적으로 변경하는 폴더블을 구현하는 것은 그다지 전문적이지는 않습니다. :) 하지만 매우 비슷해 보입니다!

100% 오리지널 winXP 접이식 메뉴 등장! 다른 경우 말씀해 주시면 변경해 드리겠습니다.
(qq2006은 아직 클릭시 떨림이 있습니다.)

먼저 사진을 보세요qq2006의 모습

테스트 웹페이지 주소: navbar.htm
상세 URL: http://lxbzj.com/showartical.asp?N_id= 156
다운로드: http://lxbzj.com/upload/200604/menu.zip
새 버전은 아직 제작 중입니다. . . (업데이트된 js는 레이어 19에 있습니다.)
다음은 2006-04-13에 수정된 js입니다.
- 더 이상 각 에 onclick 및 onkeypress를 추가할 필요가 없습니다. Node.js는 더욱 분리됩니다
-각 메뉴에 이벤트를 추가하는 메뉴 클래스 정의
-키를 누를 때 수정
-간격 처리 추가
-후퇴 가속도 추가(그러나 명확하지는 않음)
- 그룹 내에서 하나의 메뉴만 열 수 있도록 Navbar 개체를 추가했습니다
-새로운 js가 지속적으로 업데이트되고 있습니다. . .

- navbar.js의 코드:

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

// 자바스크립트 문서
/*================================== = =====
* 파일 이름: navbar.js
* 인코딩: Utf-8
* 기능: 메뉴 접기 구현을 위한 javaScript
* 작성자: Lei Xiaobao
* 버전: 2.3
* 시간: 2006-03-07
============================= ===== ========*/
//==========================메뉴 클래스 정의=== === ============;
기능 메뉴(head,child,dir,speed,init_state,ext_on,ext_off)
{
this.head = document.getElementById(헤드) ;//메뉴 헤더
this.body = document.getElementById(child);//메뉴 본문
this.direction = dir;//메뉴 축소 방향
this.speed = 속도 ;//Speed
this.ext_on = ext_on;//확장 메뉴 확장 호출
this.ext_off = ext_off;//확장 메뉴 축소 호출
this.init_state = init_state;//메뉴 초기 설정 상태 true/false
this.a = 10;//가속
//개인변수;
this._interval = false;
this._last_state = false; _temp = false;
this._div = false;
this._parent_control = false; > var temp = new Array(null,null);//temp[0]은 _off()에 사용되고 temp[1]은 _on()에 사용됩니다

//======= =======================방법========================== ===
//클릭 이벤트 처리
this.click = function(e)
{
if (self._parent_control)
{ if (self._last_state = = false)
                                                                          > > > e||(e=window.event)
if (!(e.keyCode ==32 || e.keyCode == 0) )return;
                          //alert(':)');
        for(var i=0;i        {
            if (this.body.childNodes[i].nodeType==1)
            {
                this._div=this.body.childNodes[i];
                휴식;
           }
        }
        if (parseInt(this.body.style.height))//this.body.style.getPropertyCSSValue('height')this.body.currentStyle.height
        {
            this._size = parseInt(this.body.style.height);
        }
        else
        {
           this._size = this._div.offsetHeight;
        }
        스위치(this.init_state)
        {
           case true:
              if (this.body.style.display == '없음')
                {
                    // this._last_state = false;
                    this._on();
               }
                else
               {
                  this._last_state = true;
               }
                휴식;
           default://case false:
               if (this.body.style.display !='none')
               { 사실;
                    this._off();
               }
                휴식;
        }
    }
//전시开菜单
    this._on = function()
    {
        if (self._last_state == false)
         { ;
            self.body.style.display="";
            temp[1] = self.a?2*parseInt(Math.sqrt(self.a*self._size)) 1:self._size/5;
            if (isNaN(parseInt(self.body.style.height)))self.body.style.height="0px";
            if (self.ext_on)
            {
               self.ext_on(self.head,self.body)
             self._inter val = Interval.set(self._action_on,speed);
        }
        //setTimeout('slowon("' self.body.id '")',5)
    }
//收起菜单
    this._off = function()
    {
        if (self._last_state == true)
        {
           self._last_state = false;
           //if (temp[0] == null)
           //{
               temp[0]=self.a?2*parseInt(Math.sqrt(self.a*self._size)) 1:self._size/5;;
            //}
            if(isNaN(parseInt(self.body.style.height)))self.body.style.height = self._size 'px';
            if (self.ext_off)
            {
               self.ext_off(self.head,self.body)
            
          self._inter val = Interval.set(self._action_off,this.speed );
        }
    }
//以下处理滑动
    this._action_on = function()
    {
        if (parseInt(self.body.style.height) temp[1]> ;self._size)
        {
            self.body.style.height = self._size 'px';
            Interval.clear(self._interval);
        }
        else
        {
        self.body.style.height = parseInt(self.body.style.height) temp[1] 'px';
        temp[1]  =self.a;
        }
    }
    this._action_off = function()
    {
        if(parseInt(self.body.style.height)-temp[0]        {
            Interval.clear(self._interval);
            self.body.style.display = "없음";
        }
else
{
self.body.style.height =parseInt(self.body.style.height)-temp[0] 'px'
temp[0]-=self.a ;
       }
        }
}
//수업 종료

//================== 메뉴 모음 세트를 관리하는 데 사용되는 Navbar 클래스 정의 =================================
함수 navbar( dir,a ,speed,ext_on,ext_off)
{
this.open_only_one = true;//이 그룹의 메뉴를 언제든지 하나만 열 것인지 여부, true/false
this.dir = dir; //메뉴 그룹 공개 방향. 메뉴 그룹이므로 방향이 같아야겠죠?
this.a =a;//menu 공용 가속
this.speed =speed;//공용 속도
this.ext_on = ext_on;//공용 확장 오픈 함수 호출
this.ext_off = ext_off;//공개 확장 축소 함수 호출
this.menu_item = new Array();//메뉴 그룹
this._openning;//하나의 메뉴만 열 수 있는 경우 현재 열려 있는 항목을 기록합니다. one Menu
this.open_all = function()//
{
}
this.add = function (head,body)//메뉴 추가 기능
{
var temp = new Menu(head,body,this.dir,this.speed,this.ext_on,this.ext_off)
this.menu_item.push(temp)

this.init = function ()//Navbar의 초기화 함수는 추가가 완료된 후 호출되어야 합니다.
{
if(this.open_only_one == true)
메뉴가 열려 있습니다
if (this.menu_item.length> 0)
{
with(this.menu_item[0])
🎜> init_state = true;
_parent = this;//메뉴의 아버지를 이 Navbar로 설정
_parent_control = true;//메뉴를 제어하도록 상위 항목 설정
init();
} }
This._openning = this.menu_item[0]
                                        ~                                                   를 통해 >                                         >  초기화()
}
else
{//open_only_one == false인 경우 메뉴만 초기화합니다.
for(var i = 0;i {
this.menu_item.init();
                                                       ;
//추가 부모 제어 함수
this._control = function(child)
{
var self =child
Interval.clear(self._interval)
if ( self._last_state == false)
                                                                           ._openning._off(); > 🎜> {
//self._off( );
                return false; ====================간격 처리============================ =
//참고: _stack에는 20개의 항목만 있습니다.
//확장 시 초기값 1-n을 할당해야 합니다.
Interval=
{
length:20,
_action: 새 배열(길이),
_stack: 새 배열(0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16, 17,18,19 ),
_interval : Array(length),
_timeout: new Array(length),
//for(var i=0;i<_action.length push> set:function(action_function,speed,time_out)
{
time_out = time_out?time_out:15000;//필요하지 않은 경우 기본 간격 시간 초과는 15000초입니다. 시간 초과를 설정한 다음 아래에서 setTimeout을 설정한 다음 val._interval[p ]=setInterval('if(Interval._action[' p '])Interval._action[' p ']();',speed); //여기서 반복 실행 함수는 'Interval._action['p']로 쓸 수 없습니다. 'Interval.clear 이후에 완료되지 않은 또 다른 실행이 있을 가능성이 높기 때문에 오류가 발생했습니다
Interval._timeout[p]                                              Interval.clear(' p ')', time_out); // 이 줄은 간격 시간 제한을 설정하며, 필요하지 않은 경우 주석 처리할 수 있습니다.              p])                                                                                                                                                                                     🎜> Interval._action[p] = ""
Interval._stack.push(p);
}
}
}
//간격 처리 종료