Diferencia entre revisiones de «Módulo:HtmlBuilder/doc»

De Familia Sanchez Arjona
Saltar a: navegación, buscar
(expand documentation)
m (27 revisiones importadas)
 
(No se muestran 25 ediciones intermedias de 14 usuarios)
Línea 1: Línea 1:
HtmlBuilder provides a way to construct complex HTML and CSS markup by creating a tree of nodes, similar to the [[Document Object Model]]. The result is code that is more comprehensible and maintainable than if you simply concatenated strings together.  It offers a [[fluent interface]] that should look familiar to any user of [[jQuery]].
+
Este módulo crea html usando una interfaz fluida Lua.
  
== Usage ==
+
=== Uso ===
 +
para empezar, es necesario cargar el módulo:
  
First, you need to load the module:
+
<code>HtmlBuilder local = require ('Módule:HtmlBuilder')</code>
 +
A continuación, puede crear html usando los siguientes sub-funciones:
  
<code>local HtmlBuilder = require('Module:HtmlBuilder')</code>
+
* <code>create()</code> - la función básica. Todas las sub-funciones se denominan de esta.
 
+
* <code>wikitext()</code> - wikitexto texto normal que se produce entre las etiquetas html, o fuera de las etiquetas HTML.
Next, create the root HtmlBuilder instance:
+
* <code>allDone()</code> - esto cierra cualquier etiqueta html abierta. Cada llamada a HtmlBuilder debe finalizar con esto, independientemente de si se utiliza cualquier etiqueta o no.
 
+
* <code>tag()</code> - especifica que etiqueta utilizar. Puede ser utilizado para crear etiquetas no cerradas utilizando el unclosed {true} = parámetro.
<code>local builder = HtmlBuilder.create()</code>
+
* <code>attr()</code> - especifica los atributos utilizados en la etiqueta html.
 
+
* <code>css()</code> - especifica estilos CSS usado en un "estilo" atributo en la etiqueta html. Esta función sub-acepta dos parámetros - la primera es la propiedad css, y el segundo es el valor. Por ejemplo, ('background', 'rojo') .
Then, you can build HTML using the methods of the HtmlBuilder instance, listed below.
+
* <code>cssText()</code> - establece este estilo css como una cadena de texto que contiene la propiedad css y el valor. Por ejemplo, ('background: red; ")  
 
+
* <code>addClass()</code> - esto se suma un valor de más de clase a la etiqueta.
Finally, get the resulting HTML markup as a string:
+
<includeonly>
 
+
[[Categoría:Wikipedia:Módulos]]  
<code>local s = tostring(builder)</code>
+
</includeonly>
 
 
== Methods ==
 
To allow chaining, all methods return a reference to the builder, unless otherwise stated.
 
 
 
===tag===
 
<code>local div = builder.tag('div')</code>
 
Appends a new child node to the builder, and returns an HtmlBuilder instance representing that new node.
 
 
 
===done===
 
<code>builder = div.done()</code>
 
Returns the parent node under which the current node was created.  Like [http://api.jquery.com/end/ jQuery.end], this is a convenience function to allow the construction of several child nodes to be chained together into a single statement.
 
 
 
===allDone===
 
<code>builder = div.allDone()</code>
 
Like <code>.done()</code>, but traverses all the way to the root node of the tree and returns it.
 
 
 
===wikitext===
 
<code><nowiki>div.wikitext('This is some [[example]] text.')</nowiki></code>
 
Appends some markup to the node. It may include plain text, wiki markup, and even HTML markup.
 
 
 
===newline===
 
<code>div.newline()</code>
 
Appends a newline character to the node. Equivalent to <code>.wikitext('\n')</code>.
 
 
 
===attr===
 
<code>div.attr('title', 'Attr value')</code>
 
Set an HTML attribute on the node.
 
 
 
===css===
 
<code>div.css('color', '#f00')</code>
 
Set a CSS property to be added to the node's <code>style</code> attribute.
 
 
 
===cssText===
 
<code>div.cssText('color:#f00; font-size:1.5em')</code>
 
Add some raw CSS to the node's <code>style</code> attribute. This is typically used when a template allows some CSS to be passed in as a parameter, such as the <code>liststyle</code> parameter of {{tl|Navbox}}.
 
 
 
===addClass===
 
<code>div.addClass('even')</code>
 
Adds a class name to the node's <code>class</code> attribute. Spaces will be automatically added to delimit each added class name.
 
 
 
== Examples ==
 
 
 
For examples, please see the [[Module:HtmlBuilder/testcases|test cases page]] and the [[Module talk:HtmlBuilder/testcases|test cases results]].
 

Revisión actual del 15:06 31 may 2016

Este módulo crea html usando una interfaz fluida Lua.

Uso

para empezar, es necesario cargar el módulo:

HtmlBuilder local = require ('Módule:HtmlBuilder') A continuación, puede crear html usando los siguientes sub-funciones:

  • create() - la función básica. Todas las sub-funciones se denominan de esta.
  • wikitext() - wikitexto texto normal que se produce entre las etiquetas html, o fuera de las etiquetas HTML.
  • allDone() - esto cierra cualquier etiqueta html abierta. Cada llamada a HtmlBuilder debe finalizar con esto, independientemente de si se utiliza cualquier etiqueta o no.
  • tag() - especifica que etiqueta utilizar. Puede ser utilizado para crear etiquetas no cerradas utilizando el unclosed {true} = parámetro.
  • attr() - especifica los atributos utilizados en la etiqueta html.
  • css() - especifica estilos CSS usado en un "estilo" atributo en la etiqueta html. Esta función sub-acepta dos parámetros - la primera es la propiedad css, y el segundo es el valor. Por ejemplo, ('background', 'rojo') .
  • cssText() - establece este estilo css como una cadena de texto que contiene la propiedad css y el valor. Por ejemplo, ('background: red; ")
  • addClass() - esto se suma un valor de más de clase a la etiqueta.