PHP 를 배우려면 자바스크립트를 먼저 배워야 합니까? 기타 관련 웹 디자인 문제
트리 메뉴, Windows 프로그램 관리자에 익숙한 독자는 낯설지 않을 것이다. 항목의 왼쪽에 있는+기호를 클릭하여 항목을 확장합니다. 다시 클릭하면 항목이 축소됩니다. 트리 메뉴에 대한 많은 JavaScript 구현 방법을 읽었는데, 원리는 매우 간단하며, 모두 Style 의 display 속성 제어를 이용한다. 필자 본문의 중점은 여기에 초점을 맞추는 것이 아니라, 데이터베이스에서 데이터를 추출하고 트리 메뉴를 동적으로 업데이트하는 방법에 대해 이야기하고 싶다.
트리 메뉴는 주로 탐색에 사용됩니다. 사이트에는 많은 열이 있으며, 각 열 아래에는 많은 하위 열이 있으며, 새로운 열 추가, 기존 열 이름 변경, 1 차 및 2 차 열 간의 관계 조정 등 열이 자주 변경됩니다. 매번 페이지 코드를 변경하는 것은 매우 불편합니다. 또한 정보가 데이터베이스에 저장되기 때문에 동적 구현이 가능하고 필요합니다.
이 문서는 이론에 초점을 맞추지 않고, 단지 여러분 자신의 코드를 제공하고, 여러분과 함께 PHP 구현 문제를 논의할 것입니다. 설명을 위해 저자는 메뉴 문자열이 메뉴 테이블에 있고, 메인 필드에 주 메뉴 문자열이 있고, 하위 필드에 하위 메뉴 문자열이 있고, 하위 필드에 하위 메뉴 main 가 있다고 가정하여 데이터베이스를 약간 변경했습니다.
lt; -응? Php
$ db = newmy _ db ();
$ db-gt; Query("select subid, main from menu group by main order by subid ");
while ($ d b-gt; Next _ record ()) {
$ main [] = $ db-gt; F ("메인");
$ 키 [] = $ d b-gt; F ("subid");
}
/* 먼저 데이터베이스에 연결하여 소위 열 이름을 질의합니다. 위 코드는 PHPLib 의 데이터베이스 함수를 사용합니다. 여기서 $Main 배열은 주 메뉴 문자열을 저장하고 $Key 배열은 하위 메뉴 키워드를 저장합니다. 사람마다 */
for ($ I = 0; $ ILT; Count ($ main); $ I++) {
$ j = 0;
$ db-gt; 쿼리 ("select sub, subid from menu wheremain ='" .. $ main [$ I]. "'");
///query 를 사용하여 현재 주 메뉴와 일치하는 모든 하위 메뉴 문자열 gt 를 조회합니다.
/* 다음 코드와 HTML 코드를 결합하면 익숙하지 않을 수도 있지만 훨씬 간결하게 보입니다. 트리 메뉴를 시뮬레이션하기 위해 필자 소스 프로그램에서는 l.gif, m.gif 및 p.gif 라는 몇 개의 그림 파일을 사용하고 onMouse 이벤트를 사용하여 메뉴의 동적 효과를 시뮬레이션합니다.
PHP 문은 주로 Javascript 태그 (tag) 의 id */
lt; Tablewidth = "140" border = "0" cellspacing = "0" cellpadding = "0" class = "f14" gt;
lt; Trgt；;
lt; Tdwidth = "15" gt; Lt; /tdgt;
lt; Td id = "lt; -응? Phpecho "m _". $ key [$ I]; -응? Gt; " Width = "9" height = "21" gt; Lt; Imgsrc = "images/p.gif" width = "9" height = "21" gt; Lt; /tdgt;
lt; Tdgt；;
lt; Div style = "cursor: hand" onclick = "JavaScript: makemenu ('lt; -응? Php echo $ key [$ I]; -응? Gt;' ) "onmouseover =" JavaScript: makeshow ('in') "on mouseout =" JavaScript: makeshow ('out') -응? Lt; -응? Phpecho $ main [$ I]; -응? Gt; Lt; /div gt;
lt; /tdgt;
lt; /trgt;
lt; Tr id = "lt; -응? Phpecho "s _". $ key [$ I]; -응? Gt; "스타일 =" 디스플레이: 없음 "gt;
lt; Tdwidth = "15" gt; Lt; /tdgt;
lt; Td colspan = "2" gt;
lt; Tablewidth = "100" border = "0" cellspacing = "0" cellpadding = "0" class = "F9" gt;
lt; -응? Php
while ($ d b-gt; Next_record()){
? Gt;
lt; Trgt；;
lt; Tdwidth = "12" gt;
lt; Imgsrc = "이미지/lt; -응? Php echo++$ j = = $ db-gt; Nf ()? "l.gif": "t.gif"; -응? Gt; "폭 =" 12 "높이 =" 21 "gt; Lt; /tdgt;
//// 표시할 그림을 결정하는 데 $j 변수가 사용된다는 설명이 필요합니다.
이 문장은 하위 메뉴의 마지막 항목은 l.gif 를 표시하고 다른 항목은 t.gif
lt 를 표시한다는 의미입니다. Tdgt；; -응? Lt; -응? Php echo "lt；; A href = \ "yoururl \" gt; Yourstrlt；; /AGT; " 을 눌러 섹션을 인쇄할 수도 있습니다 -응? Gt; Lt; /tdgt;
lt; /trgt;
lt; -응? Php
}
? Gt;
lt; /tablegt;
lt; /tdgt;
lt; /trgt;
lt; /tablegt;
lt; -응? Php
} gt;
여기서 PHP 의 임무는 끝났으니 코드를 실행하여 출력이 무엇인지 확인할 수 있습니다. 결론적으로, 그것의 출력은 바로 트리 메뉴가 원하는 구조이다. Javascript 코드를 구성해야 합니다. 아주 간단합니다. 자세한 설명은 하지 않겠습니다.
lt; Script language = "JavaScript 1.2" gt;
lt; ! -
function makemenu (id) {
mid = "m _"+id;
sid = "s _"+id;
with (문서) {
if (all (sid). style.display = = "none"
all (mid). innerhtml = "lt; Imgsrc =' images/m. gif' width =' 9' height =' 21' gt; " 을 눌러 섹션을 인쇄할 수도 있습니다
} else {
all (sid). style.display = "none";
all (mid). innerhtml = "lt; Imgsrc =' images/p.gif' width =' 9' height =' 21' gt; " 을 눌러 섹션을 인쇄할 수도 있습니다
}
}
}
function makeshow (to) {<
window.event.srcelement.style.fontweight = "bold";
} else {
window.event.srcelement.style.color = "";
window.event.srcelement.style.fontweight = "";
}
}
}
-gt;
lt; /스크립트 gt;
자바스크립트에 익숙한 독자는 위 코드를 이해하면 문제가 되지 않을 것이다. 이 코드의 어려움은 PHP 의 구현 부분에 있습니다. 디버깅 시 큰 문제가 발생하여 항상 Javascirpt 오류를 제시합니다.
만난을 제거한 후, 이 코드를 모두에게 헌납하여, 여러분의 향후 웹 디자인 작업에 귀중한 시간을 절약할 수 있기를 바랍니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 예술명언)