script.aculo.us-概要

script.aculo.usとは何ですか？

script.aculo.usは、_Prototype JavaScriptフレームワークの上に構築されたJavaScriptライブラリです。GUIを強化し、Web 2.0エクスペリエンスをWebユーザーに提供します。

script.aculo.usはThomas Fuchsによって開発され、2005年6月に最初に公開されました。

script.aculo.usは、ドキュメントオブジェクトモデル（DOM）を介して動的な視覚効果とユーザーインターフェイス要素を提供します。

Prototype JavaScript Frameworkは、Ajaxフレームワークと他のユーティリティを提供するSam Stephensonによって作成されたJavaScriptフレームワークです。

script.aculo.usをインストールする方法は？

script.aculo.usライブラリのインストールは非常に簡単です。それは3つの簡単なステップで設定することができます-

http://script.aculo.us/downloads [ダウンロードページ]にアクセスして、便利なパッケージの最新バージョンをダウンロードします。
ダウンロードしたパッケージを解凍すると、次のフォルダが見つかります-
lib -prototype.jsファイルが含まれています。
src -次の8つのファイルが含まれます-
builder.js
controls.js
dragdrop.js
effects.js
scriptaculous.js
Slider.js
sound.js
unittest.js
test -テスト目的のファイルが含まれています。
CHANGELOG -すべての変更の履歴を含むファイル。
MIT-LICENSE -ライセンス条項を説明するファイル。
README -インストール手順を含むインストールパッケージを説明するファイル。
次に、ウェブサイトのディレクトリに次のファイルを配置します。/javascript。
builder.js
controls.js
dragdrop.js
effects.js
scriptaculous.js
Slider.js
prototype.js

注-sound.jsおよびunittest.jsファイルはオプションです

script.aculo.usライブラリの使用方法

今、あなたは次のように_script.aculo.us_スクリプトを含めることができます-

<html>
   <head>
      <title>script.aculo.us examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script >
   </head>

   <body>
      ........
   </body>
</html>

デフォルトでは、scriptaculous.jsは、エフェクト、ドラッグアンドドロップ、スライダー、および他のすべてのscript.aculo.us機能に必要な他のすべてのJavaScriptファイルをロードします。

すべての機能が必要でない場合は、コンマ区切りリストで指定することにより、ロードされる追加のスクリプトを制限できます。 −

<html>
   <head>
      <title>script.aculo.us examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>
   </head>

   <body>
      ........
   </body>
</html>

指定できるスクリプトは次のとおりです-

効果
ドラッグドロップ
ビルダー
制御
スライダー

注-一部のスクリプトでは、正常に機能するために他のスクリプトをロードする必要があります。

script.aculo.usライブラリ関数を呼び出す方法は？

script.aculo.usライブラリ関数を呼び出すには、以下に示すようにHTMLスクリプトタグを使用します-

<html>
   <head>
      <title>script.aculo.us examples</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>

      <script type = "text/javascript" language = "javascript">
        //<![CDATA[
         function action(element){
            new Effect.Highlight(element,
               { startcolor: "#ff0000", endcolor: "#0000ff", restorecolor: "#00ff00",  duration: 8 });
         }
        //]]>
      </script>
   </head>

   <body>
      <div id = "id" onclick = "action(this);">
         Click on this and see how it change its color.
      </div>
   </body>
</html>

ここでは、Effectモジュールを使用し、エレメントに_Highlight_エフェクトを適用しています。

これにより、次の結果が生成されます–

モジュールの関数を呼び出す別の簡単な方法は、次のようにイベントハンドラ内にあります-

<html>
   <head>
      <title>script.aculo.us examples</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>
   </head>

   <body>
      <div onclick = "new Effect.BlindUp(this, {duration: 5})">
         Click here if you want this to go slooooow.
      </div>
   </body>
</html>