Joomla! Documentation™

Insertar desde un Archivo

To have a well-formed HTML document, you must put all references to Javascript and CSS files within the <head> portion. Since Joomla! generates all the HTML that makes up a page before output, it is possible to add these references within the <head> tags from your extension. The simplest way to do this is to make use of the functionality built in to Joomla.

JDocument

En primer lugar, obtener una referencia al objeto del documento actual:

$document = JFactory::getDocument();

Luego para una hoja de estilos, usa este código:

$document->addStyleSheet($url);

Para agregar un archivo Javascript, utiliza este código:

$document->addScript($url);

donde $url es la variable que contiene la ruta de acceso completa al archivo javascript o CSS por ejemplo:
JUri::base() . 'templates/custom/js/sample.js'

Nota esto **NO** incluye Mootools o jQuery. Si el código requiere Mootools o jQuery mira Frameworks Javascript para más información sobre cómo incluirlos (nota jQuery sólo puede ser incluido de forma nativa en Joomla! 3.0+).

It used to be possible to do this with JHTML, however, this was deprecated in Joomla 2.5 and removed in Joomla 3.x.

Agregar opciones a tu código JavaScript

Joomla! 

≥ 3.7

Solo disponible en Joomla! 3.7 y superior

Además de agregar scripts, Joomla! ofrece un mecanismo para almacenar las opciones en "optionsStorage". Esto permite administrar las opciones existentes en el lasdo del servidor y en el cliente. Esto permite ubicar toda la lógica de JavaScript en el archivo JavaScript, el cual se agrega al caché del navegador.

Joomla! utiliza un mecanismo especial para aplicar "lazy loading" en las opciones del lado cliente. No utiliza JavaScript inline, lo cual es mejor para la velocidad de renderización de la página, y hace el sitio web más amigable para un verificador de velocidad (ej. Google).

Es mejor usar "optionsStorage" que JavaScript inline para agregar las opciones del script.

"'Ejemplo de uso"'

Agregar las opciones del script a tu módulo:

$document = JFactory::getDocument();
$document->addScriptOptions('mod_example',
    'colors' => array('selector' => 'body', 'color' => 'orange'),
    'sliderOptions' => array('selector' => '.my-slider', 'timeout' => 300, 'fx' => 'fade'),
));

Acceso a tus opciones en el lado del cliente:

var myOptions = Joomla.getOptions('mod_example');
console.log(myOptions.colors); // Print in the browser console your options
console.log(myOptions.sliderOptions);

Sobreescribir las opciones en el lado servidor (lo cual es posible hasta la renderización del "head"):

$document  = JFactory::getDocument();
// Get existing options
$myOptions = $document->getScriptOptions('mod_example');
// Change the value
$myOptions['colors'] = array('selector' => 'body', 'color' => 'green');
// Set new options
$document->addScriptOptions('mod_example', $myOptions);

Insertar secuencias de comandos en línea desde dentro de un archivo PHP

Si Javascript o CSS se generan usando PHP, puedes agregar la secuencia de comandos o la hoja de estilos directamente en la cabeza de tu documento:

$document = JFactory::getDocument();

// Add Javascript
$document->addScriptDeclaration('
    window.event("domready", function() {
        alert("An inline JavaScript Declaration");
    });
');

// Add styles
$style = 'body {'
        . 'background: #00ff00;'
        . 'color: rgb(0,0,255);'
        . '}'; 
$document->addStyleDeclaration($style);

Ejemplo de Javascript

Por ejemplo, el siguiente código se utiliza para definir un texto de ayuda emergente personalizado que toma ventaja de mootools.

function getToolTipJS($toolTipVarName, $toolTipClassName){
    $javascript = 'window.addEvent(\"domready\", function(){' ."\n";
    $javascript .= "\t"  .'var $toolTipVarName = new Tips($$("' . $toolTipVarName .'"), {' ."\n";
    $javascript .= "\t\t"   .'className: "' .$toolTipClassName .'",' ."\n";
    $javascript .= "\t\t"   .'initialize: function(){' ."\n";
    $javascript .= "\t\t\t"    .'this.fx = new Fx.Style(this.toolTip, "opacity", {duration: 500, wait: false}).set(0);' ."\n";
    $javascript .= "\t\t"   .'},' ."\n";
    $javascript .= "\t\t"   .'onShow: function(toolTip){' ."\n";
    $javascript .= "\t\t\t"    .'this.fx.start(1);' ."\n";
    $javascript .= "\t\t"   .'},' ."\n";
    $javascript .= "\t\t"   .'onHide: function(toolTip) {' ."\n";
    $javascript .= "\t\t\t"    .'this.fx.start(0);' ."\n";
    $javascript .= "\t\t"   .'}' ."\n";
    $javascript .= "\t"  .'});' ."\n";
    $javascript .= '});' ."\n\n";
    return $javascript;
}

$document = JFactory::getDocument();
$document->addStyleSheet("/joomla/components/com_mycustomcomponent/css/mytooltip.css",'text/css',"screen");
$document->addScriptDeclaration(getToolTipJS("mytool","MyToolTip"));

Ten en cuenta que para que este Javascript sea funcionalmente útil, sería necesario incluir el nombre de clase apropiado en el archivo HTML, así como proporcionar el archivo mytooltip.css. Ambos están fuera del alcance de este artículo.

Ejemplos de CSS

Esto también es útil si tu insertas un campo de formulario de CSS en el código. Por ejemplo, en un módulo, puedes ser que desees que un usuario pueda elegir el color del borde. Después de llamar al avlro de los campos de formulario y asignarlo a una variable $bordercolor en mod_example.php. A continuación, en tmpl/default.php se puede incluir lo siguientes:

$document = JFactory::getDocument();
$document->addStyleSheet('mod_example/mod_example.css');
$style = '#example {
	border-color:#' . $bordercolor . ';
	}';
$document->addStyleDeclaration( $style );

Aquí mod_example.css contiene el archivo CSS de cualquier no-parámetro base de estilos. A continuación, el parámetro bordercolor/campo de formulario se agrega por separado.

Agregar Etiqueta Personalizada

Habrá algunas ocasiones en las que incluso estas funciones no son lo suficientemente flexibles, ya que están limitadas a escribir el contenido de las etiquetas <script /> o <style />, y no se puede agregar nada fuera de esas etiquetas. Un ejemplo sería la inclusión de un enlace a hojas de estilos dentro de los comentarios condicionales, que son recogidos únicamente por Internet Explorer 6 y anteriores. Para hacer esto, usa $document->addCustomTag:

$stylelink = '<!--[if lte IE 6]>' ."\n";
$stylelink .= '<link rel="stylesheet" href="../css/IEonly.css" />' ."\n";
$stylelink .= '<![endif]-->' ."\n";

$document = JFactory::getDocument();
$document->addCustomTag($stylelink);