web-dev-qa-db-ja.com

javascript .jsでカスタムモジュールを作成する

この.js javascriptをjoomlaサイトに挿入するカスタムモジュールを作成したいのですが、 joomla 3.xバージョン

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

joomlaのモジュールに表示するカスタムテキストを作成するにはどうすればよいですか？

助けてくれてありがとう！

javascript
3
dhacohen

Joomlaでこれを実現するにはいくつかの方法があります。

1。NoNumberからのSourcerer と呼ばれるプラグインを確認することをお勧めします。

Sourcererを使用すると、PHPおよびあらゆる種類のHTMLスタイルコード（CSSおよびJavaScriptを含む））をコンテンツに直接配置できます！記事だけでなく、セクション、カテゴリ、モジュール、コンポーネント、 METAタグなど.

次に、JavaScriptをWYSIWYGエディター（TinyMCEなど）に直接追加すると、プラグインが必要に応じてコードを解析します。例：

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

他の同様の拡張機能はここにあります： http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-content

2。別のオプションは、カスタムモジュールを http://extensions.joomla.org/extensions/core-enhancements/codingからインストールすることです。 -a-scripts-integration/custom-code-in-modules 。これらは、コードを削除しない特別なモジュールです。

編集：

特定の要件のために、パッケージに含まれているMouseFollowデモを表示するための非常に迅速なダーティモジュールを作成しました。ここでモジュールを見つけることができます： http://dospuntos.no/extensions/mod_addShine.Zip 。他のJoomlaモジュールと同じようにインストールして、任意のページに公開します。 （現状のまま提供され、必要に応じてコードを自由に変更してください）。

default.phpファイルのコードは次のとおりです。

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

あなたの現在のHTMLエディターはTinyMCEだと思います。

Administrator-> Extensions-> Plugin Manager-> Editor-TinyMCEに移動します

Word scriptが[Prohibited Elements]フィールドにリストされている場合は削除し、プラグインを保存します。

次に、アドミニストレーター->拡張機能->モジュールマネージャー->に移動して、新しい「カスタムHTMLモジュール」を作成します。 +New ->カスタムHTML

クリックしてください Toggle Editor 次のように code を追加します。

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

次に、「タイトル」フィールドに入力し、「位置」を選択して、モジュールを有効にします。必要なモジュール割り当てを選択することもできます。それを保存します。

3
Farahmand