기능:
더 나은 외관: 메뉴 제목에 아이콘이 추가되었습니다.
더 나은 액션: 메뉴 슬라이딩 인 및 슬라이딩 아웃 효과를 구현했습니다.
더 쉬워진 사용: 쉽게 사용할 수 있도록 많은 댓글이 추가되었습니다.
물론 아직 발견되지 않은 문제도 있습니다. 조언 부탁드립니다 :)
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]<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;i )stack. push(i); ,
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);
}
}
}
//간격 처리 종료
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
