회사의 지방, 도시 및 카운티 데이터는 상당히 끔찍합니다. EHR 시스템에서 ID를 생성하는 데 사용됩니다. 예를 들어, 푸건 지방은 ID 01211014AOP145에 해당하며 도시는 ID에 해당하며 지구와 카운티는이를 무시합니다. 그런 다음 온라인에서 많은 리소스 플러그인을 찾았습니다. 그 느낌은 적용되지 않았으므로 직접 작성하기로 결정했습니다. 물의 절반의 물통 인 인터페이스를 형식, 스타일 및 색상 일치시키는 방법을 모르기 때문입니다. 나는 JD.com, Amazon, Taobao, Dangdang 및 기타 사람들을 조용히 검색하여 지방, 도시 및 지구가 어떻게 이루어 졌는지에 대해 검색했습니다. 그림은 다음과 같습니다.
마지막으로, 나는 그것을 다음 그림과 결합했습니다.
넌센스가없는 소스 코드에 대해 이야기합시다.
<스타일 유형 = "text/css"> #divprocity {위치 : 절대; 너비 : 350px; 최대 높이 : 220px; 높이 : 자동; 디스플레이 : 없음; 국경 : 1px 고체 #d3d3d3; Z- 인덱스 : 100; 오버플로 : 자동; 오버 플로우 -X : 숨겨진; } .Headmenu {높이 : 34px; 배경 : #f6f6f6; 여백 : 0; 패딩 : 0; } .Headmenu li {float : 왼쪽; 텍스트 정렬 : 센터; 너비 : 60px; 높이 : 32px; 목록 스타일 : 없음; 배경 : #f6f6f6; 라인 높이 : 32px; 글꼴 크기 : 13px; 커서 : 포인터; } .Headmenu li.lidefault {배경 : #f60; 색상 : #fff; 여백 : 0; 패딩 : 0; } .lidiv1, .lidiv2 {높이 : 자동; 최소값 : 30px; 테두리 : 2.5px 고체 #f60; 마진 -탑 : -2px; } .lidiv3 {높이 : 자동; 최소값 : 30px; 최대 높이 : 200px; 테두리 : 2px 고체 #f60; 마진 -탑 : -2px; } .lidiv2, .lidiv3 {디스플레이 : 없음; } .lidiv1 ul, .lidiv2 ul {패딩 : 2px; 여백 : 0; Clear : 둘 다; } .lidiv3 ul {패딩 : 2px; 여백 : 0; Clear : 둘 다; } .lidiv1 ul li, .lidiv2 ul li {float : 왼쪽; 글꼴 크기 : 14px; 너비 : 60px; 라인 높이 : 180%; 목록 스타일 : 없음; 색상 : #252525; 여백 : 0 4px; 커서 : 포인터; 텍스트 정렬 : 센터; } .lidiv3 ul li {float : 왼쪽; 글꼴 크기 : 13px; 라인 높이 : 150%; 색상 : #252525; 마진 : 1px 3px; 목록 스타일 : 없음; 커서 : 포인터; 텍스트 정렬 : 센터; } .lidiv1 ul li : hover, .lidiv2 ul li : 호버, .lidiv3 ul li : 호버 {색상 : #8b51cb; 커서 : 포인터; 텍스트 결정 : 없음; 패딩 : 0; 배경 : #CCC; } .btn_img1 {너비 : 20px; 수직 정상 : 중간; 마진 왼쪽 : -31px; 국경 : 없음; 개요 : 없음; 높이 : 10px; 커서 : 포인터; 배경 : URL (images/img_1.png) No-Repeat Center Center; z- 인덱스 : 10; } .btn_img2 {마진-왼쪽 : -31px; 마진 바닥 : 2px; 너비 : 20px; 높이 : 10px; 국경 : 없음; 개요 : 없음; 수직 정상 : 중간; 커서 : 포인터; 배경 : URL (images/img_2.png) No-Repeat Center Center; z- 인덱스 : 10; } </style>페이지 레이아웃 :
<head> <title> 지방 및 시립 연계의 확장 성 </title> <script type = "text/javaScript"src = "scripts/jquery-1.min.js"> </script> </head> <labe> 해외로 이동하는지 </label> <Input type = "radio"= "value ="1 "/>>> 라벨을 선택하십시오. 이름 = "Radio1"value = "2" /> 외국 <br /> <br /> <lable> 쿼리 지방 및 시립 연결 : < /label> <입력 유형 = "text"id = "txt_procity"onkeyup = "getoutcounty ()"readonly = "readonly"runat = "server" />> <input type = "id ="btnimg ""btnimg " onclick = "changeimg ()" "/> <br/> <label> show 위치 : </label> <br/> <div id ="divprocity "> <ul> <li> provinc </li> <li> city </li> [html] virop <li> forex </li> </ul> <li> <ul> fuzhou </li> <li> <li>> <li> <li>. Fuzhou </li> <li> Fuzhou Fuzhou </li> <li> Fuzhou Fuzhou </li> <li> Fuzhou Fuzhou </li> <li> Fuzhou Fuzhou </li> <li> Fuzhou Fuzhou </li> <li> Fuzhou Fuzhou </li> <li> Fuzhou Fuzhou <li> fujian </li> <li> anhui </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> fuzhou </li> fuzhou </li>> </li> <li> fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> fuzhou <li> <li> fuzhou <li> </li> <li> fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> fuzhou <li> <li> fuzhou <li> </li> <li> fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> fuzhou </li> </div> <div> <p style = "Text -align : Center; Color :#f60"> <strong> 주를 먼저 선택하십시오! </strong> </p> </div>
스크립트:
<script type = "text/javaScript"> $ (document) .ready (function () {$ ( '##divprocity ul.headmenu li'). 클릭 (function () {var index = $ (this) .index (); index == 2) {return false;}를 클릭하십시오. $ (this). = $ (this) .val (); // 외국과 도시의 가치를 비워두고 아이콘을 복원하고 입력 상자를 편집 할 수 있는지 확인하십시오 (입력 [id*= txt_procity]. $ ( '#btnimg'). attr ( "이름", "img1"); "readonly");}) // 전체 쿼리 함수 getoutCounty () {// 경계 : 1px solid #d3d3d3; 배경 : #f6f6f6; 대체 색상 배경 : #f7f7f7; var txt = $ ( "input [id*= txt_procity]"); if (txt.val (). trim () == "") {return false; } var height = txt.height (); var x = txt.offset (). 상단; var y = txt.offset (). 왼쪽; $ ( '#divprocity'). css ({display : "block", 왼쪽 : y + "px", 상단 : x + 높이 + 8 + "px"}); $ ( '#divprocity ul.headmenu li'). eq (2) .show (). css ( "width", "70px"). addClass ( "lideFault"). SIBLESS (). hide (); $ ( '#divprocity'). children ( 'div'). eq (2) .show (). 형제 자매 ( 'div'). hide (); $ ( '##btnimg'). attr ( "class", "btn_img2"); $ ( '#btnimg'). attr ( "이름", "img2"); // 스위치 이미지 태그 // 퍼지 쿼리 관련 코드 var ss = "<ul> <li> Fuzhou Fuzhou </li> <li> Fuzhou Fuzhou </li> <li> Fufuzhou Prefecture </li> </ul>"; $ ( '. lidiv3'). html ( ''); $ ( '. lidiv3'). html (ss); } // 집과 해외에서 오른쪽 버튼을 클릭하여 함수 changeimg () {var _selectvalue = $ ( "input : checked [name $ = raide1]"). val (); if (_selectValue == "" "|| _selectValue == undefined) {alert ("먼저 해외로 갈지 여부를 선택하십시오! "); 거짓을 반환합니다. } var txt = $ ( "입력 [id*= txt_procity]"); var height = txt.height (); var x = txt.offset (). 상단; var y = txt.offset (). 왼쪽; var name = $ ( '#btnimg'). art ( "name"); if (name == "img1") {$ ( '#btnimg'). art ( "class", "btn_img2"); $ ( '#btnimg'). attr ( "이름", "img2"); $ ( '#divprocity'). css ({display : "block", 왼쪽 : y + "px", 상단 : x + 높이 + 8 + "px"}); // 1 국내 및 2 개의 외국 제어판 메뉴 항목이 표시됩니다. $ ( '#divprocity'). children ( 'div'). eq (0) .show (). 형제 자매 ( 'div'). hide (); } else {$ ( '#divprocity ul.headmenu li'). eq (2) .show (). css ( "width", "70px"). addClass ( "lideFault"). 형제 (). hide (); $ ( '#divprocity'). children ( 'div'). eq (2) .show (). 형제 자매 ( 'div'). hide (); }} else {$ ( '#btnimg'). attr ( "class", "btn_img1"); $ ( '#btnimg'). attr ( "이름", "img1"); $ ( '#divprocity'). css ( "display", "none"); }} </script>논리는 먼저 국내 또는 외국을 선택하는 것입니다. 삼각형은 H5 캔버스로 그려지지 않은 그림입니다. 인터넷에는 많은 사진이 있습니다.
1. 입력 유형 버튼을 그림 컨테이너로 사용하지만 IMG로도 꺼낼 수는 없습니다 (아마도 물을 뿌릴 수도 있습니다). 입력은 기본 스타일 버튼이 있습니다. 외부 파란색 테두리를 클릭하고 개요를 제거합니다. 나처럼 아웃 라인을 쓰지 마십시오
2. 프로세스 지향적 인 방식으로 글을 쓰는 것을 느끼고 삼각형을 눌러 모든 정보를로드하고 사진을 전환하고 사진을 클릭 한 다음 닫으십시오. 일부 논리는 자유롭게 확장하는 것입니다. 외국 코드를 원하지 않는 경우 외국 코드를 삭제하고 유사한 지방과 도시를 추가하여 확장하십시오.
3. 데이터의 동적 로딩은 예를 들어,주의 해당 DIV 클래스 이름은 lidiv1이고 상자 구조입니다.
<div <ul> <li> Fuzhou Fuzhou </li> <li> Fuzhou Fuzhou </li> <li> fufuzhou </li> <li> fufuzhou </li> </ul> "; $ ( '. lidiv3').
동적 데이터 SS는 Ajax를 통해 얻을 수 있으며 배경 트래버스를 통해 통과 할 수 있습니다.
var ss = <ul> <li id = "01211014aop145"onclick = "getli (this)"> Fujian Province </li> </ul>
예를 들어, 다음은 .NET의 쓰기 메소드 (낮은 글을 쓰지 않으면 신경 쓰지 마십시오)와 프론트 엔드 ajax로 전달하여 반환 된 값을 받고 $ ( '. lidiv3')에 직접 추가됩니다. html (ss); 동적 데이터를 얻습니다
if (ds! = null && ds.tables.count> 0 && ds.tables [0] .rows.count> 0) {strbuild.append ( "<table id =/"tableshow/"class =/"gridtable/"cellspacing = '0'>"); //strbuild.appendformat("<TR><DIV class =/"dialogTitle1/"> " + title3 +"</div> <tr> "); foreach (ds.tables의 datarow dr [0] .rows) {strbuild.append ( "<tr id = ' + dr ["value "] +"'onMouseOver =/"this.bgcolor = '#faebd7'/"onMouseOut =/"this.bgcolor = ''/"on Click =/"clickonworkplace (this)/"). strbuild.appendformat ( "<td> {0} </td>", dr [ "name"]. tostring ()); strbuild.append ( "</tr>"); } strBuild.append ( "</table>"); }데이터를 가져 와서 Fujian Province를 클릭하여 일반적인 클릭 이벤트를 작성하고 Onclick = "GetLi (this)"배경 스 플라이싱을 작성하십시오.
프론트 엔드에 쓰십시오
함수 getLi (obj) {var id = $ (obj) .attr ( "id"); var text = $ (obj) .text (); // 도시의 데이터를 얻기 위해 지방 ID를 통해 Ajax를 작성할 수 있습니다}그런 다음 지방의 텍스트 ID가 얻어지고 클릭 이벤트를 통해 도시의 데이터를 얻을 수 있습니다. 동일한로드 된 ID 및 텍스트. 입력 상자의 상단에 텍스트 스 플라이 싱은 최종 결과입니다 (이것은 아직 쓰여지지 않았습니다. 매우 간단합니다. 게으른 암 공격이있을 때 쓰고 싶지 않습니다). 그건 그렇고, 위의 텍스트는 읽기 전용으로 설정되었습니다. 읽기 전용과 관련하여, 우리는 Readonly와 Disabled의 차이점에 대해 이야기해야합니다. Readonly는 입력 상자 및 여러 텍스트 입력 상자에만 유효하며 텍스트 스타일은 변경되지 않습니다. 모든 요소와 함께 비활성화 된 기본 시험이지만 호환성을 알고 있어야합니다. runat 속성은 위의 텍스트 상자에 설정되어 .NET 배경이 데이터를 직접 읽도록 촉진합니다.