Prototype系ライブラリ サンプルプログラム
このページはAjaxライブラリの1つである
Prototypeライブラリ
系のライブラリの各種サンプルコードを掲載しています。
ミスや間違い、リンクエラーなどがありましたら
openspc@alpha.ocn.ne.jp
までお願いします。
一般的なJavaScriptに関するサンプルに関しては以下のサイトを参照してください。
JavaScript例文辞典
JavaScript例文辞典(新)
Last update : 2008/7/23 PM 3:53
2008 Copyright 古籏一浩(KaZuhiro FuRuhata)
■クイックリンク
Accordion
|
Date Picker
|
JSValidate
|
Lightbox 2
|
LightView
|
LightWindow
|
ModalBox
plotr
|
protocalendar
|
Prototabs
|
Prototip
|
Prototype
|
RefValidation
|
Script.aculo.us
■
Accordion
ライブラリを読み込む
アコーディオンを表示する
アコーディオンを縦に表示する(横にスライドし展開表示する)
展開速度を指定する
展開処理するためのイベントを指定する
最初に表示するパネルを指定する
■
DatePicker
ライブラリを読み込む
カレンダーを表示する
指定した言語でカレンダーを表示する
経過した日付/未来の日付を選択できるようにする
指定した日付形式にする
エフェクト表示時間を指定する
エフェクトを使って表示するかどうか指定する
■
JSValidate
ライブラリを読み込む
空欄チェックを行なう
数値かどうかチェックする
英字(アルファベット)かどうかチェックする
英字(アルファベット)または数値かどうかチェックする
メールアドレスのチェックを行なう
■
Lightbox2
ライブラリを読み込む
画像を個別に表示する
グループ化して画像を表示する
■
LightView
ライブラリを読み込む
画像を個別に表示する
グループ化して画像を表示する
オプションを指定する
指定した画像を表示する
指定した画像を消す
カスタムイベントの処理を行なう
■
LightWindow
ライブラリを読み込む
画像を個別に表示する
グループ化して画像を表示する
画像の表示サイズを指定する
同時に表示する枚数を指定する
他のサイトを表示する
映像などを表示する
画像をスクリプトで表示する
画像を閉じる
■
ModalBox
ライブラリを読み込む
ダイアログを表示する
HTMLデータを直接指定してダイアログ上に表示する
ダイアログのタイトルを指定する
ダイアログの幅を指定する
ダイアログを閉じる
オーバーレイ部分をクリックしても閉じないようにする
オーバーレイ部分の不透明度を指定する
ダイアログの表示速度を指定する
■
plotr
ライブラリを読み込む
グラフを表示する
棒グラフを表示する
折れ線グラフを表示する
円グラフを表示する
■
protocalendar
ライブラリを読み込む
カレンダーを表示する
カレンダーのスタイルを指定する
年月日の表示形式を指定する
年の範囲を指定する
カレンダー左側の開始曜日を指定する
テキストフィールドにまとめてカレンダーが使えるように設定する
日付と時間を指定する
■
Prototabs
ライブラリを読み込む
タブを表示する
最初に表示するタブを指定する
タブ内容を非同期通信で読み込む
■
Prototip
ライブラリを読み込む
ツールチップを表示する
ツールチップのタイトルを表示する
ツールチップの表示位置を指定する
ツールチップのオフセットを指定する
ツールチップの閉じるボタンを表示する
ツールチップのスタイルクラスを指定する
表示する際のエフェクトを指定する
■
Prototype
ライブラリを読み込む
バージョンを調べる
クラスを作成する
サーバー上のテキストデータを読み込む
サーバー上のHTMLデータを読み込む
サーバー上のXMLデータを読み込む
サーバー上のテキストデータ/HTMLデータを読み込みページ上に表示する
データの読み込みに失敗した場合にエラー処理を行なう
通信が行なわれているコネクションの数を調べる
サーバーにデータを送信する
不連続になった要素を連続した要素にまとめる
最初と最後の要素を取り出す
多次元配列を一次元配列に変換する
配列要素を検索し一致した要素の位置を返す
配列要素を逆順に並び替える
配列から特定の要素だけ削除する
配列要素をJSON形式に変換する
重複する要素を削除する
ページ上のエレメントにアクセスする
ページ上の特定のスタイルシートクラスにアクセスする
ページ上の前後にエレメントを挿入、追加する
エレメントにスタイルクラスを追加する
エレメントが空っぽの場合にメッセージを表示する
エレメントの幅を取得する
エレメントに指定したクラス名を交互に切り替える
エレメントのスタイルシートクラスを削除する
エレメントを削除する
エレメントの位置までスクロールさせる
スタイルプロパティを複数設定する
エレメントを表示する、非表示にする
繰り返し処理を行なう
null, 0, undefinedが含まれるかどうか調べる
全てのオブジェクトに対して処理を行ない結果を返す
条件に一致する要素を(すべて)返す
条件に一致する要素を返す(正規表現)
該当するデータがあるか調べる
要素を条件で分ける
条件に一致しない要素を返す
複数の配列等をまとめる
次の値を返す (1つ大きい値を返す)
指定回数繰り返す
値を16進数文字列に変換する
成功するまで処理を繰り返す
ウィンドウの幅を取得する
ウィンドウのスクロール量を取得する
テンプレート機能で置換する
指定範囲の数値/文字を生成する
数値をJSON形式に変換する
指定桁数/指定基数にする
イベントを設定する
イベントを解除する
イベント発生時のエレメントを取得する
マウスの左ボタンの押下状態を取得する
マウスのX,Y座標を取得する
イベントの伝達を停止する
フォームの最初の有効なエレメントにフォーカスする
フォーム内のエレメントをまとめてシリアライズ (URLパラメータ化)する
フォーム内の特定のエレメントの値を取得する
テキストフィールドが空欄かどうか調べる
エレメントの有効/無効を切り替える
定期的にテキストフィールドを監視する
文字列が空かどうか調べる
文字列の前後の空白/タブ/改行を削除する
空白で分割する
特定の文字列で始まっているか、終わっているか調べる
文字列を検索/置換する
文字列をパターンで置換する
クエリー文字列を変換する
HTML/XMLタグを削除する
文字列を指定文字数で省略する
■
PrototypeWindowsClass
ライブラリを読み込む
ウィンドウを表示する
ダイアログの外観を指定する
表示位置を指定する
ウィンドウサイズを指定する
ウィンドウ内に文字を表示する
ウィンドウ内に他のページを表示する
アラートダイアログを表示する
確認ダイアログを表示する
情報ダイアログを表示する
ダイアログ内に非同期通信で読み込んだデータを表示する
■
RefValidation
ライブラリを読み込む
入力チェックを行なう
日本語でエラーを表示する
空欄チェックを行なう
数値かどうかチェックする
英字(アルファベット)かどうかチェックする
英字(アルファベット)または数値かどうかチェックする
メールアドレスのチェックを行なう
URI (URL) のチェックを行なう
日付のチェックを行なう
何かが選択されているかチェックする
何かが1つ選択されているかチェックする
入力チェックで最初にエラーが出たら停止させる
入力チェックでエラーになったフィールドに自動的にフォーカスする
フォーカスアウト時にチェックを行なう
カスタム入力チェッククラスを作成する
■
Script.aculo.us
ライブラリを読み込む
必要なライブラリファイルのみ読み込む
ドラッグ可能にする
ドラッグイベントを設定する
ドラッグオブジェクトを破棄する
ドロップ可能な領域(ドロップゾーン)を設定する
フェードイン/フェードアウトさせる
マウスオーバーでハイライトさせる
ブラインドエフェクトを使って内容を表示する
マウスオーバーで内容を落下させる
内容を折り畳んで消す
拡大しながら出現させる
内容を拡大して消す
内容を拡大する
内容を縮小し消す
テレビのスイッチを消すようなエフェクトを適用する
内容を点滅させる
内容を左右に揺らす
内容を移動させる
モーフィングさせる
スライドエフェクトを適用する
指定エレメントまでスクロールさせる
複合エフェクトを適用する
変形(トランスフォーム)させる
スライダーを表示する
スライダー値を設定/取得する
スライダーの有効/無効を切り替える
項目をドラッグしてソートできるようにする
入力を補助する(オートコンプリート)
サウンドを鳴らす
■
ダウンロード
サンプルを一括ダウンロード (ZIP形式 19MB)
特定商取引に関する表記