Ide: Setiap menu drop-down, sebagai sebuah komponen, dapat menerima sekumpulan data dan menghasilkan opsi menu yang berbeda berdasarkan konten data yang berbeda. Korelasi antara ketiga level tersebut dicapai melalui event throw. Data diperoleh dari latar belakang.
Saat mengklik menu provinsi untuk memilih Shaanxi, komponen menu akan menampilkan provinsi saat ini melalui pelemparan acara. Setelah mengetahui provinsinya, Anda dapat memperoleh data kota di bawah provinsi tersebut dari latar belakang. Dan sebagainya.
Efek realisasi:
## URL: http://10.9.72.245:4010
## Metode: "GET"
## Format data:
Permintaan: QueryString
Response:JSON
1. http: //10.9.72.245:4010/getProvince
2. http://10.9.72.245:4010/getCity 3. http://10.9.72.245:4010/getCounty
: /getProvince
Permintaan
: Tidak ada parameter
Respons: { "province":["Beijing","Tianjin","Hebei",...]}
nama antarmuka:/getCity
request:?province="Hebei"
respon: {"city ":["Shijiazhuang" , "Tangshan", "Qinhuangdao",...]}
nama antarmuka: /getCounty
permintaan: ?city="Shijiazhuang"
respons: {"county":["Distrik Chang'an ", "Distrik Qiaodong", "Distrik Qiaoxi",...]}
<!DOCTYPE html>
<html>
<kepala>
<meta charset="UTF-8">
<meta name="viewport" content="width=lebar perangkat, skala awal=1.0">
<title>Dokumen</title>
</kepala>
<tubuh>
<skrip tipe="modul">
impor QueryString dari './js/QueryString.js';
impor DropDownMemu dari './js/DropDownMemu.js';
biarkan cityInfo = {};
init();
fungsi init(){
ajax("http://10.9.72.245:4010","getProvince").then(successFunction).catch(failFunction);
}
//Jalankan setelah komunikasi ajax berhasil:
fungsi suksesFungsi(_data){
biarkan data = JSON.parse(_data);
biarkan kunci = Objek.kunci(data)[0];
data = Objek.nilai(data)[0];
if(DropDownMemu.Obj[kunci]){
DropDownMemu.Obj[kunci].daftar = data;
DropDownMemu.Obj[kunci].nama = data[0];
}kalau tidak{
biarkan memu = new DropDownMemu(kunci);
memu.addEventListener("ubah",changeHandler);
menu.daftar = data;
menu.nama =data[0];
me.appendTo("body");
cityInfo[kunci] = data[0];
}
}
// Saat konten tampilan menu berubah, terima acara yang ditampilkan oleh menu dan dapatkan informasi yang dibawa dalam acara tersebut, seperti {"provinsi":"Shaanxi"} atau {"city":"Xi'an"}
fungsi changeHandler(e){
biarkan kunci = e.currentTarget.label;
cityInfo[kunci] = e.data[kunci];
biarkan interfaceName;
if(e.data.provinsi){
interfaceName = "getCity";
}else if(e.data.kota){
interfaceName = "getCounty";
}kalau tidak{
kembali
}
ajax("http://10.9.72.245:4010",interfaceName,cityInfo).then(successeFunction).catch(failFunction);
}
/*
komunikasi ajax:
Daftar parameter:
url: alamat layanan latar belakang interfaceType: tipe antarmuka, seperti "getProvince"
data: data yang dikirimkan, misalnya: {"provinsi":"Shaanxi"}
Jenis komunikasi: Permintaan "GET" default apakah akan mengirim data dalam format json: defaultnya salah
*/
fungsi ajax(url,interfaceType,data,type="get",json=false){
mengetik = mengetik.toUpperCase();
biarkan o = mengetik==="DAPATKAN"? null : data;
jika(data) data = json? JSON.stringify(data) : QueryString.stringify(data);
lain data = "";
kembalikan Janji baru(fungsi(putuskan,tolak){
biarkan xhr = new XMLHttpRequest();
xhr.open(type,url + "/" + interfaceType + (type==="GET"? "?"+data : ""));
xhr.kirim(o);
xhr.onreadystatechange = fungsi(){
if(xhr.readyState===4 && xhr.status===200){
tekad(xhr.response);
}lainnya jika(xhr.readyState===4){
tekad(xhr.status);
}
}
xhr.onerror= fungsi(){
tolak(xhr.response);
}
})
}
//Jalankan fungsi failFunction(_err){ ketika komunikasi ajax gagal
konsol.log(_err);
}
</skrip>
</tubuh>
</html> Komponen impor kelas DropDownMemu dari "./Component.js";
ekspor kelas default DropDownMemu extends Komponen {
_list; // Opsi menu tarik-turun saat ini.
_name; //Nama yang dipilih untuk ditampilkan, misalnya: "Beijing"
label; //Label menu drop-down saat ini, provinsi, kota, kabupaten
spanLabel; // Label wadah spanCaret; // Segitiga ul; // Wadah opsi tarik-turun bool=false; // Mengontrol peristiwa mouse, status fokus atau pilihan, tidak memicu efek geser masuk dan keluar mouse.
//Atur gaya menu tarik-turun menurut status yang berbeda.
DROPDOWN statis = Simbol();
statis DEFAULT = Simbol();
// Variabel global statis disimpan dalam objek ini setiap kali menu drop-down dibuat, dan setiap menu drop-down yang dibuat dikelola secara global.
Obj statis = {};
konstruktor(_label) {
super("p");
this.label = _label;
//Buat struktur HTML this.render();
//Atur gaya this.setStyle();
// Mouse meluncur masuk dan keluar dan klik, fokus tidak fokus, event klik this.elem.addEventListener("focusin", e =>this.mouseHandler(e));
this.elem.addEventListener("fokus", e =>ini.mouseHandler(e));
this.elem.addEventListener("mouseenter", e=>ini.mouseHandler(e));
this.elem.addEventListener("mouseleave", e=>ini.mouseHandler(e));
this.elem.addEventListener("klik", e => this.mouseHandler(e));
}
penangan tikus(e){
beralih(e.type){
kasus "tikus masuk":
if(this.bool) kembali
this.elem.style.backgroundColor = "#e6e6e6";
merusak;
kasus "daun tikus":
if(this.bool) kembali
this.elem.style.backgroundColor = "#fff";
merusak;
kasus "fokus":
this.setState(DropDownMemu.DROPDOWN);
this.bool = benar;
merusak;
kasus "fokus keluar":
this.setState(DropDownMemu.DEFAULT);
this.bool = salah;
kasus "klik":
if(e.target.constructor !== HTMLLIElement) kembali
this._name = e.target.textContent;
// Memodifikasi konten yang ditampilkan saat ini ketika diklik, mengatur ulang gaya, dan menampilkan acara untuk menginformasikan dunia luar tentang konten saat ini.
ini.setContent();
biarkan evt = new FocusEvent("fokusout");
this.elem.dispatchEvent(evt);
}
}
tetapkan nama(_nama){
ini._nama = _nama;
ini.setContent();
}
dapatkan nama(){
kembalikan ini._nama;
}
setel daftar(_daftar){
this._list = _list;
this.ul.innerHTML = "";
this.ul.appendChild(ini.createLi());
}
// Ubah konten menu yang sedang ditampilkan dan masukkan data setContent(_name){
ini._nama = _nama ||.ini._nama;
this.spanLabel.textContent = this._name;
biarkan evt = new MouseEvent("ubah");
jika(!evt.data) evt.data = {}
evt.data[ini.label] = ini._nama;
this.dispatchEvent(evt);
}
//Buat opsi menu tarik-turun berdasarkan daftar yang ditentukan.
buatLi(_daftar){
ini._daftar = _daftar ||.ini._daftar;
biarkan elem = document.createDocumentFragment();
this._list.forEach((item, indeks) => {
biarkan li = document.createElement("li");
li.textContent = barang;
Objek.penetapan(li.gaya, {
tinggi baris:"26px",
bantalan:"0 15 piksel",
})
elem.appendChild(li);
})
kembalikan elemen;
}
setState(tipe){
beralih(ketik){
kasus DropDownMemu.DROPDOWN:
this.elem.style.backgroundColor = "#e6e6e6";
this.ul.style.display = "blok";
merusak;
kasus DropDownMemu.DEFAULT:
this.elem.style.backgroundColor = "#fff";
this.ul.style.display = "tidak ada";
merusak;
}
}
appendTo(induk){
super.appendTo(induk);
DropDownMemu.Obj[ini.label] = ini;
}
memberikan() {
this.elem.setAttribute("tabIndex",1);
this.spanLabel = dokumen.createElement("span");
this.spanCaret = document.createElement("span");
this.ul = dokumen.createElement("ul");
this.elem.appendChild(ini.ul);
this.spanLabel.textContent = this._name;
this.elem.appendChild(ini.spanLabel);
this.elem.appendChild(ini.spanCaret);
}
setGaya() {
Objek.penetapan(ini.elem.gaya, {
mengapung: "kiri",
minTinggi: "20px",
lebar minimum: "80 piksel",
warna: "#333",
fontWeight: "normal",
perataan teks: "tengah",
spasi putih: "nowrap",
verticalAlign: "tengah",
kursor: "penunjuk",
batas: "1px solid #ccc",
batasRadius: "4px",
warna latar: "#fff",
bantalan: "6px 12px",
Ukuran font: "14 piksel",
pilihan pengguna: "tidak ada",
marginKanan: "100 piksel",
posisi:"relatif",
});
Objek.penetapan(ini.spanLabel.gaya, {
mengapung: "kiri",
bantalan: "0 5px"
})
Objek.penetapan(ini.spanCaret.style, {
tampilan: "blok sebaris",
verticalAlign: "tengah",
borderTop: "4px putus-putus",
borderRight: "4px padat transparan",
borderLeft: "4px solid transparan",
})
Objek.penetapan(ini.ul.gaya, {
listStyle: "tidak ada",
posisi: "mutlak",
atas: "100%",
kiri: "0",
zIndeks: "1000",
lebar minimum: "100 piksel",
bantalan: "5px 0px",
margin: "2 piksel 0 0",
Ukuran font: "14 piksel",
perataan teks: "kiri",
warna latar: "#fff",
batas: "1px rgba padat(0, 0, 0, 0,15)",
batasRadius: "4px",
boxShadow: "0 6px 12px rgba(0, 0, 0, 0.175)",
tampilan: "tidak ada",
})
}
} ekspor kelas default Komponen extends EventTarget{
elemen;
konstruktor(_tipe){
super();
this.elem = ini.createElem(_type);
}
buatElem(_tipe){
biarkan elem = dokumen.createElement(_type);
kembalikan elemen;
}
appendTo(induk){
if(typeof parent==="string") parent = document.querySelector(parent);
parent.appendChild(ini.elem);
}
} biarkan http = require("http");
biarkan querystring = memerlukan("querystring");
biarkan data,
permintaan,
res;
// Membaca semua data kota dan menguraikannya menjadi objek, dan membacanya secara sinkron.
biarkan fs = memerlukan("fs");
biarkan allCityInfo = JSON.parse(fs.readFileSync('./city.json'));
biarkan server = http.createServer(listenerHandler);
server.listen(4010,"10.9.72.245",listenerDoneHandler);
fungsi pendengarHandler(_req,_res){
permintaan = _req;
res = _res;
res.writeHead(200,{
"tipe konten":"teks/html;charset=utf-8",
"Akses-Kontrol-Izinkan-Asal":"*",
"Akses-Kontrol-Izinkan-Header":"*",
});
data="";
req.on("data",fungsi(_data){
data=_data;
})
req.on("akhir",receiveHandler);
}
fungsi menerimaHandler(){
// konsol.log(allCityInfo);
// Parsing tipe antarmuka sesuai dengan url header permintaan let type = req.url.trim().split("?")[0].replace(///g,"");
console.log(tipe);
// Parsing parameter yang masuk sesuai dengan url header permintaan if(req.method.toUpperCase()==="GET"){
if(req.url.includes("favicon.ico")) return res.end();
lain data = req.url.includes("?") ? req.url.split("?")[1] : "";
}
mencoba{
data = JSON.parse(data);
}menangkap{
data = string kueri.parse(data);
}
konsol.log(data);
//Menemukan data berdasarkan tipe antarmuka.
biarkan daftar = {};
beralih(ketik){
kasus "getProvince":
daftar.provinsi = Objek.kunci(allCityInfo);
merusak;
kasus "getCity" :
list.city = Objek.kunci(allCityInfo[data.province]);
merusak;
kasus "getCounty":
list.county = allCityInfo[data.province][data.city];
merusak;
}
console.log(daftar);
res.write(JSON.stringify(daftar));
res.end()
}
fungsi pendengarDoneHandler(){
console.log("Layanan berhasil dimulai");
} {
"Beijing": {
"Beijing": ["Distrik Dongcheng", "Distrik Xicheng", "Distrik Chongwen", "Distrik Xuanwu", "Distrik Chaoyang", "Distrik Fengtai", "Distrik Shijingshan", "Distrik Haidian", "Distrik Mentougou", "Distrik Fangshan", "Distrik Tongzhou", "Distrik Shunyi", "Distrik Changping", "Distrik Daxing", "Distrik Pinggu", "Distrik Huairou", "Kabupaten Miyun", "Kabupaten Yanqing", "Lainnya"]
} ,
"Tianjin": {
"Tianjin": ["Distrik Heping", "Distrik Hedong", "Distrik Hexi", "Distrik Nankai", "Distrik Hebei", "Distrik Hongjiao", "Distrik Baru Binhai", "Distrik Dongli", "Distrik Xiqing" Distrik", "Distrik Jinnan", "Distrik Beichen", "Distrik Ninghe", "Distrik Wuqing", "Kabupaten Jinghai", "Distrik Baodi", "Jixian", "Distrik Tanggu", "Distrik Hangu", " Distrik Dagang ", "Distrik Baodi", "Lainnya"]
},
}
Di atas adalah penjelasan detail menu linkage tiga level menggunakan JS (beserta penjelasan ide). Untuk informasi lebih lanjut, harap memperhatikan artikel terkait lainnya di PHP situs web Cina!
