แนวคิด: แต่ละเมนูแบบเลื่อนลงเป็นส่วนประกอบสามารถรับชุดข้อมูลและสร้างตัวเลือกเมนูที่แตกต่างกันตามเนื้อหาข้อมูลที่แตกต่างกัน ความสัมพันธ์ระหว่างสามระดับนั้นเกิดขึ้นได้จากการขว้างปาเหตุการณ์ ข้อมูลได้มาจากพื้นหลัง
เมื่อคลิกที่เมนูจังหวัดเพื่อเลือกมณฑลส่านซี ส่วนประกอบเมนูจะยกเลิกจังหวัดปัจจุบันผ่านการจัดกิจกรรม หลังจากทราบจังหวัดแล้ว สามารถรับข้อมูลเมืองภายใต้จังหวัดจากเบื้องหลังได้ และอื่นๆ
ผลการรับรู้:
## URL: http://10.9.72.245:4010
## วิธีการ: "GET"
## รูปแบบข้อมูล:
คำขอ: การตอบสนอง QueryString
: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
interface name: /getProvince
Request
: No parameters
Response: { "province":["Beijing","Tianjin","Hebei",...]}
interface name:/getCity
request:?province="Hebei"
response: {"city ":["Shijiazhuang" , "Tangshan", "Qinhuangdao",...]}
interface name: /getCounty
request: ?city="Shijiazhuang"
response: {"county":["Chang'an District ", "เขตเฉียวตง", "เขตเฉียวซี",...]}
<!DOCTYPE html>
<html>
<หัว>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, Initial-scale=1.0">
<title>เอกสาร</title>
</หัว>
<ร่างกาย>
<ประเภทสคริปต์ = "โมดูล">
นำเข้า QueryString จาก './js/QueryString.js';
นำเข้า DropDownMemu จาก './js/DropDownMemu.js';
ให้ cityInfo = {};
เริ่มต้น();
ฟังก์ชั่น init(){
ajax("http://10.9.72.245:4010,"getProvince").then(successFunction).catch(failFunction);
-
//ดำเนินการหลังจากการสื่อสาร Ajax สำเร็จ:
ฟังก์ชั่น succeseFunction (_data) {
ให้ data = JSON.parse(_data);
ให้คีย์ = Object.keys (ข้อมูล) [0];
ข้อมูล = Object.values (ข้อมูล) [0];
ถ้า(DropDownMemu.Obj[คีย์]){
DropDownMemu.Obj[คีย์].list = ข้อมูล;
DropDownMemu.Obj[คีย์].ชื่อ = ข้อมูล[0];
}อื่น{
ให้ memu = DropDownMemu ใหม่ (คีย์);
memu.addEventListener("เปลี่ยน",changeHandler);
memu.list = ข้อมูล;
memu.name =ข้อมูล[0];
memu.appendTo("ร่างกาย");
cityInfo[คีย์] = ข้อมูล[0];
-
-
// เมื่อเนื้อหาที่แสดงเมนูเปลี่ยนแปลง รับเหตุการณ์ที่เมนูโยนออกมา และรับข้อมูลที่ดำเนินการในเหตุการณ์ เช่น {"province": "Shaanxi"} หรือ {"city": Xi'an"}
ฟังก์ชั่น changeHandler (e) {
ให้คีย์ = e.currentTarget.label;
cityInfo[คีย์] = e.data[คีย์];
ให้ชื่ออินเทอร์เฟซ;
ถ้า(e.data.province){
ชื่ออินเทอร์เฟซ = "getCity";
} อื่นถ้า(e.data.city){
interfaceName = "getCounty";
}อื่น{
กลับ
-
ajax("http://10.9.72.245:4010",interfaceName,cityInfo).then(successeFunction).catch(failFunction);
-
-
การสื่อสารของอาแจ็กซ์:
รายการพารามิเตอร์:
url: อินเทอร์เฟซที่อยู่บริการพื้นหลังประเภท: ประเภทอินเทอร์เฟซเช่น "getProvince"
ข้อมูล: ข้อมูลที่ส่ง เช่น {"จังหวัด": มณฑลส่านซี "}
ประเภทการสื่อสาร: ค่าเริ่มต้น "GET" ร้องขอว่าจะส่งข้อมูลในรูปแบบ json หรือไม่: ค่าเริ่มต้นคือเท็จ
-
ฟังก์ชั่น ajax (url, interfaceType, data, type = "get", json = false) {
type = type.toUpperCase();
ให้ o = type==="GET"? null : data;
if(data) data = json? JSON.stringify(data) : QueryString.stringify(ข้อมูล);
ข้อมูลอื่น = "";
คืนสัญญาใหม่ (ฟังก์ชั่น (แก้ไข, ปฏิเสธ) {
ให้ xhr = XMLHttpRequest ใหม่ ();
xhr.open(type,url + "/" + interfaceType + (type==="GET"? "?"+data : ""));
xhr.ส่ง(o);
xhr.onreadyStateChange = function () {
ถ้า(xhr.readyState===4 && xhr.status===200){
แก้ไข (xhr. ตอบกลับ);
} มิฉะนั้น if(xhr.readyState===4){
แก้ไข (xhr.status);
-
-
xhr.onerror= ฟังก์ชัน(){
ปฏิเสธ (xhr. ตอบกลับ);
-
-
-
//ดำเนินการฟังก์ชัน failedFunction(_err){ เมื่อการสื่อสาร ajax ล้มเหลว
console.log(_err);
-
</สคริปต์>
</ร่างกาย>
</html> นำเข้าส่วนประกอบจาก "./Component.js";
ส่งออกคลาสเริ่มต้น DropDownMemu ขยาย Component {
_list; // ตัวเลือกเมนูแบบเลื่อนลงปัจจุบัน
_name; //ชื่อที่เลือกให้แสดงในปัจจุบัน เช่น "ปักกิ่ง"
label; // ป้ายกำกับของเมนูแบบเลื่อนลงปัจจุบัน จังหวัด เมือง เขต
spanLabel; // ป้ายกำกับคอนเทนเนอร์ spanCaret; // Triangle ul; // ตัวเลือกแบบเลื่อนลง bool=false; // ควบคุมเหตุการณ์ของเมาส์ สถานะโฟกัส หรือการเลือก ไม่ทริกเกอร์เอฟเฟกต์การเลื่อนเมาส์เข้าและออก
//กำหนดรูปแบบของเมนูแบบเลื่อนลงตามสถานะต่างๆ
DROPDOWN แบบคงที่ = สัญลักษณ์ ();
ค่าเริ่มต้นคงที่ = สัญลักษณ์ ();
// ตัวแปรส่วนกลางแบบคงที่จะถูกเก็บไว้ในออบเจ็กต์นี้ทุกครั้งที่มีการสร้างเมนูแบบเลื่อนลง และแต่ละเมนูแบบเลื่อนลงที่สร้างขึ้นจะได้รับการจัดการแบบโกลบอล
Obj แบบคงที่ = {};
ตัวสร้าง (_label) {
ซุปเปอร์("พี");
this.label = _label;
//สร้างโครงสร้าง HTML this.render();
//กำหนดสไตล์ this.setStyle();
// เมาส์เลื่อนเข้าและออกแล้วคลิก โฟกัสอยู่นอกโฟกัส เหตุการณ์การคลิก this.elem.addEventListener("focusin", e =>this.mouseHandler(e));
this.elem.addEventListener("โฟกัส", e =>this.mouseHandler(e));
this.elem.addEventListener("mouseenter", e=>this.mouseHandler(e));
this.elem.addEventListener("เมาส์ลีฟ", e=>this.mouseHandler(e));
this.elem.addEventListener("คลิก", e => this.mouseHandler(e));
-
MouseHandler (E) {
สวิตช์ (e.type) {
กรณี "mouseenter":
if (this.bool) กลับมา
this.elem.style.พื้นหลังสี = "#e6e6e6";
หยุดพัก;
กรณี "Mouseleave":
ถ้า (this.bool) กลับมา
this.elem.style.พื้นหลังสี = "#fff";
หยุดพัก;
กรณี "โฟกัส":
this.setState(DropDownMemu.DROPDOWN);
this.bool = จริง;
หยุดพัก;
กรณี "โฟกัสออก":
this.setState(DropDownMemu.DEFAULT);
this.bool = เท็จ;
กรณี "คลิก" :
ถ้า (e.target.constructor !== HTMLLIElement) กลับมา
this._name = e.target.textContent;
// แก้ไขเนื้อหาที่แสดงอยู่ในปัจจุบันเมื่อคลิก รีเซ็ตสไตล์ และส่งเหตุการณ์เพื่อแจ้งให้โลกภายนอกทราบถึงเนื้อหาปัจจุบัน
this.setContent ();
ให้ evt = ใหม่ FocusEvent("focusout");
this.elem.dispatchEvent(evt);
-
-
ตั้งชื่อ (_name) {
นี้._name = _name;
this.setContent();
-
รับชื่อ(){
ส่งคืนสิ่งนี้._name;
-
ตั้งค่ารายการ (_List) {
this._list = _List;
this.ul.innerhtml = "";
this.ul.appendChild(this.createLi());
-
// แก้ไขเนื้อหาที่แสดงอยู่ในปัจจุบันของเมนูและโยนข้อมูล setContent(_name){
this._name = _name ||. นี้._name;
this.spanLabel.textContent = this._name;
ให้ evt = new MouseEvent("change");
ถ้า(!evt.data) evt.data = {}
evt.data[this.label] = this._name;
this.dispatchEvent (evt);
-
// สร้างตัวเลือกเมนูแบบเลื่อนลงตามรายการที่ระบุ
createLi(_list){
this._list = _list ||. นี้._list;
ให้ elem = document.createDocumentFragment();
this._list.foreach ((item, index) => {
ให้ li = document.createelement ("li");
li.textContent = รายการ;
Object.assign (li.style, {
ความสูงบรรทัด:"26px",
Padding: "0 15px"
-
Elem.AppendChild (LI);
-
องค์ประกอบส่งคืน;
-
setState (ประเภท) {
สวิตช์ (ประเภท) {
กรณี dropdownmemu.dropdown:
this.elem.style.backgroundColor = "#e6e6e6";
this.ul.style.display = "block";
หยุดพัก;
กรณี DropDownMemu.DEFAULT:
this.elem.style.พื้นหลังสี = "#fff";
this.ul.style.display = "ไม่มี";
หยุดพัก;
-
-
ผนวกถึง (พาเรนต์) {
super.appendTo(พาเรนต์);
dropdownmemu.obj [this.label] = this;
-
render () {
this.elem.setAttribute("tabIndex",1);
this.spanLabel = document.createElement ("Span");
this.spanCaret = document.createElement("ช่วง");
this.ul = document.createElement("ul");
this.elem.appendChild(this.ul);
this.spanLabel.textContent = this._name;
this.elem.appendChild(this.spanLabel);
this.elem.appendChild(this.spanCaret);
-
setStyle () {
Object.assign (this.elem.style, {
ลอย: "ซ้าย"
ความสูงขั้นต่ำ: "20px",
minWidht: "80px",
สี: #333",
Fontweight: "ปกติ"
Textalign: "Center",
whitespace: "NowRap",
แนวตั้งAlign: "กลาง",
เคอร์เซอร์: "ตัวชี้"
ชายแดน: "1px Solid #CCC",
รัศมีเส้นขอบ: "4px",
BackgroundColor: "#FFF"
Padding: "6px 12px"
Fontsize: "14px",
userselect: "ไม่มี",
marginright: "100px",
ตำแหน่ง: "ญาติ",
-
Object.assign(this.spanLabel.style, {
ลอย: "ซ้าย",
Padding: "0 5px"
-
Object.assign (this.spancaret.style, {
แสดง: "Inline-Block",
แนวตั้ง: "กลาง",
Bordertop: "4px Dashed"
Borderright: "4px Solid Transparent",
Borderleft: "4px Solid Transparent"
-
Object.assign (this.ul.style, {
ListSyle: "None",
ตำแหน่ง: "สัมบูรณ์",
ด้านบน: "100%",
ซ้าย: "0",
zIndex: "1000",
ความกว้างขั้นต่ำ: "100px",
Padding: "5px 0px"
มาร์จิ้น: "2px 0 0"
ขนาดตัวอักษร: "14px",
textAlign: "ซ้าย",
สีพื้นหลัง: "fff",
เส้นขอบ: "1px ทึบ rgba (0, 0, 0, 0.15)",
รัศมีเส้นขอบ: "4px",
boxShadow: "0 6px 12px rgba (0, 0, 0, 0.175)",
แสดง: "ไม่มี",
-
-
} คลาสเริ่มต้นการส่งออกคอมโพเนนต์ขยาย EventTarget{
Elem;
ตัวสร้าง (_type) {
ซุปเปอร์();
this.elem = this.createElem(_type);
-
createElem(_type){
ให้ elem = document.createElement(_type);
องค์ประกอบส่งคืน;
-
ผนวกถึง (พาเรนต์) {
ถ้า (typeof parent==="string") parent = document.querySelector (พาเรนต์);
parent.appendchild (this.elem);
-
} ให้ http = need("http");
let querystring = require("querystring");
ให้ข้อมูล
req,
res;
// อ่านข้อมูลเมืองทั้งหมดและแยกวิเคราะห์เป็นวัตถุ และอ่านพร้อมกัน
ให้ fs = ต้องการ ("fs");
ให้ allCityInfo = JSON.parse(fs.readFileSync('./city.json'));
ให้เซิร์ฟเวอร์ = http.createServer (ListenerHandler);
server.listen(4010,"10.9.72.245",listenerDoneHandler);
ฟังก์ชั่น ListenerHandler(_req,_res){
req = _req;
res = _res;
res.writehead (200, {
"content-type":text/html;charset=utf-8",
"การควบคุมการเข้าถึง-อนุญาต-แหล่งกำเนิด":*",
"Access-Control-allow-headers": "*"
-
data = "";
req.on ("data", function (_data) {
data = _data;
-
req.on ("end", teedhandler);
-
ฟังก์ชั่น teedHandler () {
// console.log (allcityInfo);
// แยกวิเคราะห์ประเภทอินเตอร์เฟสตาม URL ของส่วนหัวคำขอให้พิมพ์ = req.url.trim (). แยก ("?") [0]. แทนที่ (/ // g, "");
console.log(ชนิด);
// แยกวิเคราะห์พารามิเตอร์ขาเข้าตาม URL ของส่วนหัวคำขอ if(req.method.toUpperCase()==="GET"){
if(req.url.includes("favicon.ico")) ส่งคืน res.end();
ข้อมูลอื่น = req.url.include("?") ? req.url.split("?")[1] : "";
-
พยายาม{
data = json.parse (ข้อมูล);
}จับ{
ข้อมูล = querystring.parse (ข้อมูล);
-
console.log(ข้อมูล);
//ค้นหาข้อมูลตามประเภทอินเทอร์เฟซ
ให้ list = {};
สวิตช์ (ประเภท) {
กรณี "getProvince":
list.province = Object.keys (allCityInfo);
หยุดพัก;
กรณี "getCity" :
list.city = object.keys (allcityInfo [data.province]);
หยุดพัก;
กรณี "GetCounty":
list.county = allCityInfo[data.province][data.city];
หยุดพัก;
-
console.log (รายการ);
res.write(JSON.stringify(รายการ));
Res.end ()
-
ฟังก์ชัน ListenerDoneHandler () {
console.log("开启服务成功");
} {
"ปักกิ่ง": {
"ปักกิ่ง": ["Dongcheng District", "เขต Xicheng", "Chongwen District", "เขต Xuanwu", "Chaoyang District", "Fengtai District", "Shijingshan District", "Haidian District", "Mentougou District" "Fangshan District", "District Tongzhou", "Shunyi District", "Changping District", "Daxing District", "Pinggu District", "Huairou District", "Miyun County", "Yanqing County", "อื่น ๆ
" ,
"Tianjin": {
"Tianjin": ["เขต Heping", "Hedong District", "เขต Hexi", "Nankai District", "Hebei District", "Hongjiao District", "Binhai New District", "เขต Dongli", "เขต Xiqing" District "," Jinnan District "," Beichen District "," Ninghe District "," Wuqing District "," Jinghai County "," เขต Baodi "," Jixian "," Tanggu District "," Hangu District "," Dagang District " "," เขต Baodi "," อื่น ๆ "]
},
}
ข้างต้นเป็นคำอธิบายโดยละเอียดของเมนูเชื่อมโยงสามระดับโดยใช้ JS (พร้อมคำอธิบายความคิด) สำหรับข้อมูลเพิ่มเติมโปรดให้ความสนใจกับบทความอื่น ๆ ที่เกี่ยวข้องใน PHP เว็บไซต์จีน!
