첫화면이 이렇다 왼쪽은 셀렉트메뉴 오른쪽은 다른 프레임 영역으로 왼쪽에서 선택을 하면 오른쪽에 다른 파일이나 홈페이지가 뜬다.
나의 소개를 누르면 이런 창이 뜬다.
인천시청이나 서울시청을 누르면 오른쪽 프레임에 뜨는 걸 볼 수 있다.
필요한 파일은 총 4개이다.
<right.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>right</title>
</head>
<body bgcolor="yellowgreen">
<h2>메뉴를 선택하세요</h2>
</body>
</html>
<me.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body bgcolor="yellow">
<h2>안녕하세요 ㅇㅇㅇ입니다.</h2>
</body>
</html>
<menu.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function menu(form){
if(form.url.selectedIndex != 0)
parent.right.location = form.url.options[form.url.selectedIndex].value;
}
</script>
</head>
<body>
<form>
<select name="url" onChange="menu(this.form)">
<option selected>메뉴를 선택하세요
<option value="me.html">나의 소개
<option value="http://www.incheon.go.kr">인천시청
<option value="http://www.seoul.go.kr">서울시청
</select>
</form>
</body>
</html>
 |
1. select문으로 먼저 선택메뉴를 만들어준다.
<select name="url" onChange="menu(this.form)">
id 대신 name을 쓸 수 있고
onclick과 onChange은 비슷한 메소드다
this.form 이건 위쪽 함수에서 사용하게 될 변수명
<option value="me.html">
셀렉트 옵션에서는 하이퍼링크 대신에 value안에 주소를 넣어 줄 수 있다.
2. 함수를 만들어준다.
클릭했을 때 다음에 나오는 index 화면에서 나올 수 있도록
function menu(form){
여기서 form은 태그가 아니라 변수명으로 써주었는데 상관 없다.
if(form.url.selectedIndex != 0)
selectedIndex는 select문에서 나오는 메소드이다.
선택된 인덱스가 0이 아니라면.. 선택을 했다면.. 이런 뜻이다.
0이라면 false 라서 실행을 하지 않는다. 즉 여기서 !=0는 true 라는 뜻
parent.right.location = form.url.options[form.url.selectedIndex].value;
전체 화면 중에서 오른쪽 영역 = 링크(value)를 보낸다.
<index.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<frameset cols="30%, 70%" border="0">
<frame src="menu.html">
<frame src="right.html" name="right">
</frameset>
</html>
프레임을 나눠주는 html 파일
'개발일지 > JavaScript + jquery' 카테고리의 다른 글
| [js] 타이머 setTimeout (0) | 2021.09.09 |
|---|---|
| [js] 현재 날짜와 시간을 찍는 메소드 (0) | 2021.09.09 |
| [js] 현재창과 바로 전 창 닫기(self.close/opener.close) (0) | 2021.09.09 |
| [js] window.open() 공지사항 창 만들기 (0) | 2021.09.09 |
| [js] slect문에서 다중선택 입력 및 출력하기(multiple) (0) | 2021.09.09 |
