FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【javascript】 LightWindowを使ってフォーム画面を作成する(prototype.js利用)

グループウェアソフトaipoなどで利用されており、
リンクをクリックするとその画面上に別画面が出てきて、入力フォームやスライドショーが出来るようになるjavascript LightWindow


LightWindow デモページ


LightWindowは導入が簡単で、割かしさくさく動くので利用しやすい。
LightWindowのすごいところは、pdf,swf,htmlなどなんでも表示できるところ。

以下に使い方を示す。
1.LightWindowよりダウンロード(下部)
2.javascriptとcssにパスを通す jsを読み込み順番は下記の通りにしないと動かない

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

<link rel="stylesheet" href="css/lightbox.css" _fcksavedurl=""css/lightbox.css"" _fcksavedurl=""css/lightbox.css"" type="text/css">


3.classとparamsを指定する

<a href="/リンク先url" class="lightwindow page-options" params="lightwindow_type=external,lightwindow_width=650,lightwindow_height=590">リンク</a>



青文字の部分を入れないと、html表示が上手く出来ない。
デモページには書いておらず、更に参考サイトもなかったため、ここでかなりつまった。
html表示が上手く動作しない場合は、上記を試してみて欲しい。



ちなみに、LightWindowはiframeで表示しているため、注意が必要。


送信フォームをlightwindowで表示させて、
親画面(表示ページ)にフォーム内容を反映させたい場合はリンク先を、

href= "javascript:parent.location.reload();"




で親ページを更新する事が出来る。



流れ

親画面 → リンク先(LightWindowで表示) フォーム画面 → 
送信したらLightWindowを閉じる → フォームで送信された内容を親ページに反映させて表示



親ページを更新すると当然だが、LightWindowも閉じる。
これで、LightWIndowを利用した送信フォームが実装できる。



参考サイト
ゼロからはじめるLightWindow 2.0 - Flashムービーも表示できるAjaxライブラリ
スポンサーサイト

トラックバック


この記事にトラックバックする(FC2ブログユーザー)

コメントの投稿

Private :

カウンター
   
プロフィール

glasses

Author:glasses
物事をすぐ忘れる自分のためのブログ。

カテゴリ
カレンダー(月別)
09 ≪│2018/10│≫ 11
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -
最新記事
最新コメント
検索フォーム
リンク
サービス
track feed track あわせて読みたいブログパーツ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。