web-dev-qa-db-fra.com

Créer un module personnalisé avec javascript .js

Je veux créer un module personnalisé pour insérer ce javascript .js dans mon site joomla; version joomla 3.x

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

comment puis-je créer mon texte personnalisé pour qu'il apparaisse dans un module dans joomla?

merci pour votre aide les gens!

javascript
3
dhacohen

Il y a plusieurs façons de réaliser cela dans Joomla:

1. Vous voudrez peut-être jeter un coup d'oeil à un plugin appelé Sourcerer de NoNumber :

Sourcerer vous permet de placer PHP et tout type de code de style HTML (y compris CSS et JavaScript) directement dans votre contenu! Non seulement dans vos articles, mais également dans des sections, catégories, modules, composants, etc. Balises META, etc.

Ensuite, vous pouvez ajouter du javascript directement dans l'éditeur WYSIWYG (comme TinyMCE), et le plugin analysera le code si nécessaire. Exemple:

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

D'autres extensions similaires peuvent être trouvées ici: http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-content

2. Une autre option consiste à installer un module personnalisé à partir de http://extensions.joomla.org/extensions/core-enhancements/coding -a-scripts-integration/code-personnalisé-dans-modules . Ce sont des modules spéciaux qui ne supprimeront pas votre code.

Modifier:

Pour vos besoins spécifiques, j'ai créé un module très rapide et détaillé pour afficher la démo MouseFollow incluse dans le package. Vous pouvez trouver le module ici: http://dospuntos.no/extensions/mod_addShine.Zip . Installez-le simplement comme n'importe quel autre module Joomla et publiez-le sur n'importe quelle page. (Fourni tel quel, n'hésitez pas à modifier le code si nécessaire).

Voici le code du default.php fichier:

<?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

Je suppose que votre éditeur HTML actuel est TinyMCE.

Allez dans Administrateur -> Extensions -> Gestionnaire de plugins -> Editeur - TinyMCE

Supprimez le mot script s'il est répertorié dans le champ "Éléments interdits" et enregistrez le plug-in.

Créez ensuite un nouveau "Module HTML personnalisé" en accédant à Administrateur -> Extensions -> Gestionnaire de modules -> +New -> HTML personnalisé

Clique sur le Toggle Editor et ajoutez le code comme ceci:

<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>

Remplissez ensuite le champ "Titre", sélectionnez la "Position" et activez le module. Vous pouvez également sélectionner l'affectation de module souhaitée. Puis enregistrez-le.

3
Farahmand