From 68fc8e96a9629e73469ed457abd955e548ec670c Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:58 +0100 Subject: unslug pt-br: move --- .../advanced_example/index.html | 100 +++++++++++++++++++++ .../web/xslt/xslt_js_interface_in_gecko/index.html | 24 +++++ 2 files changed, 124 insertions(+) create mode 100644 files/pt-br/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.html create mode 100644 files/pt-br/web/xslt/xslt_js_interface_in_gecko/index.html (limited to 'files/pt-br/web/xslt') diff --git a/files/pt-br/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.html b/files/pt-br/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.html new file mode 100644 index 0000000000..132fba5881 --- /dev/null +++ b/files/pt-br/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.html @@ -0,0 +1,100 @@ +--- +title: Exemplo Avançado +slug: The_XSLT_JavaScript_Interface_in_Gecko/Advanced_Example +translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko/Advanced_Example +--- +

Exemplo Avançado

+ +

O exemplo avançado apresentará vários tipos de divs baseado em seu conteúdo. O exemplo permite tipificar o conteúdo muitas vezes, alternando entre tipos ascendente ou descendente. O JavaScript apenas carrega o arquivo .xsl a primeira vez, e prepara a variável xslloaded verdadeira (true) assim que o arquivo tiver terminado de carregar. Usando o método getParameter no obejto XSLTProcessor, o código pode decidir pelo tipo ascendente ou descendente. Se o parâmetro estiver vazio o padrão é ascendente (primeira vezes que o tipo aparece, como não há valor para isto no aarquivo XSLT). O valor do tipo é colocado usando setParameter.

+ +

The XSLT file has a parameter called myOrder that JavaScript sets to change the sorting method. The xsl:sort element's order attribute can access the value of the parameter using $myOrder. However, the value needs to be an XPATH expression and not a string, so {$myOrder} is used. Using {} evaluates the content as an XPath expression.

+ +

Once the transformation is complete, the result is appened to the document, as shown in this example.

+ +

Figure 7 : Sorting based on div contentview example

+ +
// XHTML Fragment:
+
+<div id="example">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+  <div>6</div>
+  <div>7</div>
+  <div>8</div>
+  <div>9</div>
+  <div>10</div>
+</div>
+
+// JavaScript
+
+var xslRef;
+var xslloaded = false;
+var xsltProcessor = new XSLTProcessor();
+var myDOM;
+
+var xmlRef = document.implementation.createDocument("", "", null);
+
+function sort() {
+  if (!xslloaded){
+    p = new XMLHttpRequest();
+    p.open("GET", "example2.xsl", false);
+    p.send(null);
+
+    xslRef = p.responseXML;
+    xsltProcessor.importStylesheet(xslRef);
+    xslloaded = true;
+  }
+
+  // create a new XML document in memory
+  xmlRef = document.implementation.createDocument("", "", null);
+
+  // we want to move a part of the DOM from an HTML document to an XML document.
+  // importNode is used to clone the nodes we want to process via XSLT - true makes it do a deep clone
+  var myNode = document.getElementById("example");
+  var clonedNode = xmlRef.importNode(myNode, true);
+
+  // after cloning, we append
+  xmlRef.appendChild(clonedNode);
+
+  // set the sorting parameter in the XSL file
+  var sortVal = xsltProcessor.getParameter(null, "myOrder");
+
+  if (sortVal == "" || sortVal == "descending")
+    xsltProcessor.setParameter(null, "myOrder", "ascending");
+  else
+    xsltProcessor.setParameter(null, "myOrder", "descending");
+
+  // initiate the transformation
+  var fragment = xsltProcessor.transformToFragment(xmlRef, document);
+
+  // clear the contents
+  document.getElementById("example").innerHTML = "";
+
+  myDOM = fragment;
+  // add the new content from the transformation
+  document.getElementById("example").appendChild(fragment)
+}
+
+// XSL Stylesheet:
+
+<?xml version="1.0" encoding="UTF-8"?>
+<xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+  <xsl:output method="html" indent="yes" />
+
+  <xsl:param name="myOrder" />
+
+  <xsl:template match="/">
+
+    <xsl:apply-templates select="/div//div">
+      <xsl:sort select="." data-type="number" order="{$myOrder}" />
+    </xsl:apply-templates>
+  </xsl:template>
+
+  <xsl:template match="div">
+    <xsl:copy-of select="." />
+  </xsl:template>
+</xsl:stylesheet>
+
diff --git a/files/pt-br/web/xslt/xslt_js_interface_in_gecko/index.html b/files/pt-br/web/xslt/xslt_js_interface_in_gecko/index.html new file mode 100644 index 0000000000..7bcbbc6cd0 --- /dev/null +++ b/files/pt-br/web/xslt/xslt_js_interface_in_gecko/index.html @@ -0,0 +1,24 @@ +--- +title: The XSLT/JavaScript Interface in Gecko +slug: The_XSLT_JavaScript_Interface_in_Gecko +tags: + - DOM + - NeedsTranslation + - TopicStub + - XSLT +translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko +--- +
    +
  1. Introduction
    2. +
  2. JavaScript/XSLT Bindings
    3. +
  3. Basic Example
    4. +
  4. Setting Parameters
    5. +
  5. Advanced Example
    6. +
  6. Interface List
    7. +
  7. Resources
    8. +
+ +

See also

+ -- cgit v1.2.3-54-g00ecf