XSLT is easy to get started with the second chapter: an example of XSLT

xiaoxiao2021-03-14  191

2. Example of XSLT 2.1 How to convert XML 2.2 An instance 2.3 Process analysis 2.4 XSLT Use 2.1 How to convert XML to our play, you play the rubberine, you can make it with different molds. The shape is needed. If we assume that the XML data document is a big plasticine, XSLT is like a mold, and it is necessary to make a needed shape. Specifically look at the following procedure: We use XML original documentation, use XSL as a template, through the conversion engine, the final output required HTML document. The conversion engine is the process of "force one according to force" in the metaphor. In specific applications, there are special software to implement this conversion process, named XML Processor. There is already a lot of Processor software (hereinafter referred to in detail below), and XML Processor has been embedded in IE5.5. 2.2 An instance Now let's take a simple XSLT actual application example to get some sense of understanding. Many web designers see the code similar to HTML will be relieved, the code is kind and familiar. Example 1: "Hello, World!" Hello World as the first tutorial is already a practice in the program language. We also follow this practice to see how to use XSLT to display "Hello World". Although this example doesn't have any practical use, please don't worry, there is more detailed example. Step 1: Create to enter the XML document Hello.xml. Hello, World! This is a very simple XML document that contains only a node XML tree. Step 2: Establish a XSLT document Hello.xsl. Tip: The default XSLT file has the name of .xsl. first xslt example </ title> </ head> <body> <p> <xsl: value-of select = "greeting" /> </ p> </ Body> </ html> </ xsl: template> </ xsl: styleSheet> You can now open this hello.xsl file with IE5.0 or above, see the XSL tree. Step 3: Call this XSL file in XML.</p> <p>Modify Hello.xml code is: <? XML Version = "1.0" encoding = "ISO-8859-1"> <? Xml-stylesheet type = "text / xsl" href = "hello.xsl"?> <Greeting > Hello, World! </ Greeting> OK, all code has been completed in principle, followed by using an XSLT processor (XML processor) to perform Hello.xml, you can see "Hello World" The result is displayed. The popular processor software has the following: (1) .james Clark XT. Download Website: http://www.jclark.com/xml/xt.html (2) XML for Java package named LotusxSL. Download Website: www.alphaworks.ibm.com/tech/xml4j (3) .saxon. Download URL: http://www.wrox.com (4). Microsoft's MSXML3. Download URL: http://www.microsoft.com/xml Some netizens should ask, I want to see what the "Hello World" is doing in the browser? In Microsoft's IE5.5 embeds the MSXML3 interpreter, you can use IE5.5 to open the Hello.xml file, you can see the result. If you only see the XML tree, not a separate "Hello World" word, indicating that your browser does not have MSXML3 version. What should I do if I don't want to see it? Then use the old approach in our XML tutorial, use JS implementation. (This has exceeded the scope of this article, but in order to be more intuitive, we provide example code here.) The following is an implementation code that can be saved as hello.htm, Hello.xml, Hello .xsl is placed in the same directory. Finally, you can see the effect with IE5.0 or later.</p> <p><html> <head> <script language = "javascript" for = "window" Event = "online"> var xmldoc = new activXObject ("Microsoft.xmLDom"); xmldoc.async = "false"; xmlDoc.Load (" Hello.xml "); nodes = xmldoc.documentelement.childNodes; greeting.innertext = nodes.Item (0) .text; </ script> <title> first xslt example </ title> </ head> <body bgcolor =" #Fffffff> <span id = "greeting"> </ span> <br> </ body> </ html> 2.3 Process resolution If you succeed, you may want to know the specific meaning of these code, let's come Detailed explanation: See hello.xsl file <? XML Version = "1.0" encoding = "ISO-8859-1"> This is the first line code of the standard XML document, because the XSLT itself is also an XML document. Encoding properties are used to define the form of coding usage, ISO-8859-1 mainly supports Western Europe and North American language coding. If you want to use Simplified Chinese, you should write: <? XML Version = "1.0" Encoding = "GB2312"?> The next code is: <XSL: Stylesheet XMLns: XSL = "http: //www.w3. ORG / 1999 / XSL / Transform "Version =" 1.0 "> This is the standard XSLT file first line code. XSL: Stylesheet code means processing documents as a style sheet (STYLESHEET). XMLns: XSL attribute is a namespace declaration, as in XML, using methods in XML, to prevent element name repetition and confusion. Where the prefix XSL means that the elements used in the document abide by the W3C's XSLT specification. The last Version property Description Style Table is only the standard function of XSLT 1.0, which is also currently only standard. <XSL: Template Match = "/"> A <XSL: Template> element defines a template rule. Property Match = "/" Description XML source document, the starting point for this template rule. "/" Is an XPath syntax, which will be described in detail later, "/" "/" represents the root of the XML tree (root). The next code is: <html> <head> <title> first xslt example </ title> </ head> <body> <p> <xsl: value-of select = "greeting" /> </ p> < / body> </ html> Description: When the template rule is triggered, the content of the template will control the result of the output. In the example, most of the template is composed of HTML elements and text.</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-129389.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="129389" 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 = '5RKkhhzYn81qwX6OU3dDWa9INISthnSFzT6jjBM4TXOYM12Dilk3xniSKV0G_2FpPgPn2M8jok_2FHsL_2FZdI'; 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>