XML is an extensible tag language (both the earth who knows), and 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 a 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></p> <p></ pre></p> <p>Let's exist these two files 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 from IE</p> <p>Hello, World!</p> <p>From</p> <p>An xslt programer</p> <p>The XSL language is powerful and wonderful. 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. Just like the above example, there are two templates:</p> <p><XSL: Template Match = "/ Hello-World"> <XSL: Template Match = "Greter"></p> <p>Templates can be used to handle specific XML data, specified by the Match property. 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.</p> <p>Common XSL tags have a lot, usually:</p> <p>XSL: Value-of Off (Select Node and Output)</p> <p>XSL: Apply-Templates (Application Template for matching nodes)</p> <p>XSL: Template (Template Definition)</p> <p>XSL: IF (Condition Judgment)</p> <p>XSL: Choose (Multi-Conditional Branch)</p> <p>XSL: For-Each (loop)</p> <p>With these XSL tags, we can achieve a certain 'data structure algorithm' to complete a part of work, so we said that XSL is a programming language, about XSL more detailed learning, you can watch Microsoft's XML SDK document, it For XML, XSL or even XPath is very detailed (thanks to Microsoft to provide such a good document).</p> <p>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:</p> <p><? XML Version = "1.0" encoding = "UTF-8"?></p> <p><! Element Tree (Menu )></p> <p><! Element Menu (Menu *)></p> <p><! Attlist Menu Text Cdata #Required></p> <p><! Attlist menu icon cdata #implied></p> <p><! Attlist Menu Url Cdata #implied></p> <p><! Attlist Menu Target CData #implied></p> <p><! Attlist menu folded cdata #implied></p> <p>It can be seen from this definition that our 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 the example of this XML structure:</p> <p><pre></p> <p><Tree></p> <p><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" /> </ menu></p> <p></ tree></p> <p></ pre></p> <p>The MENU node has 5 properties, namely:</p> <p>TEXT, display text as a menu</p> <p>Icon, menu icon</p> <p>URL, click on the address after menu</p> <p>Target, display address target framework</p> <p>Folded, if there is a submenu if it is a menu, this property determines if the menu is folded.</p> <p>Among them, the text attribute is necessary, and others are subject to the need.</p> <p>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:</p> <p><pre></p> <p><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></p> <p><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></p> <p></ img></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></p> <p></ img></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-ofselect = "@ target" /> </ xsl: attribute></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></p> <p></ img></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></p> <p></ img></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></p> <p><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>></p> <p></ pre></p> <p>In this template, there is a place to use the <XSL: Apply-Templates /> tab, which will automatically find all the child nodes under the MENU node and call the corresponding template. Since the MENU node is still a Menu node, of course, the template is called. Itself, this has achieved so-called recursive, solving the problem of unlimited level.</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-49731.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="49731" 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.042</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 = 'RG8hh_2B8VBXaPVuh8iOoTXNb8ETQ7FfbwNUJj6aRCzv73UoQQPRQq1_2BXYbuRGM08Zn9JoaHPpFxFbtS_2FNU0FwPg_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>
