Implementing pop-up menus with XML (Figure) XML has become a Chinese language for a new generation of networks, which has gradually reflected in products of major software companies. XML itself is not a computing language, and more represents a format of a data description. Compared with HTML, it has more data-defined features, while compared to the database, it is more flexible and adapted to transmit on the network. The related technologies around XML have emerged, such as XSL, XSLT, etc., their cooperation allows us to truly start to complete some interesting tasks on XML. This article is to implement a dynamic pop-up menu on a web page at an XML beginner's perspective. For readers who are also desirable to understand the characteristics of XML and expression, it should be helpful. Application Situation We often see a variety of menu in some websites, most menus borrowed some of the features of DHTML, but it is not easy to use these existing menus to implement some own menus. The first is that some code "analysis" must be "analyzed" from their entire page, followed by the relationship between the display mode and the display content, if your menu structure and display mode are different from other websites, it will take more information. Kung Fu to study the new display method. And we want to implement a menu structure that can be dynamically adjusted, which should be available for the entire website we have to complete. Once our web page design changes, we can flexibly change the menu display, adapt to the new web page overall style. The menu we want to implement can first appear as follows: Figure 1: An appearance implementation of the pop-up menu we want to implement, after a large number of contact HTML, today's web program design we are more willing to directly put a page The like is "drawn" with the editing tool (such as FrontPage, Dreamweaver et al.), And it is no lonrecoming to design the module that can be universal. In order to achieve our goal, we start again to reconsider how to define a common menu data structure to describe information of a menu, then use a display module to express these data information, if you change some of the parameters of the display module, you can Implement different appearances and behaviors of the same menu content.
After understanding the basic definition method of XML, we define the following demonstration data: List 1: An exemplary menu data structure XML China XML League </ Title> <URL> HTTP : //www.xml.org.cn </ url> </ topic> <topic> <title> Easy Software Company </ Title> <URL> http://www.tangram.com.cn </ url> </ Topic> <Topic> <Title> Microsoft MSDN </ Title> <URL> http://msdn.microsoft.com </ url> </ TOPIC> </ TOPICS> <Topics Type = "XML Application Instance" > <Topic> <title> BizTalk </ Title> <url> http://www.biztalk.org </ url> </ topic> </ Topics> <Topics Type = "XML Features> <Topic> <Title > Rebsill </ Title> <URL> Express.htm </ URL> </ Topic> <Topic> <Title> Self-explanation </ Title> <URL> Description.htm </ URL> </ Topic> <Topic> < Title> Exchange </ Title> <URL> Exchange.htm </ URL> </ Topic> <Topic> <Title> Unlimited </ Title> <URL> Nopresentation.htm </ URL> </ Topic> < Topic> <Title> Refractory </ Title> <URL> Express.htm </ URL> </ Topic> <Topic> <Title> Self-explanation </ Title> <URL> Description.htm </ URL> </ Topic> <Topic> <title> Exchange </ Title> <URL> Exchange.htm </ URL> </ Topic> <Topic> <Title> Unlimited </ Title> <URL> Nopresentation.htm </ URL> < / Topic > </ TOPICS> <Topics Type = "Contact the author"> <Topic> <Title> Isaac M. </ Title> <URL> Mailto: isaac@tangram.com.cn </ url> </ topic> <</p>
<p>/ TOPICS> <Topics Type = "Small Catcher Knife"> <Topic> <Title> Red Bull Knife </ Title> <URL> Red.htm </ URL> </ Topic> <Topic> <Title> White Cow Check </ Title > <URL> White.htm </ URL> </ Topic> <Topic> <Title> Brown Cow Knife </ Title> <URL> Brown.htm </ URL> </ Topic> </ Topics> </ TopicList> In this data, the main items and children of the menu use <Topics> and <Topic> elements, one place. At the same time, you can also see that we have specified the external transformation to DHTML for this data: <? Xml: stylesheet type = "text / xsl" href = "menus.xsl"?> This line information Let IE automatically combine the data structure of the menu with a particular XSL and convert to DHTML. Further, in order to correctly explain the Chinese content in IE, the first portion of this data structure is added to the description of Encoding = "GB2312". Learning definition XSL is a slightly troublesome thing because XSL is like a DHTML description, as if there is a functionality of executable program. If you are more familiar with DHTML, it should be easy to master XSL's essentials, but your own process should be combined with XML, and it is a good way to define one side. In our own menu, we use <div> to parse the items of the menu into elements of DHTML one by one.</p>
<p>Listing 2: An XSL (Menus.xsl) capable data we define can express <? XML Version = "1.0"?> <Xsl: stylesheet xmlns: xsl = "http://www.w3.org/tr / WD-XSL "> <! - menus.xsl -> <xsl: template match =" / "> <html> <head> <title> <xsl: value-of select =" topiclist / @ type "/ > </ Title> <link rel = "stylesheet" type = "text / css" href = "menus.css" /> <script language = "jscript" src = "menus.js"> </ script> </ head > <Body> <h1> <xsl: value-of select = "topiclist / @ type" /> </ h1> <! - build menubar -> <div id = "divmer"> <Table ID = "TBLMenubar "Border =" 0 "> <tr> <xsl: for-each select =" // Topics [Topic]> <TD class = "clsmenubarItem"> <xsl: attribute name = "id"> TDMENUBARITEM <XSL: Value -of select = "@ type" /> <xsl: value-of select = "@ type" /> </ td> <xsl: if test = "context () [NOT () )] "> <Td> | </ td> </ xsl: for-each> </ tr> </ table> </ div> <! - build individual menus -> <xsl : for-each select = "// Topics [Topic]"> <div class = "clsmenu"> <xsl: attribute name = "id"> DivMenu <xsl: value-of select = "@ type" /> </ XSL: Attribute> <div class = "clsmenuspacer"> </ div> <xsl: for-each select = "topic"> <div> <a target = "main"> <xsl: attribute name = "href"> <xsl: value-of select = "url" /> </ xsl: attribute> <</p>
<p>XSL: Value-of select = "title" /> </a> </ div> </ xsl: for-each> </ div> </ xsl: for-each> </ body> </ html> </ XSL: Template> </ xsl: Stylesheet> In the earliest menu.xsl definition, we combine the menu interaction (ie, how to respond to the mouse), and color and font and other style elements are combined with XSL. But we have found that it can be separated and reserved greater flexibility. So we define the Menus.css and Menus.js files, separately define features such as menus main items and children, and how to respond to users, so we have obtained further flexibility. Listing 3: Formatthend (Menus.css) / * menus.css * / body {font-size: 60%; Background-Color: Ffffff; (} h1 {font) Size: 120%; font-style: italic;} Div # DivMenuBar {Background-color: # 6699cc;} Table # TBLMenuBar Td {font-size: 60%; Color: White; Padding: 0px 5px 0px 5px; Cursor: Default Table # TBLMENUBAR TD.CLSMENUBARITEM {font-weight: bold; cursor: hand; font-size: 100%; background-color: # 000000; Position: absolute; visibility; hidden; width: 130px; Padding: 5px 5px 5px 8px; border-top: 1 White Solid;} Div.clsmenu a {text-decoration: none; color: white; font-weight: bold;} Div.clsmenu A: Hover {Color: Blue;} The parser of the menu contains an external JavaScript code file in Menus.xsl so that each module of our dynamic menu can work together.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-1675.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="1675" 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 = 'f2wvGtxV0qusMDtlRWWWb_2FjIEXAQqQiIetCSErucJ2UYOg3oBpYCLv2R92yi0OYFQ7BphyX49cczDh5Q3ibrsg_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>
