JavaScript CSS 메뉴 기능 개선 판

개선 버 전 은 이 문 제 를 최적화 시 켰 습 니 다.간단 한 자바 script 코드 를 통 해 메뉴 를 추가 할 수 있 습 니 다.동시에 HTML 페이지 를 매우 간결 하 게 만 들 고 코드 를 두 줄 만 쓰 면 됩 니 다!O(∩_∩)O 1.전 제 를 사용 하여 HTML 페이지 에 CSS 파일 과 자바 스 크 립 트 파일 을 도입 합 니 다.다음 과 같다.  .CSS 파일 도입:,menu.css 코드 참조 후 자 바스 크 립 트 파일 도입:2.메뉴 코드 정의:.45677913.설명:1)var root=new Root();root.toString(); 고정 형식 2)설명 메뉴:var m1=new Menu("File","alert(this.innerText);");메뉴 에 표 시 된 이름 은"File"이 고 onclick 이 벤트 는 alert(this.innerText)입 니 다.root.add(m1); 첫 번 째 메뉴(즉,페이지 초기 에 표 시 된 메뉴)를 루트 아래 에 놓 고 add()방법 var m11=new MenuItem("New")을 통 해m1.add(m11); "File"의 하위 메뉴"New"m1.add(new MenuItem("Open","alert("open file");")를 설명 합 니 다."File"을 설명 하 는 하위 메뉴 인"Open"은 위의 코드 를 통 해 메뉴 의 추가 기능 을 완성 할 수 있 습 니 다.코드 파일:<1>menu.css

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Menu</TITLE>
<link type="text/css" rel="stylesheet" href="menu.css">
</HEAD>
<BODY>
<div><script src="menu.js"></script></div>
</BODY>
</HTML>
<2>menu.js

if (document.getElementById){
var root = new Root();

var m1 = new Menu("File","alert(this.innerText);");
root.add(m1);
var m11 = new MenuItem("New");
m1.add(m11);
m1.add(new MenuItem("Open","alert('open file');"));
var m12 = new MenuItem("Save");
m1.add(m12);
m1.add(new MenuItem("Save As"));
m1.add(new MenuItem("Close"));
m1.add(new MenuItem(""));

var m2 = new Menu("Edit");
root.add(m2);

root.toString();
}

좋은 웹페이지 즐겨찾기