PR
おかげさまで100社以上の企業様からダウンロードいただきました
不動産物件の掲載・管理・運営に特化したCMS。首都圏不動産公正取引協議会のインターネット広告の適正化に対応しています。
47都道府県「日本地図」のパズル
Ajaxで日本地図のパズルを作りました。
ドラッグ&ドロップで県パネルを当てはめていくゲームです。
Ajaxを利用しているので、iPhoneやiPadでも利用できます。
県の位置を学習するだけでなく、県にまつわる雑学も学習できます。
参考になりました?
運営サイト/オリジナルCMS | ダウンロードランキング | お問い合わせ
おかげさまで100社以上の企業様からダウンロードいただきました
不動産物件の掲載・管理・運営に特化したCMS。首都圏不動産公正取引協議会のインターネット広告の適正化に対応しています。
Ajaxで日本地図のパズルを作りました。
ドラッグ&ドロップで県パネルを当てはめていくゲームです。
Ajaxを利用しているので、iPhoneやiPadでも利用できます。
県の位置を学習するだけでなく、県にまつわる雑学も学習できます。
参考になりました?
canvasタグのサンプルサイト
http://serennz.sakura.ne.jp/sb/log/eid108.html
canvasタグのチュートリアル
https://developer.mozilla.org/ja/Canvas_tutorial
参考になりました?
JavaScriptで、ドラッグ&ドロップして、ドロップ先に触れたら吸着するスクリプトを作りました。
全部ドラッグ完了したら、「ドラッグ完了」というメッセージが表示されます。
カスタマイズ次第では、いろいろ使えます。利用したい方は下記よりダウンロードしてください。
また、これを応用して作ったのが「日本地図のパズル」です。
参考になりました?
JavaScriptをページ読み込みと同時に実行させる方法には2種類あります。
1つはページ全体を読み込んだあとにJavaScriptを実行させる方法と、もう一つはDOM読み込み後に実行させる方法です。DOM読み込み後に実行させる方が早く処理をしてくれます。
以下<head>タグ内に記述する方法です。
DOM読み込み直後に実行する場合は、jquery-1.2.1.min.js が必要です。下記サンプルをダウンロードするボタンからダウンロードしてください。
<!-- DOM読込み直後に実行したいJavaScript --> <script type="text/javascript"> $(document).ready(function(){ ここにスクリプトを書く ※DOM読み込み直後(ページが読み込み完了前)に実行されるので早い }); </script> <!-- ページ読込み直後に実行したいJavaScript --> <script type="text/javascript"> window.onload = function(){ ここにスクリプトを書く ※ページ(画像含む)全てロード後に実行されるので遅い }; </script> </head>
サンプルをダウンロード
参考になりました?
ドラッグ&ドロップで配置を変更できるフォトギャラリーです。フォトギャラリーだけでなく、写真を掲載するようなサイトの制作にご利用ください。
以下が仕様です。
■仕様
(1)photo.csvに記述されてあるデータを基に、画像とタイトルを一覧表示する。
(2)ドラッグ&ドロップで配置変更できる
(3)「配置を保存」ボタンクリックで、変更した配置を photo.csv に保存できる。
■注意事項
このスクリプトは個人、商用とも利用可能です。ただし、ページ下部にある「PRリンク」は削除しないようお願いします。商用利用などでどうしても見せたくない場合などは<noscript>タグで括るなどして非表示にしてください。
参考になりました?
submit(サブミット)前にJavaScriptで確認ダイアログを表示する方法
■ソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript"> <!-- function check_dialog(msg){ ret = confirm(msg); return ret; } //--> </script> </head> <body> <p>送信前にダイアログで確認</p> <form method="post" action="" onsubmit="return check_dialog('送信しますか?')"> <input type="submit" value="送信" /> <input type="hidden" name="data2" value="送信しました" /> <?=$_POST["data2"]?> </form> </body> </html>
■動作サンプル&ソースダウンロード
参考になりました?
JavaScriptを使って、<a>タグや<input type=”button”>でサブミットする方法
■ソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript"> <!-- function DisableButtonSubmit(b){ b.disabled = true; b.form.submit(); } function setSubmit(f){ document[f].submit(); } //--> </script> </head> <body> <p>buttonによる送信(二度押ししないよう非活性)</p> <form name="form1" method="post" action=""> <input type="button" value="送信" onclick="DisableButtonSubmit(this)"/> <input type="hidden" name="data1" value="送信しました" /> <?=$_POST["data1"]?> </form> <hr /> <p>Aタグによる送信</p> <form name="form2" method="post" action=""> <a href="javascript:;" onclick="setSubmit('form2')">送信</a> <input type="hidden" name="data2" value="送信しました" /> <?=$_POST["data2"]?> </form> </body> </html>
■動作サンプル&ソースダウンロード
参考になりました?
JavaScriptでフォーム内のアイテムに値をセットする方法
hidden値に値をセットして、処理を分岐させたり、いろいろ利用できます。
■ソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript"> <!-- function setform(fm, name, val){ document.forms[fm][name].value = val; } //--> </script> </head> <body> <form method="post" name="form1"> 名前:<input type="text" name="name" value="" /><input type="button" value="セット" onclick="setform('form1','name','山田')" /> </form> <form method="post" name="form2"> 年齢:<input type="text" name="age" value="" /><input type="button" value="セット" onclick="setform('form2','age','30才')" /> </form> </body> </html>
■動作サンプル&ソースダウンロード
参考になりました?
JavaScriptでフルスクリーン表示します。
普通にフルスクリーンにすると、IEとかは「閉じる」ボタンが見えなくなるまで大きくなってしまうので、
ここでは画面サイズ(幅、高さ)を算出してそのサイズに表示するようにしました。
■ソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript"> <!-- function openFullScreen(url, wname){ newwindow = window.open(url, wname, "resizable, scrollbars,width=" + window.screen.width + ", height=" + window.screen.height); newwindow.moveTo(0,0); newwindow.focus(); } //--> </script> </head> <body> <p><a href="javascript:;" onclick="openFullScreen('http://www.google.co.jp', 'win')">フルスクリーン</a></p> </body> </html>
■動作サンプル&ソースダウンロード
参考になりました?
<head>~</head>の間に書く書式
外部JavaScriptファイルの読み込み
<script type="text/javascript" src="abc.js"></script>
HTML内に書くとき
<script type="text/javascript"> <!-- function abc(){ ここに内容 } // --> </script>
参考になりました?
運営サイト/オリジナルCMS | ダウンロードランキング | お問い合わせ