ในบทความก่อนหน้านี้เราใช้ EasyUI เพื่อสร้างกรอบสำหรับหน้าแบ็กเอนด์ คลิกที่นี่เพื่อดู ในส่วนนี้เราใช้เทคโนโลยี EasyUI เป็นหลักเพื่อใช้เมนูแบ็กเอนด์ ก่อนอื่นเราจะสร้างฟังก์ชั่นง่าย ๆ และต่อไปเพื่อเพิ่มคุณค่าให้กับพวกเขาในภายหลัง
1. ใช้เมนูด้านซ้าย
ก่อนอื่นดูการเรนเดอร์:
เราสามารถคลิก "การดำเนินการพื้นฐาน" และ "การดำเนินการอื่น ๆ " เพื่อสลับตัวเลือกเมนู ในตัวเลือกเฉพาะคลิกที่การเชื่อมต่อที่แตกต่างกันและจะแสดงทางด้านขวา มาทำเมนูทางด้านซ้ายก่อน
มีสองเนื้อหาหลักของเมนูทางด้านซ้าย: "การจัดการหมวดหมู่" และ "การจัดการผลิตภัณฑ์" เรารู้ว่าในส่วนก่อนหน้าเฟรมเวิร์กของหน้าพื้นหลังควรสร้างใน aindex.jsp ดังนั้นตอนนี้เราเพียงแค่ต้องสร้างไฮเปอร์ลิงก์ทั้งสองนี้และนำพวกเขาลงใน div ที่เกี่ยวข้องใน aindex.jsp ดังนั้นก่อนอื่นเราจะสร้างไฟล์ Temp.jsp ใหม่ในโฟลเดอร์ WebRoot เป็นไฟล์พัฒนาชั่วคราวเพราะคุณสามารถวัดได้โดยตรงโดยการเขียน JSP ที่นี่ หลังจากเอฟเฟกต์พร้อมใช้งานให้คัดลอกเนื้อหาไปยังตำแหน่งที่สอดคล้องกันใน aindex.jsp
หน้า temp.jsp มีดังนี้:
<%@ page language = "java" import = "java.util.*" pageencoding = "utf-8"%> <! doctype html public "-// w3c // dtd html 4.01 transitional // en"> <html> <head> {width: 200px; /*เส้นขอบ: 1px Solid Red;*/} #Menu ul {list-style: none; Padding: 0px; มาร์จิ้น: 0px; } #menu ul li {border-bottom: 1px solid #fff; } #menu ul li a { /*แปลงแท็ก A เป็นองค์ประกอบระดับบล็อกก่อนเพื่อตั้งค่าความกว้างและระยะห่างด้านใน* / จอแสดงผล: บล็อก; พื้นหลังสี: #00a6ac; สี: #FFF; ช่องว่าง: 5px; การตกแต่งข้อความ: ไม่มี; } #menu ul li a: hover {พื้นหลังสี: #008792; } </style> </head> <body> <div id = "เมนู"> <ul> <li> <a href = "#"> การจัดการหมวดหมู่ </a> <li> <a href = "#"> การจัดการผลิตภัณฑ์ </a> </ul> </div> </body> </html>มีเพียงสองลิงก์ใน temp.jsp ห่อหุ้มด้วย li และวางไว้ใน div CSS ข้างต้นกำหนดรูปแบบสำหรับลิงก์ทั้งสองนี้จากนั้นเราเปิดใช้งาน Tomcat และทดสอบเอฟเฟกต์ดังนี้:
หลังจากทำการเชื่อมโยงหลายมิติทั้งสองนี้เราจะคัดลอก UL ของการเชื่อมโยงหลายมิติที่ห่อหุ้มไว้ในตำแหน่งการแสดงผลของเนื้อหาเมนูทางด้านซ้ายใน aindex.jsp และแก้ไขสั้น ๆ ดังนี้:
ส่วน CSS สามารถนำไปที่แท็กหัวของ aindex.jsp โดยตรง ดูที่แท็ก A ด้านบนซึ่งมีแอตทริบิวต์ชื่อไม่ใช่ HREF เพราะเราไม่ได้กระโดดไปยังหน้าใหม่เพราะ EasyUI เป็นเพียงหน้านี้เราต้องการวางจอแสดงผลที่คลิกบนแท็บทางด้านขวา ต่อไปเราต้องการคลิกการจัดการหมวดหมู่เพื่อปรากฏฟังก์ชั่นของหมวดหมู่เฉพาะในแท็บทางด้านขวา
2. ใช้แท็บแท็บทางด้านขวา
ในการรับรู้ฟังก์ชั่นของการคลิกที่แถบเมนูด้านซ้ายเพื่อปรากฏขึ้นแท็บที่ถูกต้องคุณต้องเพิ่มรหัส JS แนวคิดของการใช้ EasyUI คือ: คลิกแรกที่ไฮเปอร์ลิงก์และรับชื่อไฮเปอร์ลิงก์เนื่องจากชื่อของแท็บป๊อปอัพควรจะเหมือนกับชื่อของไฮเปอร์ลิงก์เช่น "การจัดการหมวดหมู่"; จากนั้นตรวจสอบว่าแท็บการเปลี่ยนชื่อมีอยู่แล้วหรือไม่แสดงถ้ามีอยู่ให้สร้างหากไม่มีอยู่และแสดงเนื้อหาที่จะแสดง มาดูรหัสในส่วน JS:
<script type = "text/javascript"> $ (function () {$ ("A [title]") คลิก (ฟังก์ชั่น () {var text = $ (this) .text (); var href = $ (นี่) .attr ("title"); $ ("#tt") แท็บ ("เลือก", ข้อความ); ที่อยู่ URL แต่เป็นเพียงส่วนหนึ่งของร่างกาย // href: 'send_category_query.action'}); </script> มาวิเคราะห์รหัส JS นี้กันเถอะ ก่อนอื่นรับแท็ก โปรดทราบว่าแท็กนี้เป็นแท็กที่มีแอตทริบิวต์ชื่อเรื่องซึ่งเป็นไฮเปอร์ลิงก์“ การจัดการหมวดหมู่” ด้านบนแล้วคลิกและมีฟังก์ชั่นอื่นในการคลิก ฟังก์ชั่นนี้ทำอะไร? ก่อนอื่นรับชื่อของลิงค์ปัจจุบันนั่นคือข้อความแล้วรับ URL ผ่านแอตทริบิวต์ชื่อเรื่อง (เพราะเราเพิ่งเขียน URL ไปยังแอตทริบิวต์ชื่อเรื่อง) ถัดไปตรวจสอบว่ามีตัวเลือก (แท็บ) สำหรับชื่อนี้หรือไม่ หากมีตัวเลือกสำหรับชื่อนั้นจะปรากฏขึ้นและหากไม่มีให้สร้าง
มาดูคำแถลงใน IF ก่อนอื่นให้ใช้ "#TT" เพื่อรับวัตถุ jQuery ทางด้านขวาจากนั้นเรียกใช้วิธีการก่อสร้างแท็บเพื่อรับวัตถุแท็บ หากมีมันจะกลับมาเป็นจริงมิฉะนั้นจะส่งคืนเท็จ ดังนั้นพารามิเตอร์สองตัวในแท็บ () หมายถึงอะไร? ก่อนอื่นพารามิเตอร์แรกคือชื่อวิธีและพารามิเตอร์ที่สองคือพารามิเตอร์ที่สอดคล้องกันของพารามิเตอร์แรก (เมธอด) แท็บ ("มีอยู่" ข้อความ) หมายถึงการเรียกใช้วิธีการดำรงอยู่ของ EasyUI พารามิเตอร์คือข้อความนั่นคือการพิจารณาว่าแท็บที่มีข้อความชื่อมีอยู่หรือไม่ ในทำนองเดียวกันแท็บต่อไปนี้ ("เลือก" ข้อความ) หมายถึงการเลือกแท็บด้วยชื่อข้อความที่จะแสดงแท็บ ("เพิ่ม", {}) หมายถึงการสร้างแท็บใหม่และคุณสมบัติบางอย่างของแท็บที่เพิ่มเข้ามาใหม่จะถูกเพิ่มใน {}: ชื่อหมายถึงชื่อปิด: ในภายหลังเนื้อหาของหน้าถูกบรรจุด้วยแท็ก <ferame> หน้านี้ไม่สามารถเข้าถึงได้โดยตรงและถูกเปลี่ยนเส้นทางผ่านการดำเนินการ จะเห็นได้จากชื่อของการกระทำที่มีการแนะนำไปยังหน้า web-inf/category/query.jsp หากเราเขียนบางสิ่งบางอย่างอย่างไม่เป็นทางการในแท็กตัวถังบนหน้าแล้วคลิกที่แถบเมนูทางด้านซ้ายเนื้อหาจะปรากฏในแท็บด้านขวา ดังนี้:
ในที่สุดใส่รหัสใน aindex.jsp ที่นี่:
<%@ page language = "java" import = "java.util.*" pageencoding = "utf-8"%> <! doctype html public "-// w3c // dtd html 4.01 transitional // en"> <html> <head> {width: 60px; /*เส้นขอบ: 1px Solid Red;*/} #Menu ul {list-style: none; Padding: 0px; มาร์จิ้น: 0px; } #menu ul li {border-bottom: 1px solid #fff; } #menu ul li a { /*แปลงแท็ก A เป็นองค์ประกอบระดับบล็อกก่อนเพื่อตั้งค่าความกว้างและระยะห่างด้านใน* / จอแสดงผล: บล็อก; พื้นหลังสี: #00a6ac; สี: #FFF; ช่องว่าง: 5px; การตกแต่งข้อความ: ไม่มี; } #menu ul li a: hover {พื้นหลังสี: #008792; } </style> <script type = "text/javascript"> $ (function () {$ ("A [title]") คลิก (ฟังก์ชั่น () {var text = $ (นี่) .text (); var href = $ (this) .attr ("titt"); $ ("#tt") แท็บ ("เลือก", ข้อความ); ที่อยู่ แต่เป็นเพียงส่วนหนึ่งของร่างกาย //href:'send_category_query.action '}); - </script> </head> <body> <div data-options = "ภูมิภาค: 'North', ชื่อ: 'ยินดีต้อนรับสู่การจัดการแบ็กเอนด์ yigou', แยก: true" style = "ความสูง: 100px;"> </div> <div data-options = "ภูมิภาค: data-options = "iconcls: 'icon-save'"> <ul> <li> <a href = "#"> การจัดการหมวดหมู่ </a> <li> <a href = "#"> การจัดการผลิตภัณฑ์ </a> </ul> </div> <li> <a href = "#"> การจัดการผลิตภัณฑ์ </a> </ul> </div> </div> </div> <div data-options = "ภูมิภาค: 'center' ชื่อ: 'หน้าปฏิบัติการแบ็กเอนด์'" style = "padding: 1px; พื้นหลัง: #eee;"> <div id = "tt" แสดงในอนาคต (ประเภทของระบบปฏิบัติการปัจจุบันชื่อโดเมนของโครงการปัจจุบันการกำหนดค่าที่เกี่ยวข้องกับฮาร์ดแวร์หรือรายงานการแสดงผล </div> </div> </div> </body> </html> เห็นได้ชัดว่ารหัสไม่ได้ถูกสกัดและ CSS และ JS ถูกผสมในหน้า JSP เดียวกัน ไม่สำคัญว่ามันจะถูกสกัดเข้าด้วยกันในภายหลัง
จนถึงตอนนี้เราได้เสร็จสิ้นการใช้งานเมนู EasyUI แล้ว ที่นี่เราได้เสร็จสิ้นวิธีการใช้งานเท่านั้นและเนื้อหาที่แสดงเฉพาะจะได้รับการปรับปรุงตามความต้องการเฉพาะ
ซอร์สโค้ดดาวน์โหลดที่อยู่ของโครงการทั้งหมด: //www.vevb.com/article/86099.htm
ที่อยู่ดั้งเดิม: http://blog.csdn.net/eson_15/article/details/51297705
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น