Learn XSL (2)

zhaozj2021-02-08  235

The previous period we talked about the use of CSS (laminated style sheets) to format XML documents, and its effect is not very satisfactory. In fact, CSS is used to format HTML tags, just because it is simply used in the previous example. XML is just a data file in more, how to change it to the files like the HTML format we have seen in our daily? If we compare the XML file than the structured raw material, then XSL is better than "sieve" and "mold", and the sieve is selected from the raw materials you need, and these raw materials form the final product: HTML. This mold is roughly like this: We first design the page of the performance, and then get the data in the XML to fill the contents "digging", and then use the XSL statement from the related data from the XML to populate. One words: this XSL is actually a "shell" of HTML, XML data utilizes this "shell" to generate "traditional" HTML. XML is a tree structure when the XML is expanded. We refer to a custom tag in the tree structure as a node, and there is a father and son between the nodes. Layer enters. In the case of XSL, we have to be from the raw library? ? The relevant data is extracted in XML, and the mode query language provided by XSL is used. The so-called moderative query language is the specific statement of data from the XML through the related mode matching rule expressions, namely what we say "Sieve". Refer to Microsoft's "XSL Developer Guide", we can roughly divide the pattern language into three: select mode , , and test mode XSL: IF> and Matching Matches We now introduce them. First, select the mode selection mode statement to extract the data from the XML, is a simple acquisition of data, these tags have a select property, select the data of a specific node name in XML. 1, such as this in XML: Xiao Yu Chunhua Qiushi We want to read these three author names, is it one by one to read the "Author / Name" method, have multiple such names? If there is a procedural statement to loop how good! I think that XSL provides such a programming language-based statement to read these three author names: ... <./xsl: 201ach> SELECT, As the name refer: Choose, it can select a specific unique tag in XML, or select a certain tag, we call it a set. Syntax: Properties: 1. SELECT query the context according to the XSL style query to determine which type of node set (satisfying SELECT condition) Style description. As a simplified representation, if you want to format the display method of a tag in the document, you can let the SELECT equal to the marked name of this element.

For example, if you want to format the marker XML_mark, you can use it as follows: 2. Order-by Segmentation (;) separated as a list of sorting standards. Adding a plus number ( ) before the list element indicates that the contents of this tag are sorted as ascending order, and the reduction ration (-) represents the reverse sequence. As a simplified representation, the sort standard list is the sequence of the marker specified by SELECT, and each tag is separated between (;). 2, mode is just selecting the node, and does not remove the value of the node. It is like the monkey just climbed to a branch of the tree, then use Let's pick "Victory Fruit"! Syntax: Value attributes for extracting nodes: select uses the XSL model that matches the current context.

Simply put, if you want to insert an XML tag somewhere in the XSL document (assuming is the XML_Mark tag), you can use it as follows: Or example: As an example of a personal resume in the previous period, we need to make certain modifications to the file (personal resume .xml), exactly the first Two lines Modified to Then establish a new File: Resume.xsl, its contents are as follows: < HEAD> Personal resume </ title> </ head> <body> <xsl: for-each select = "resume"> <p /> <table border = "1" cellspacing = "0"> <capension style = "Font-size: 150%; font-weight: bold"> Personal resume </ caption> <Tr> <TH> Name </ th> <TD> <XSL: value-of select = "name" /> < / TD> <TH> Gender </ TH> <TD> <xsl: value-of select = "sex" /> </ td> <TH> birthday </ th> <td> <xsl: value-of select = "BIRTHDAY" /> </ td> </ tr> <tr> <TH> Skill </ th> <TD colspan = "5"> <xsl: value-of select = "skill" /> </ td> < / TR> </ table> </ xsl: for-energy> </ body> </ html> Complete these will let us look at the achievements of hard work, how? Good effect. More cool is still behind.</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-1672.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="1672" 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.040</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 = 'QuTCxK6m5KJpu1fcyG7VGM1KYbNsAwFhXCM8vsez7KMJM41Vju8pMScNRnu23ZBrbZscwf1Ql0mImoYo9txKMg_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>