이것은 CTRIP를 모방하는 사용자 정의 데이터 드롭 다운 선택으로 초보자에게 편리한 몇 가지 중요한 매개 변수를 설명합니다.
/ * *id : ID 현재 플러그인 *데이터 : JSON 선택한 데이터 (JSON 형식) *bool : true/false data 데이터를 두 값으로 분리하려면 true *config : 데이터의 내부 객체를 구성합니다. 태그 생성*/ function yselect (id, ydata, bool, config, fn) {var data = []; yselect_close = {}; var name_list = {a : [], b : [], c : [], d : [], e : [], f : [], g : [], h : [], i : [], j : [], k : [], l : [], m : [], n : [] , o : [], p : [], q : [], r : [], s : [], t : [], u : [], v : [], w : [], x : [], y : [], z : [], 기타 : []} // 정의되지 않은 var ydropdowns = document.getElementById (id)를 방지하기 위해 새 배열을 만듭니다. 함수 전처리 () {// 프로세스 데이터 var catalogdata = []; var branddata = []; var China = []; var forex = []; for (ydata의 var i) {if (ydata [i] [config.type] == null) catalogdata.push (ydata [i] [config.id]+';'+ydata [i] [config.name]+';'+ydata [i] [config.alias]) branddata.push (ydata [i] [config.id]+';'+ydata [i] [config.name]+';'+ydata [i] [config.type])}; if (branddata! = "") {for (var i = 0; i <branddata.length; i ++) {var str = branddata [i] .split ( ';') if (str [3] == 0) China.push (str [0] + ';' + str [1] + ';' + str [2]); else forex.push (str [0] + ';' + str [1] + ';' + str [2]); } if (bool) {data = China; 반환 데이터; } else {data = 외국; 반환 데이터; }} else {data = catalogdata; 반환 데이터; // return data}}; 함수 JSONDATA (data_name, ida) {// 전처리 var vis = []에 의해 반환 된 데이터를 처리합니다. // 초기 문자 정의 var ahtml = {a : [], b : [], c : [], d : [], e : [], f : [], g : [], h : [], i : [], j : [], k : [], l : [], m : [], n : [] , o : [], p : [], q : [], r : [], s : [], t : [], u : [], v : [], w : [], x : [], y : [], z : [], 기타 : []}; // 정의되지 않은 var yselect_box = document.createElement ( "div")를 방지하기 위해 새 배열을 만듭니다. // 새 선택 상자 작성 부모 요소 yselect_box.id = ida+"_ yselect_box"; var yselect_div = document.createElement ( "div"); // 문자 반환 값이있는 컨테이너 var yselect_letter = document.createElement ( "p"); // 26 글자 컨테이너 yselect_letter.id = ida+'_ yselect_letter'var stylelink = document.createElement ( "style") // 스킨 생성, 피부 만들기 //stylelink.innerhtml = '#'+id+'_ yselect_box {width : 100%; 위치 : 절대; 상단 : 30px; 왼쪽 : 0; Z-index : 9999; 배경 : #ffff}#'+id+'_ yselect_box p {배경 :#469bde; 패딩 : 0 10px;}#'+id+'_ yselect_box p span.close {font : 16px/20px yahei; cursor : 포인터; 위치 : 절대; 상단 : 0; 오른쪽 : 0; 색상 :#f00}#'+id+'_ yselect_box .hide_tag {border : 1px solid#469bde; 패딩 : 5px; display : 없음; 최소-높이 : 100px; Max-Height : 300px; min-width : 300px; max width : 800px; 오버플로 : auto}#'+id+'_ yselect_box pa {패딩 : 5px; line-height : 28px; color : #fff}#'+id+'_ ytect_box a {너비 : 80px; 디스플레이 : 블록; 텍스트-결정 : 없음; 패딩 : 5px; 선-높이 : 12px; font-size : 12px; float : 왼쪽; 컬러 :#444; 오버플로 : 숨겨진; 텍스트 오버 플로우 : 엘립스 시스; 흰색 공간 : nowrap;}#'+id+'_ yselect_box .hide_tag a : hover {배경 :#469bde; color : #fff;}#'+id+'_ yselect_box .cur {border-bottom : 2px solid#fac51f} '; Stylelink.innerhtml = '#'+ida+'_ yselect_box {width : 100%; min-width : 500px; max-width : 800px; 위치 : 절대; 상단 : 30px; 왼쪽 : 0; z-index : 9999; 배경 : #fff; 테두리 : 1px solid #ddd;}+ida+ida+ida++ida+ida+ida P {패딩 : 0 10px;}#'+ida+'_ yselect_box p span.close {font : 16px/20px microsoft yahei; cursor : 포인터; 위치 : 절대; 상단 : 0; 오른쪽 : 0;#666}#'+ida+'_ yselect_box .hide_tag {padding : 5px 10px; 없음; Min-Height : 50px; Max-Height : 200px; 오버플로 : Auto}#'+ida+'_ yselect_box pa {padding : 5px; line-height : 28px; color :#333; Border-Bottom : 2px solid #bbb; font-weight : bold}#'+ida+'_ yelect_box a {너비 : 80px; 디스플레이 : 블록; 텍스트-결정 : 없음; 패딩 : 5px; 선-높이 : 12px; font-size : 12px; float : 왼쪽; 컬러 :#444; 오버플로 : 숨겨진; Text-OverFlow : Ellipsis; White-space : nowrap;}#'+ida+'_ yselect_box .hide_tag a : hover {background :#469bde; color : #fff;}#'+ida+'_ yselect_box a.cur {border-bottom : 2px solid#469bde; for (var i = 0; i <data_name.length; i ++) {var str = data_name [i] .split ( ';') title.push (str [2] .charat (0) .tolocaleUpperCase ()) // title}에 할당; for (var j in title) {if (name_list [tit [j]]) name_list [tit [j]]. push (data_name [j]); else name_list.other.push (data_name [j])} // (name_list의 var k, process data, 문자 별 별도의 데이터, hide if (name_list [k] .length! = 0) {for (var i = 0; i <name_list [; length [i ++) {var allhtml = '<a allhtml ='<a var it href = "javaScript :"onclick = " ' + fn +'(this)"name = " ' + name_list [k] [i] .split ('; ') [0] +'"> ' + name_list [k] [i] .split ('; ') [1] +'</a> '; ahtml [k] += allhtml; }; yselect_letter.innerhtml+= '<a href = "javaScript :">'+k+'</a>'; yselect_div.innerhtml+= '<div>'+ahtml [k]+'</div>'; }; } var bool = true yselect_box.innerhtml = '<p id = "'+ida+'_ yselect_letter'+'">'+yselect_letter.innerhtml+'<span> x </span>'+yselect_div.innerhtml; ydropdowns.appendChild (yselect_box); ydropdowns.appendChild (스타일 링크); // 페이지에 삽입 yselect_box.getEmentementSyTagName ( 'p') [0] .getElementsByTagName ( 'span') bool = false} // 클릭하여 클릭하여 클릭하여 클릭하여 클릭하여 선택 yselect_close.close = function yselect_close (obool) {if (obool) {ydropdowns.removechild (yselect_box) ydropdowns.removechild (stylelink); bool = false return}; if (bool) {ydropdowns.removechild (yselect_box) ydropdowns.removechild (stylelink); }} // 선택 함수 파괴 return return return ysonect_close} jsondata (pretreatment (), id) navlist (id) 함수 navlist (ids) {// 탭 탭 처리 함수 var a = document.getElementById (yselect_letter '). getElementsByTagName ('a '); var div = document.getElementById (ids+'_ yselect_box'). getElementsByTagName ( 'div'); div [0] .style.display = "block"; a [0] .classname = "cur"; for (var i = 0; i <a.length; i ++) {a [i] .index = i; a [i] .onclick = function () {for (var j = 0; j <a.length; j ++) {div [j] .style.display = "none"; a [j] .classname = ""; }; div [this.index] .style.display = "block"; this.className = "cur"}; }; }; }; };