Generally, the XML file we have seen is based on the elements. With the continuous deepening of the level, it gradually became a tree. The advantage of this document is that we look at the son, father, ancestors, brothers. Relationship, inconvenience, I personally think that if the level is very deep, there is a lot of brothers nodes, then the document may be large and affecting the efficiency of processing. Due to the flexibility of describing the data structure, an attribute value is used in some environments to describe the relationship between elements. For example, the TOC (Table of Content) on the left side of the garden, implements its XML file through the attribute value to explain the type of elements (Node or Leaf), but there is still a sub-node, so it is used to transform its XSL file is very complicated. Divided several situations. Of course, today we are not talking about the implementation of the garden TOC but to achieve similar TOCs in a faster, harder approach, and of course it can also be called "tree folding navigation bar". Ok, talk less nonsense, enter the topic. Let's take a very simple DTD. Navigator.dtd
file is very simple, it can be understood, top-level elements Navigation Contains multiple Navigator elements defined, Navigator does not contain elements but have a series of properties. Maybe you have discovered that there are two of the attributes called Ancestorid Childs, yes, these two attributes are the key, of course, there is a Layer, under their common action, the relationship between Navigator elements will be explicitly described. Ok, let's look at the Navi.xml file, as an example of garden TOC.
View garden TOC example: navi.xml
'1' title = 'Personal Toolbox' CHilds = '2' URL = '#' Image = 'Default' /> combined with the TOC on the left of the garden, it is easy to find out the relationship between the elements, how to find this XML. Document. Ok, there is data, the next step is how Manupilate is. I quote the TOC of the garden. First, I can have a preliminary impression. After the article is completed, add a few pictures C & P to a few pictures, and open Navi.xml on the IE5 or more machines. It will appear similar to the garden. I hope that everyone will analyze my XML file according to its hierarchy, because in the top, my hierarchical arrangement and garden are the same. Let me explain: Layer identifies the same level, the elements are the brothers. In the XSL file, the tree is implemented according to the Padding-LEFT property of the Layer, and the value is folded according to the value of the Layer.
The principle is this, good, let's take a look at this key navigator.xsl:
xslt tree navigation bar </ title> < Link rel = "stylesheet" type = "text / css" href = "navigator.css" /> <script src = "Toggle.js> </ script> </ head> <body> <div xmlns: xsl =" http://www.w3.org/tr/wd-xsl "> <Table> <Tr> <TD> <Div Nowrap =" True "style =" padding-left: 0em; "> Having Garden Category < / Div> </ td> </ tr> <xsl: for-each select = "navigation / navigator"> <tr> <xsl: attribute name = "title"> <xsl: value-of select = "@ title" /> </ xsl: attribute name = "class"> navigator <xsl: if test = "@ Layer [.> 0]"> - hidden </ xsl: if> </ xsl: attribute> < XSL: attribute name = "id"> <xsl: value-of select = "@ ID" /> <xsl: attribute> <xsl: attribute name = "anncestorid"> <xsl: value-of select = @ AncestorID "/> <xsl: attribute name =" depth "> <xsl: value-of select =" @ layer "/> </ xsl: attribute> <xsl: if test =" @ childs. > 0]> <xsl: attribute name = "expanded"> no </ xsl: attribute> </ xsl: if> <td style = "cursor: hand"> <div nowrap = "true"> <xsl: attribute Name = "style"> Padding-left: <xsl: value-of SELECT = "@ layer" /> em; </ xsl: attribute> <xsl: choose> <xsl: when test = "@ Childs [.> 0]"> <</p>
<p>Img src = "images / bs.gif"> </ img> </ xsl: by> <xsl: Otherwise> <img> <xsl: attribute name = "src"> <xsl: value-of select = "@ Image "/> </ xsl: attribute> </ img> </ xsl: otherwise> </ xsl: choise> <a> <xsl: if test =" @ childs [.> 0]> <xsl: attribute name = "onclick"> Toggle ('<xsl: value-of select = "@ id" />) </ xsl: attribute> </ xsl: if> <xsl: attribute name = "href> <xsl: value- OF SELECT = "@ URL" /> </ xsl: attribute> <xsl: value-of select = "@ title" /> </a> </ div> </ td> </ tr> </ xsl: for -Each> </ table> </ div> </ body> </ html> Of course, there is less navigator.css. Navigator.css body {font-family: Verdana; Cursor: default; font-size: 9pt;} table {font-size: 110%;} a {color: "# 003366"; Text-Decoration: none;} A: Hover {text-decoration: underline; color: # 003366;} div img {margin-bottom: 0px; margin-right: 5px; margin-top: -3px; vertical-align: middle} Div A: Hover {Background-Color : greenyellow} div A {font-weight: Normal; margin-right: 5px; vertical-align: middle} .navigator {color: # 003366;} .navigator-hidden {display: none;} Now run Navi.xml, You will see all Layer = 0 Navigator (because those Layer> 0 is hidden by class = "navigator-hidden", of course, unfolding and folding now, lacking this function.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-93097.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="93097" 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 = 'ZBofQg6J4E0idyVgynv1_2BhVWvx51lsWRoU4e77yELcpHtDI_2FRAyo67ATtn8so6qM7H9TtsJMwB4wUGJ0L7x2UQ_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>
