Multi-level menu home with XSL and XML | Edit this article | Remove this article | show all articles | display all modified author of the article: Turbo Chen (turbochen@163.com) Copyright XML is the Extensible Markup Language (Earth It is known that its documentation has good readability. We usually save some system configuration data in the project, but also to do some data exchange. The XSL itself is also XML, which is an extensible style sheet language. It defines a set of standard label languages for XML data representation and data. We can use XSL to control XML data to be displayed as specific formats or converted to specific media. Next, a simple example is written to see the relationship between XML and XSL (this example is from the XML document of Microsoft). We have an XML document,:
xml (Hello.xml) An Xslt Programmer
Hello, World!
This XML document line 2 is the style sheet file that specifies the processing document. The following is document data. The following is the XSL file:
xsl (Hello.xsl)
</ title></p>
<p></ HEAD></p>
<p><Body></p>
<p><H1> <xsl: value-of select = "greeting" /> </ h1></p>
<p><XSL: Apply-Templates Select = "GREETER" /></p>
<p></ Body></p>
<p></ Html></p>
<p></ xsl: template></p>
<p><XSL: Template Match = "Greter"></p>
<p><Div> from</p>
<p><I> <XSL: Value-of Select = "." /> </ I></p>
<p></ Div></p>
<p></ xsl: template></p>
<p></ xsl: stylesheet> </ pre> We first exist in the same directory. Because the style sheet file is specified in the XML document, when we open an XML file from the IE, IE automatically calls the corresponding XSL file to process XML data. From the XSL document we see a lot of familiar words, right, they are HTML tags. We show XML data in HTML through this XSL file. At this time we will see Hello, World! From an Xslt Program XSL language is powerful and wonderful from IE. From the above example, we can initially understand that a label similar to "XSL: XXXXX" like "XSL: XXXXX" is used in an XSL document. These tags are part of the XSL language. An XSL document consists of at least one template, and the XSL parsing engine will be responsible for converting XML data to the template definition of XSL. As the above example, there are two templates: <XSL: Template Match = "/ hello-world"> <xsl: template match = "GREETER"> template can be used to handle specific XML data, specify by match attribute . The Match property is an expression of XPath (XPath is not discussed in this article), which can match the related XML node to the template. We see that most of the content is HTML content, only a small number of <XSL: XXXX> such a label, non-<XSL: XXXX> tag content, when the XSL engine is parsed, will be reserved in the original text. When you encounter <XSL: XXXX> tags to do. In the example above, there is a <xsl: value-of select = "greeting" /> tag, which is entered into the current location of the GRETING node specified by the SELECT property. Through XML Document We see the Greeting node value is "Hello, World!", Which is exported when it is in the <h1> tag of HTML, so it is of course displayed in large black body. Common XSL tags have a lot of commonly used: XSL: value-of-of (select node and output) XSL: Apply-Templates (Template to match the matching node) XSL: Template XSL: IF Conditional judgment) XSL: Choose (Multi-Conditional Branch) XSL: For-Each (loop) Use these XSL tags, we can achieve a certain 'data structure algorithm' to complete a part of work, so we said that XSL is a program Language, about XSL more detailed learning, you can watch Microsoft's XML SDK documentation, which is very detailed for XML, XSL or even XPath (thanks to Microsoft to provide such a good document). Here, look at the topic, how to implement a multi-level tree menu with XML / XSL.</p>
<p>Let me look at the XML document type definition of the tree menu: <? XML Version = "1.0" encoding = "utf-8"?> <! Element tree (menu )> <! Element menu *)> <! Attlist Menu Text Cdata #Required> <! attlist menu icon cdata #implied> <! attlist menu url cdata #implied> <! attlist menu target cdata #implied> <! attlist menu folded cdata #implied> can be seen by this definition, we The menu XML structure consists of a Tree root node. The TREE node can contain multiple MENU nodes. Each MENU node can also contain multiple MENU nodes. This reaches the requirements of multi-stage tree structure. Let's see this XML structure example: <pre> <Tree> <menu text = "first-level menu" icon = "xxx.gif" folded = "false"></p>
<p><menu text = "secondary menu 1" icon = "yyy1.gif" URL = "www.yyy1.com" target = "_ blank" /></p>
<p><menu text = "secondary menu 2" icon = "yyy2.gif" url = "www.yyy2.com" target = "_ blank" /></p>
<p></ menu></p>
<p></ tree></p>
<p>The </ pre> MENU node has 5 properties, namely: text, used as a menu display text icon, the icon URL of the menu, click the address of the menu Target, display the target framework Folded of the address, if it is the menu If this property determines if the menu is folded. Among them, the text attribute is necessary, and others are subject to the need. Based on our DTD, we can make any complicated, nested from any layer, and the program implementation looks a bit complicated. Fortunately, we can use XSL to make a template, let the template automatically recursively call, display any number of menus. Our template is this: <pre> <xsl: template match = "menu"></p>
<p><tr bgcolor = "# ffffff"></p>
<p><TD Style = "Padding-Left: 15px"></p>
<p><div style = "cursor: default"></p>
<p><xsl: attribute name = "onclick"> toGGLE (<xsl: value-of select = "generate-id</p>
<p>(@Text) "/>, flagimg <xsl: value-of select =" generate-id (@text) "/>) </ xsl: attribute> <xsl: if test =" count (./*)> 0 "></p>
<p><xsl: choose></p>
<p><XSL: WHEN TEST = "@ folded = 'true'"></p>
<p><IMG SRC = "C.GIF"></p>
<p><XSL: Attribute Name = "ID"> flagimg <xsl: value-of select = "generate-id</p>
<p>(@Text) "/> </ xsl: attribute> </ ig></p>
<p></ xsl: when></p>
<p><XSL: OtherWise></p>
<p><img src = "o.gif"></p>
<p><XSL: Attribute Name = "ID"> flagimg <xsl: value-of select = "generate-id</p>
<p>(@Text) "/> </ xsl: attribute> </ ig></p>
<p></ xsl: OtherWise></p>
<p></ xsl: choose></p>
<p></ xsl: if></p>
<p><xsl: choose></p>
<p><XSL: WHEN TEST = "@ URL"></p>
<p><a></p>
<p><xsl: attribute name = "href"> <xsl: value-of select = "@ URL" /> </ xsl: attribute></p>
<p><XSL: Attribute Name = "Target"> <XSL: Value-of</p>
<p>SELECT = "@ target" /> </ xsl: attribute> <xsl: if test = "@ icon"></p>
<p><img border = "0"></p>
<p><xsl: attribute name = "src"> <xsl: value-of</p>
<p>SELECT = "@ icon" /> </ xsl: attribute> </ ig></p>
<p></ xsl: if></p>
<p><XSL: Value-of SELECT = "@ TEXT" /></p>
<p></a></p>
<p></ xsl: when></p>
<p><XSL: OtherWise></p>
<p><xsl: if test = "@ icon"></p>
<p><img border = "0"></p>
<p><xsl: attribute name = "src"> <xsl: value-of</p>
<p>SELECT = "@ icon" /> </ xsl: attribute> </ ig></p>
<p></ xsl: if></p>
<p><XSL: Value-of SELECT = "@ TEXT" /></p>
<p></ xsl: OtherWise></p>
<p></ xsl: choose></p>
<p></ div></p>
<p><Table> <XSL: Attribute Name = "Style"></p>
<p><xsl: choose></p>
<p><xsl: when test = "@ folded = 'true'> Display: none </ xsl: by></p>
<p><xsl: OtherWise> Display: Block </ xsl: OtherWise></p>
<p></ xsl: choose></p>
<p></ xsl: attribute></p>
<p><xsl: attribute name = "id"> <xsl: value-of select = "generate-id (@text)" /> </ xsl: attribute></p>
<p><XSL: Apply-Templates /></p>
<p></ table></p>
<p></ td></p>
<p></ TR></p>
<p></ xsl: template></p>
<p>> In this template, there is a place to use the <xsl: Apply-Templates /> tab, which automatically finds all the child nodes under the current MENU node and calls the corresponding template. Because of the MENU node or a MENU node, Of course, the template itself is called, which realizes the so-called recursive, solving the problem of unlimited level. Rendering:</p>
<p>Here is a demonstration: attachment / 1 / tree.xml</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-107162.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="107162" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.041</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = 'BBTeahTIVzHVZJivxF4JIQWQYkcAB8a5QwZqV_2FKH9IVKDq0VWGd5R104_2BcSLm3mJS6H4oV2bKP_2FSmzZQ_2FvMc6w_3D_3D';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script>
