js 플로팅 레이어 메뉴 collection_navigation 메뉴

사용 지침
웹 페이지에 첨부된 JS 파일과 CSS 파일을 참조하세요. 예:

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

온라인 데모http://img.jb51.net/online/DivMenu/DivMenu.htm
소스코드 패키지 다운로드http://img.jb51.net/online/DivMenu/DivMenu.zip
그중 DivMenu.js는 Javascript 압축기로 압축한 간소화된 버전입니다. 실제 사용을 위해. DivMenu_develop.js는 학습 및 연구를 위한 상세한 주석이 포함된 개발 버전입니다. 사용시 DivMenu.css 파일에 있는 주석을 참고하여 스타일 정의를 직접 수정할 수 있습니다.
JavaScript 프로그램은 눈에 띄지 않게 구현되었습니다. 즉, 이 JS 파일을 참조하는 HTML 파일에는 다른 조정이 필요하지 않습니다. 그러나 아직 완전한 익명성을 달성하지 못했습니다. 이는 이 프로그램이 여전히 전역 변수와 여러 웹 페이지 노드를 생성한다는 것을 의미합니다. 가능한 한 적은 수의 전역 변수와 노드를 추가하려고 시도했지만 여전히 사용 시 변수 이름 충돌에 주의하시기 바랍니다. 그것. 이 프로그램은 많은 웹 페이지 노드를 추가하는 하나의 전역 변수 "DivMenu"만 추가합니다. 교체된 각 SELECT 노드에 대해 두 개의 노드가 추가됩니다. 이름은 SELECT 노드의 이름 값과 "_a" 접미사 및 "_div"입니다. " 접미사. 예를 들어 SELECT 노드의 원래 이름은 "menu"이고 두 개의 새 노드의 이름은 "menu_a" 및 "menu_div"입니다.
기능 설명
다중 선택 메뉴는 변환되지 않으며, 다중 선택 메뉴의 프롬프트 텍스트는 비활성화="비활성화"로만 구현될 수 있습니다. 여러 개를 선택하려면 Ctrl 키를 누른 채 다중 선택 1 다중 선택 2 다중 선택 3 다중 선택 4 다중 선택 5 다중 선택 메뉴를 넣어 다중 선택 메뉴가 대체되지 않음을 보여주세요. 레이어는 IE6에서 부동 상태가 됩니다. 다른 SELECT에서는 정상적으로 표시될 수 있습니다.
위는 일반적인 SELECT 선택 메뉴의 여러 그룹에 대한 실제 예입니다. 첫 번째는 그룹화로 복잡하고 프롬프트 텍스트는 비활성화된 = 비활성화된 첫 번째 옵션으로 구현됩니다. 프롬프트 텍스트는 값 속성이 없는 옵션으로 구현됩니다. 실습에 따르면 FF는 일반적으로 비활성화된 = "비활성화" 또는 비활성화된 옵션만 처리하여 선택할 수 없게 만드는 반면 IE는 비활성화된 = 비활성화된 옵션을 무시하므로 IE의 메뉴는 일반적으로 프롬프트 텍스트를 사용하는 것으로 추정됩니다. value 속성이 없거나 value=""가 없는 옵션입니다. 소스 코드가 원본 SELECT이며 변경이 필요하지 않음을 알 수 있습니다.
기본 아이디어는 문서의 원래 SELECT 메뉴를 숨겨진 INPUT 양식 항목으로 변환하고, A 요소를 사용하여 메뉴의 프롬프트 텍스트 표시줄과 옵션 표시줄을 만들고, DIV 레이어를 사용하여 메뉴를 만들고, A 요소를 사용하여 각 옵션을 바꾸고 클릭하면 숨겨진 INPUT 양식 항목에 값을 할당합니다.
주요 기능 또는 제한 사항은 다음과 같습니다.
모든 사용 습관은 기존 SELECT 메뉴를 따릅니다.
단일 선택 SELECT 메뉴만 교체되고, 다중 선택 메뉴는 변경되지 않습니다. 일반적으로 다중 선택 메뉴는 플로팅 메뉴로 교체되지 않기 때문입니다.
optgroup으로 그룹화된 옵션도 프롬프트 텍스트 스트립으로 비활성화되거나 값이 없는 옵션을 사용하는 등 다양한 SELECT 요소 기능을 지원합니다. 그리고 SELECT가 DIV 레이어를 차단하는 IE 6의 BUG를 특별히 수정했습니다.
기본 선택 항목을 지원합니다.
일반 메뉴의 거의 모든 기능이 지원되지만, 자바스크립트로 실시간 생성되는 옵션 옵션, 연계 옵션 등 추가적인 인터랙티브 기능은 지원되지 않습니다. 이에 따라 카운티가 변경되므로 지원되지 않습니다.
모든 스타일은 CSS로 정의되며 글꼴 크기는 수정 없이 대부분의 웹페이지에 적용할 수 있는 상대 크기를 사용합니다.
메뉴 위치와 크기는 유연하게 설정되며 모든 웹페이지 레이아웃 및 레이아웃에 적용할 수 있습니다. 이를 수행할 때 대체된 A 요소에 표시될 때 가장 넓은 옵션 텍스트를 수용할 수 있도록 고려하여 원래 SELECT 상자의 너비를 직접 가져오지 않았습니다. 따라서 기존 SELECT보다 메뉴 사이즈가 더 넓어질 수 있으니 이용 시 주의하시기 바랍니다.
한번 사용해 보시고 개선 사항을 공유하고 논의할 수 있는 의견과 제안을 제공해 주시기 바랍니다.