📗 🕠 👩‍👩‍👧‍👧 XSLT में स्तरित मेनू 🆓 🗑️ 👨🏿‍🚒

नमस्कार प्रिय खाबरोवचने। मैं एक बहु-स्तरीय मेनू प्रदर्शित करने के लिए एक टेम्पलेट पेश करना चाहता हूं, हालांकि, इसे थोड़ा बदलकर, यह सामान्य पेड़ों को प्रदर्शित करने के लिए काम करेगा। मुझे हमारी पसंदीदा साइट पर ऐसा कुछ दिखाई नहीं दे रहा है, मैंने इसे इंटरनेट पर नहीं देखा है। कुछ के लिए यह बहुत आसान लग सकता है, लेकिन मुझे आशा है कि दूसरों को इसकी आवश्यकता है।

यहां पेड़ों के निर्माण के विषय से पहले ही निपटा जा चुका है। इस उदाहरण में, एक अलग XML फ़ाइल संरचना और अन्य कार्यों के लिए sharpening।

एक्सएमएल फ़ाइल के साथ शुरू करते हैं। संरचना जटिल नहीं है। प्रत्येक तत्व में एक पहचानकर्ता, मूल तत्व का एक पहचानकर्ता, एक लिंक और एक नाम होता है।

menu.xml

<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="menu.xsl"?> <root> <item id="1" idParent="0" link="#" title=" 1"/> <item id="2" idParent="1" link="#" title=" 2"/> <item id="3" idParent="1" link="#" title=" 3"/> <item id="4" idParent="2" link="#" title=" 4"/> <item id="5" idParent="2" link="#" title=" 5"/> <item id="6" idParent="1" link="#" title=" 6"/> <item id="7" idParent="6" link="#" title=" 7"/> <item id="8" idParent="6" link="#" title=" 8"/> <item id="9" idParent="0" link="#" title=" 9"/> </root>

बिना किसी हिचकिचाहट के, हम परिवर्तन टेम्पलेट को कम करते हैं

menu.xsl

 <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <!--   --> <xsl:output method="html" encoding="utf-8" omit-xml-declaration="yes" doctype-system="about:legacy-compat"/> <!--   --> <xsl:template match="/"> <html lang="ru"> <head> <title> </title> </head> <body> <h1> </h1> <ul> <xsl:apply-templates select="/root/item[@idParent=0]"/> </ul> </body> </html> </xsl:template> <!--    --> <xsl:template match="/root/item"> <xsl:variable name="id" select="@id"/> <!--    --> <li> <a href="{@link}"> <xsl:value-of select="@title"/> </a> <!--    --> <xsl:if test="/root/item[@idParent=$id]"> <ul> <xsl:apply-templates select="/root/item[@idParent=$id]"/> </ul> </xsl:if> </li> </xsl:template> </xsl:stylesheet>

परिवर्तन टेम्पलेट में दो भाग होते हैं। पहला मूल HTML टैग प्रदर्शित करता है और विशेष रूप से दिलचस्प नहीं है। किसी को केवल टेम्प्लेट की कॉल पर ध्यान देना होता है, जो शून्य के बराबर मूल अभिभावक के साथ तत्वों की कॉल शुरू करता है।
दूसरा भाग एक मेनू आइटम प्रदर्शित करता है और जांचता है कि क्या वर्तमान पहचानकर्ता के बराबर माता-पिता पहचानकर्ता के साथ तत्व हैं। अगर वहाँ है, यह पुनरावृत्ति उसी टेम्पलेट कहते हैं।

स्वाभाविक रूप से, गैर-मौजूदा माता-पिता को संदर्भित करने वाली वस्तुओं को प्रदर्शित नहीं किया जाएगा।

हम एक फ़ोल्डर में menu.xml और menu.xsl को सहेजते हैं और ब्राउज़र में हम पहले लॉन्च करते हैं। हम इस तस्वीर को देखते हैं।

मेनू आउटपुट

PS त्रुटियों के लिए धन्यवाद Dart मिला।

XSLT में स्तरित मेनू

More articles: