http://blog.9cbs.net/airhand/archive/2004/08/26/85447.aspx
Easy Start XSLT first chapter: XSLT concepts of: Introduction Acha
Hello everyone, from today we will learn another language XSLT, XSLT similar to the CSS in HTML, but more powerful than CSS functions. The premise of learning XSLT is that you have some understanding of XML, if you have not learned XML, you can click here (http://www.technic.com.cn/columns/xml_1.shtml) to see a previous article Article "XML Easy Start Handbook". XSLT can be said to be a program language, but it is not a common program language, even more simple than JS, so you don't have to worry about learning difficulties. Ajie will still stand in the perspective of ordinary designers, introduce XSLT from the shallow into the language. Ok, let's explore the secret of XSLT!
Disclaimer: Because the standard of XSLT is constantly developing, the grammar is also expanding, the knowledge we have learned below is based on the XSLT 1.0 released on November 16, 1999, so it may be incomplete, the latest information, please W3C website (http://www.w3.org/tr/xslt).
outline
This article is divided into five major chapters: XSLT concept, XSLT instance, XSLT element syntax, XPath's grammar, XSLT resources.
1.xslt concept
1.1 What is XSLT
1.2 Why use XSLT
1.3 XSLT history
1.4 What is XPath
1.5 Comparison of XSLT and CSS
1.6 XSLT and IE5
1.xslt concept
We first clarify a concept, you may have heard that XSL (Extensible Stylesheet Language), XSL and XSLT we say here are the same, and according to W3C standard, XSLT is more strict, so we are The name of XSLT is unified in the article. The specific relationship between them will be described below.
1.1 What is XSLT
The English standard name of XSLT is Extensible Stylesheet Language Transformation. According to the W3C specification manual (http://www.w3.org/tr/xslt), the earliest design of XSLT is to help the XML document (Document) to convert to other documents. But as developing, XSLT is not only used to convert XML to HTML or other text formats, and more comprehensive definitions should be:
XSLT is a language used to convert an XML document structure.
1.2 Why use XSLT
We already know that XML is a simple and standard way to exchange raw data between computer programs. Its success is not that it is easily written and read, more importantly, it fundamentally solves information exchange between the application system. Because XML satisfies two basic needs:
(1) Separate data and expression. Information on weather forecasts can be displayed on different devices, television, mobile phones or others.
(2). Transfer data between different applications. E-commerce data exchange has increasing the need to make this demand increasingly urgent.
In order to make the data easy to understand, we need to display the information or print out, such as turning data into an HTML file, a PDF file, even a sound; also, in order to make data suitable for different applications, we must There is an ability to convert a data format to another. For example, the demand format may be a text file, a SQL statement, an HTTP information, a certain order of data calls, etc. And XSLT is the language we used to implement this conversion function. Convert XML to HTML, which is currently the most important function of XSLT. 1.3 XSLT history
Think about many other XML family members, XSLT drafted and developed by W3C. Its main development history is as follows:
1995 was proposed by James Clark;
In August 1997 official proposal is XSL;
Summary of demand for Norman Walsh in May 1998;
Draft XSL draft, August 18, 1998;
The XSL 1.0 recommended version was officially released on November 16, 1999.
At present, XSLT is still in rapid development, and the draft XSLT1.1 can be seen on the W3C website (http://www.w3.org/tr/xslt11).
1.4 What is XPath
XPath is an important part of XSLT, and we will explain its detailed grammar in Chapter 4. So what is XPATH? Let's take a look at the "family" relationship of the XSL series. As shown below:
XSL is divided into obvious two processes when converting XML documents, and the first conversion document structure; secondly formats the documentation. These two steps can be separated and processed separately, so XSL gradually split into XSLT (Structure Translation) and XSL-FO (Formatting Objects) in the development process, and XSL-FO's role Similar to the role of CSS in HTML. And we focus on discussing the first step in the first step, that is, XSLT.
In addition, we already know that XML is a complete tree structure document when learning XML. In the conversion XML document, you may need to process some (node) data, so how to find and locate the information in the XML document, XPath is a language specifically used to find information in the XML document. XPath is affiliated with XSLT, so we usually mix the XSLT syntax and XPath syntax.
Using a more good understanding: If the XML document is viewed as a database, XPath is a SQL query language; if the XML document is viewed as a DOS directory structure, XPath is a collection of CD, DIR and other directory operation commands.
1.5 Comparison of XSLT and CSS
CSS can also format XML documents, then why do CSS need XSLT? Because CSS is capable of controlling the style, such as color, font, size, but it has a serious limitations, that is:
(1) CSS cannot reorder the elements in the document;
(2) CSS cannot determine and control which element is displayed, which is not displayed;
(3) CSS cannot statistically calculate the data in the element;
In other words, CSS is only suitable for outputting a fixed final document. The advantage of CSS is simple, consumes less system resources; while XSLT is powerful, but because the XML tree is required, it is more memory.
Therefore, we often combine them, such as using the XSLT processing document in the server, controlling the CSS. Can reduce the response time.
1.6 XSLT and IE5
Soon after the draft of XSLT, Microsoft provided a preview version of the XSL function in IE4. When IE5.0 is released, I officially fully support XSLT, but because IE5 released than XSLT1.0 standard time, therefore in IE5.0 The XSTL functionality supported in the medium is slightly different from XSLT 1.0. (呵 ~~~ One of the main reasons for XML is to solve the problem of HTML over-dependent browser, now Microsoft wants to work newly.). The standards performed in Microsoft IE5.5 have been substantially similar to the XSLT1.0 of W3C. But a headache is that IE5.0 has released millions of sets, and the XSLT you use is likely to be executed correctly by the customer's browser. At present, XSLT 1.1 is still in development, W3C and related organizations have also got unified with Microsoft negotiation. Ha ha ~~ The story is still not ending. Note: The grammar mentioned herein is based on the standards of XSLT 1.0, without any "dialect" of Microsoft. Chapter XSLT Getting started is easy: Example of XSLT: Example of Acha 2.XSLT
2.1 How XSLT converts XML
2.2 an instance
2.3 Process Analysis
2.4 Use of XSLT
2.1 How XSLT converts XML
We play a fun, you play the plasticine, press the different molds to make the shape of the need. 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 entered the XML original document, 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 look at a simple XSLT actual application example and 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. Modify the code for Hello.xml to:</p>
<p><? XML Version = "1.0" encoding = "ISO-8859-1"?> <? Xml-stylesheet type = "text / xsl" href = "hello.xsl"?> <greeting> Hello, World! </ greeting ></p>
<p>OK, all the code has been completed by this step, followed by using an XSLT processor (XML processor) to perform Hello.xml, you can see the result of "Hello World". 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</p>
<p>Some netizens should ask, I want to see what the effect of "Hello World" is 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</p>
<p>If you see the effect, you may want to know the specific meaning of these codes, let's explain in detail: see the hello.xsl file</p>
<p><? Xml Version = "1.0" encoding = "ISO-8859-1"?></p>
<p>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:</p>
<p><? XML Version = "1.0" encoding = "GB2312"?></p>
<p>The next code is:</p>
<p><XSL: Stylesheet XMLns: XSL = "http://www.w3.org/1999/xsl/transform" Version = "1.0"></p>
<p>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.</p>
<p><XSL: Template Match = "/"></p>
<p>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).</p>
<p>The next code is:</p>
<p><html> <head> <title> first xslt example </ title> </ head> <body> <p> <xsl: value-of select = "greeting" /> </ p> </ body> </ html ></p>
<p>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. Only the <xsl: value-of> element is a XSLT syntax, where <XSL: value-of> is the role of <XSL: value-of> is to copy the value of a node in the original document to the output document. The select property specifies the node name to be processed in detail. This is the XPath syntax, "greeting" means looking for elements named Greeting, and manages this node with template. Specifically, find the <greeting> element, then copy the value of the element to the output file in the template style. Tip: Since the XML document is a strict hierarchy (view XML file with IE5, you will see the XML document similar to multi-level associated menu), so our image is called the XML document as a document tree, which is called a node of the tree. . The root element is root node. Finally close all elements:</p>
<p></ xsl: template> </ xsl: stylesheet></p>
<p>Ok, the example explained. Have you thought about why you want to use such a complex way to display "Hello World"? The key is not on the surface, but in the substance: use this method, Hello World can be extracted from the XML document and use a variety of different XSLT template processing to output documents of different needs. Let's take a look at the main use of XSLT:</p>
<p>2.4 Use of XSLT</p>
<p>The main use of XSLT is data conversion applications. Due to XML-based e-commerce, XSLT is also increasingly important as data conversion roles. For example, directly convert the data format of TV news into data format required for newspaper news; direct converting stock data into pictures to display on the web; statistics, sorting, etc. XSLT is an ideal tool for processing similar work.</p>
<p>XSLT Easy Start Chapter 3: XSLT elements of grammar Author: Acha introduced by the previous two chapters, we already have some understanding of the basic concepts of XSLT and its conversion process. Let's learn the specific grammar of XSLT together. Speaking of syntax is always boring, you can browse it substantially, waiting for you to try to study them when you really need to use XSLT.</p>
<p>3.xslt elements</p>
<p>3.1 XSL: Template and XSL: Apply-Templates</p>
<p>3.2 XSL: Value-of</p>
<p>3.3 XSL: For-Each</p>
<p>3.4 XSL: IF</p>
<p>3.5 xxsl: choose, when, Otherwise</p>
<p>3.6 xsl: sort</p>
<p>3.1 XSL: Template and XSL: Apply-Templates</p>
<p>Template is one of the most important concepts in XSLT. The XSLT file consists of a template, and any XSLT file contains at least one template. The concept of template is like a wooden; if you are a programmer, you can also treat a template as a method, a class, or a module. They can be assembled, or they can be made separately, different templates control different output formats. Template consists of two parts: match pattern and execution. Simple lecture mode Defines which node in the XML source document will be processed by template, and execute what format is defined. Two parts of the corresponding syntax for XSL: Template and XSL: Apply-Templates.</p>
<p>XSL: The syntax of Template is:</p>
<p><XSL: Template Match = Pattern Name = Qname Priority = Number Mode = QName> <! - Execute Content -> </ XSL: Template> XSL: Template's role is to define a new template. In the property, Name, Priority, and Mode are used to distinguish different templates that match the same node. They are not common attributes. Match property controls the matching mode of the template (Pattern), the matching mode is used to locate which node is handled by the template in the XML source document. A template matches a node. We use an example to help understand: Suppose we have to handle a document containing chapters and paragraphs. We define paragraphs with the PARA element and define chapters with Chapter Elements. Let's take a look at the possible value of the Match property. The following statement write description template matches all Para elements</p>
<p><XSL: Template Match = "Para"> </ xsl: template></p>
<p>The following statement means template matches all Para elements and all Chapter elements:</p>
<p><XSL: Template Match = "(Chapter | PARA)> </ XSL: Template></p>
<p>The following statement write description Template matches all Parent nodes to the PARA element of the Chapter element:</p>
<p><XSL: Template Match = "Chapter // Para"> </ xsl: template></p>
<p>The following statement is written in the template matching root node:</p>
<p><XSL: Template Match = "/"> </ xsl: template></p>
<p>Let's see the Apply-Templates syntax:</p>
<p><XSL: Apply-Templates Select = Node Set-Expression Mode = Qname> </ XSL: Apply-Templates></p>
<p>XSL: Apply-Templates is used to execute that node is handled by template. You can understand it as a subsidy in the program. SELECT property is used to define the exact node name. XSL: Apply-Templates is always included in the XSL: Template element, like this:</p>
<p><XSL: Template Match = "/"> <xsl: Apply-Templates Select = "Para" /> </ xsl: template></p>
<p>This code illustrates the entire document (root node), and processes all PARA elements under the root node.</p>
<p><XSL: Template Match = "Para"> <P> <XSL: Apply-Templates /> </ P> </ XSL: Template></p>
<p>This code means that the touchpad matches the Para node, and the child elements under all PARA will be processed.</p>
<p>3.2 XSL: Value-of</p>
<p>XSL: Value-of is used to write text values in the source document to the output document. For example: there is a personal data XML document:</p>
<p><? XML Version = "1.0" encoding = "ISO-8859-1"> <Person> <name> ajie </ name> <agn> 28 </ age> </ person></p>
<p>If I want to display the value of the Name element in the XML source document on the output document, I can write XSLT code this:</p>
<p><XSL: Template Match = "Person"> <xsl: value-of select = "name" /> </ xsl: template> You will see "Ajie" is displayed separately. Where match = "person" defines the touchpad matching the Person node, XSL: value-of syntax description requires the value of a node, and select = "name" defines the elements that need to be output as Name. Is it true that this process is not a person's name in the database? Of course, XSL: value-of query has more, more complex syntax, because it is related to the function of looking and positioning, we will put it in the following XPath syntax in a careful explanation. The same functions have XSL: Copy-of, the same, the same, it is not repeated.</p>
<p>3.3 XSL: For-Each</p>
<p>XSL: for-Each syntax allows you to loop processing selected nodes. For example: there is an XML document containing multiple individual information:</p>
<p><? XML Version = "1.0" encoding = "ISO-8859-1"> <people> <persons> <name> ajie </ name> <agn> 28 </ age> </ person> <Person> <Name > TOM </ Name> <ag> 24 </ age> </ person> <person> <name> Miable </ name> <ag> 30 </ age> </ person> </ person>></p>
<p>I need to display the name of the owner, you can write the XSLT code:</p>
<p><XSL: Template Match = "People"> <xsl: for-each select = "child :: Person"> <xsl: value-of select = "name" /> </ xsl: for-each> </ xsl: Template></p>
<p>3.4 XSL: IF</p>
<p>XSL: if the IF condition statement similar to a normal program language allows the setting node to be modified when a condition is met. XSL: The syntax format of IF is:</p>
<p><xsl: if test = Boolean expression> Template body </ xsl: if></p>
<p>E.g:</p>
<p><xsl: template match = "people"> <xsl: if test = "@ name"> <p> <xsl: value-of select = "@ name" /> </ p> </ xsl: if> </ XSL: Template></p>
<p>This code means to detect all elements under the PEOPLE node. If you find a <name> element, the value of the <name> element is output. Where @ 号 is a consecutive, representing all the elements under the node.</p>
<p>3.5 XSL: Choose, XSL: WHEN and XSL: Otherwise</p>
<p>XSL: if syntax does not have an attribute of ELSE. If we want to do multiple options, then use XSL: Choose / XSL: WHEN / XSL: OtherWise Series Process Control Syntax. Specific use Please see the following XSL file example: <xsl: template match = "people"> <xsl: choose> <xsl: when test = "@ name = 'ajie'"> <b> <xsl: value-of Select = "@ Name" /> </ b> </ xsl: by> <xsl: when test = "@ name"> <i> <xsl: value-of select = "@ name" /> </ i> </ xsl: by> <xsl: Otherwise> No name available </ xsl: OtherWise> <XSL: Choose> </ xsl: template></p>
<p>Description: First look for the <name> attribute value of the <name> attribute value under the PEOPLE node, if you find it, output Ajie with bold; if you do not find the value of the <name> element of Ajie, all <name> elements value Use itfore they are output; if no <name> element is found, "no name available" is displayed.</p>
<p>3.6 xsl: sort</p>
<p>The elements of the XML source document can be reordered in the XSLT, and the syntax sorted is XSL: sort. Example: The following code is to place the document element by NAME.</p>
<p><XSL: Template Match = "People"> <XSL: Apply-Templates Select = "Person> <XSL: Sort Select =" @ name "/> </ xsl: Apply-Templates> </ xsl: template></p>
<p>The above is the main grammar of the elements of XSLT, there are many other grammar, such as Import, Include, Element, Attribute, Number, Param, etc., which are not explained here. Our goal is to let you have basic concepts of XSLT's syntax, understand XSLT as a powerful function of conversion languages.</p>
<p>XSLT Easy Start Chapter IV: The syntax of the XPath: A Syntax Czech 4.XPath</p>
<p>We have already mentioned earlier, XPath is the language used to help XSLT to find location information in the XML source document. During the actual use, XPath and XSLT are always mixed together. In the above chapter, we already have the syntax used to use XPath, just not clearly. But W3C divides them into two standards, so we also dismantled them into two chapters to explain.</p>
<p>4.XPath syntax</p>
<p>4.1 Current location</p>
<p>4.2 Addressing</p>
<p>4.3 operator</p>
<p>4.4 Function Function</p>
<p>4.1 Current location</p>
<p>When we use the XSLT to process the XML source document, we use context to represent the node location that is currently being processed by the template. For example, the XSL: Template match = "/" statement indicates the root node of the document in the document. I don't know how to accurately translate the word word, which is similar to the pointer in the C language, indicating the location where the program is currently running. Understanding Context is very important to correctly handle the XSL template, when your XSL template outputs, the first thing you want, the first should be analyzed where CONTEXT is. Location Paths is used to set the CONTEXT node location you want to find. Similar to the DOS directory command. Let's take an example <xsl: for-each select = "child :: people / descendant :: Person"></p>
<p>Where Child :: People / Descendant :: Person is the XPath syntax, this expression is a location paths, code description to display the child elements of all people and the child elements of all Person elements. Usually we will use simpler ways:</p>
<p><xsl: for-each select = "people // Person"></p>
<p>Let's explain two representations of PATH: "/" and "//". "/" Is a node that represents the current document, similar to the DOS directory split. For example: / people represents the people elements under the root node; People / Person represents all the Peson sub-elements under the people. "//" means all nodes of the current document. Similar to view the entire directory. For example: // people indicate what the people have all in the document, whether it is what level; people // person represents all the Person elements under the people of the People, no matter how deep it.</p>
<p>4.2 Addressing</p>
<p>AXIS and PREDICATE are syntax for locating the Location Paths in XPath syntax, and the specific usage list is as follows</p>
<p>AXIS syntax ----------------------------------------------- --------- Expressive Description ------------------------------------- ------------------ Self. Select the current node.. Example: <TD> <XSL: Value-of select = "." /> </ Td> code means inserting the current node included in the current location, ----------- -------------------------------------------- parent .. Select the current The parent node of the node. -------------------------------------------------- ------ Attribute @ Select all properties of an element. Example: <TD> <XSL: Value-of select = "@ personid" /> </ td> Select all properties of the Person element. -------------------- ---------------------------------- Child Select all child elements of the current node. -------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------</p>
<p>AXIS helps us select all nodes around the current node, while Predicate is used to locate the elements within the current node. Representation is square bracket [] plus expression: [expression]. Specific examples are as follows: Person [Position () = 2] This code means looking for the second "person" element</p>
<p>Person [Starts-with (Name, "B")] This code indicates that all the Person elements starting with "B".</p>
<p>4.3 operator</p>
<p>This section introduces the XPath operator (Expressions), the list is as follows: ----------------------------------- --------------------- Operator Description -------------------------- ----------------------------- and, or is the ordinary meaningful and, or ---------- --------------------------------------------- = equal to - -------------------------------------------------- ----! = 不 等 ------------------------------------------ -------------->,> = greater than or equal to ---------------------------- ---------------------------- <, <= less than, less than or equal. Note: In the XSL file, <indication should be <Representation -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------- , -, *, DIV Dimension and Summary --------------------- ----------------------------------- MOD mode ------------ -------------------------------------------- | Two nodes together -------------------------------------------------- --------</p>
<p>4.4 Functional Function (Functions)</p>
<p>There are a lot of function functions in XPath to help us find the need for nodes.</p>
<p>Count () function: Statistical count, returns the number of qualified nodes. Example: <p> <xsl: value-of select = "" /> </ p> Description: The purpose of the code is to display a few name attribute values in the Person element.</p>
<p>Number () Features: Convert text in the value of the property to a value. Example: <p> The number is: <xsl: value-of select = "Number (Book / Price)" /> </ p> Description: The use of the code is the price of the display.</p>
<p>Substring () Function Syntax: Substring (Value, Start, Length) Role: Intercept string. Example: <p> <xsl: value-of select = "Substring (Name, 1, 3)" /> </ p> Description: The use of the code is to intercept the value of the NAME element, from the first letter to the first Three.</p>
<p>Sum () function: sum find. Example: <p> Total price = <xsl: value-of select = "SUM (// Price)" /> </ p> Description: The use of code is to calculate all prices and. The above features are only part of the XPath syntax, and there are a lot of functional functions that are not introduced, and the syntax of XPath is still growing. Through these functions we can achieve more complex queries and operations.</p>
<p>Seeing this, our entry tutorial is over. By going to the horse's quick study, I hope everyone should have a basic concept to XSLT: XSLT is a language to convert the XML document, which contains two processes: conversion and formatting. The XSLT's function is much larger than CSS, which has a similar data query syntax. If you are interested in XSLT, then the above knowledge is not enough, you need to query more information. Abie provides you with the main XSLT resources in the last chapter Appendix.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-123129.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="123129" 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.058</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 = 'IhP2rzhHuaz6Byv29i8AFn5Z3x16TU8jHdkn3b37AoEoxpEiJno6MBKFd2W2PF6iJ0oxrD9cbDrkJ2JrJXcwjQ_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>
