運営サイト／オリジナルCMS | ダウンロードランキング | お問い合わせ
SNS や 会員制サイト の構築に利用された実績のある 「ログインシステム」 を、システム単体としてパッケージ化しました。
運営中や、新規制作のホームページ に 簡単にログイン機能 をつけることができます。
Ajaxで日本地図のパズルを作りました。
ドラッグ＆ドロップで県パネルを当てはめていくゲームです。
Ajaxを利用しているので、iPhoneやiPadでも利用できます。
県の位置を学習するだけでなく、県にまつわる雑学も学習できます。
参考になりました？
canvasタグのサンプルサイト
http://serennz.sakura.ne.jp/sb/log/eid108.html
canvasタグのチュートリアル
https://developer.mozilla.org/ja/Canvas_tutorial
参考になりました？
JavaScriptで、ドラッグ＆ドロップして、ドロップ先に触れたら吸着するスクリプトを作りました。
全部ドラッグ完了したら、「ドラッグ完了」というメッセージが表示されます。
カスタマイズ次第では、いろいろ使えます。利用したい方は下記よりダウンロードしてください。
また、これを応用して作ったのが「日本地図のパズル」です。
参考になりました？
JavaScriptをページ読み込みと同時に実行させる方法には２種類あります。
１つはページ全体を読み込んだあとに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>
サンプルをダウンロード
参考になりました？
ドラッグ＆ドロップで配置を変更できるフォトギャラリーです。フォトギャラリーだけでなく、写真を掲載するようなサイトの制作にご利用ください。
以下が仕様です。
■仕様
（１）photo.csvに記述されてあるデータを基に、画像とタイトルを一覧表示する。
（２）ドラッグ＆ドロップで配置変更できる
（３）「配置を保存」ボタンクリックで、変更した配置を 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>Ａタグによる送信</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 | ダウンロードランキング | お問い合わせ