it-swarm-es.tech

Cree un módulo personalizado con javascript .js

Quiero crear un módulo personalizado para insertar este .js javascript en mi sitio joomla; versión joomla 3.x

http://bigspaceship.github.io/shine.js/

¿Cómo puedo hacer para crear mi texto personalizado para que aparezca en un módulo en Joomla?

gracias por su ayuda amigos!

3
dhacohen

Hay varias formas de lograr esto en Joomla:

1. Es posible que desee echar un vistazo a un complemento llamado Sourcerer from NoNumber :

¡Sourcerer le permite colocar PHP y cualquier tipo de código de estilo HTML (incluidos CSS y JavaScript) directamente en su contenido! No solo en sus artículos, sino también en secciones, categorías, módulos, componentes, Etiquetas META, etc.

Luego puede agregar javascript directamente en el editor WYSIWYG (como TinyMCE), y el complemento analizará el código según sea necesario. Ejemplo:

{source}
<script src="http://bigspaceship.github.io/shine.js/"></script>
{/source}

Otras extensiones similares se pueden encontrar aquí: http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-content

2. Otra opción es instalar un módulo personalizado desde http://extensions.joomla.org/extensions/core-enhancements/coding -a-scripts -integration/custom-code-in-modules . Estos son módulos especiales que no eliminarán su código.

Editar:

Para sus requisitos específicos, creé un módulo muy rápido y sucio para mostrar la demostración de MouseFollow incluida en el paquete. Puede encontrar el módulo aquí: http://dospuntos.no/extensions/mod_addShine.Zip . Simplemente instálelo como cualquier otro módulo de Joomla y publíquelo en cualquier página. (Siempre y cuando esté, puede modificar el código si es necesario).

Aquí está el código de la default.php archivo:

<?php
/**
* @package    Add Shine.js
* @author     Dos Puntos Design
* @copyright  Copyright (C) 2014 Dos Puntos Design
* @license    http://www.gnu.org/licenses/gpl-3.0.html
**/

// No direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
JHtml::_('script', JUri::root() . 'media/mod_addShine/js/shine.min.js');       // For JS files
$text = $params->get('shine_text');
?>
<style>
.demo-text {
  margin: auto;
  width: 100%;
  color: #fcfcfc;
  text-transform: uppercase;
  text-align: center;
  font-size: 8em;
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2em;
}
</style>
    <h1 id="headline" class="demo-text"><?php echo $text ?></h1>
    <script type="text/javascript">
      // use new shinejs.Shine(...) if Shine is already defined somewhere else
      // var shine = new shinejs.Shine(document.getElementById('headline'));
      var shine = new Shine(document.getElementById('headline'));
      function handleMouseMove(event) {
        shine.light.position.x = event.clientX;
        shine.light.position.y = event.clientY;
        shine.draw();
      }
      window.addEventListener('mousemove', handleMouseMove, false);
</script>
3
johanpw

Supongo que su editor html actual es TinyMCE.

Vaya a Administrador -> Extensiones -> Administrador de complementos -> Editor - TinyMCE

Elimine la palabra script si aparece en el campo "Elementos prohibidos" y guarde el complemento.

Luego cree un nuevo "Módulo HTML personalizado" yendo a Administrador -> Extensiones -> Administrador de módulos -> +New -> HTML personalizado

Clickea en el Toggle Editor y agregue el código como este:

<style>
    /* In HTML5 you can use style tag inside the body. */
</style>

<script type="text/javascript" src="path/to/shine.min.js"></script>
<script type="text/javascript">
    var shine = new Shine(document.getElementById('my-shine-object'));
    window.addEventListener('mousemove', function(event) {
        shine.light.position.x = event.clientX;
        shine.light.position.y = event.clientY;
        shine.draw();
    }, false);
</script>

Luego llene el campo "Título", seleccione la "Posición" y active el módulo. También puede seleccionar una asignación de módulo deseada. Entonces guárdalo.

3
Farahmand