運営サイト/オリジナルCMS   |   ダウンロードランキング   |   お問い合わせ

PR

ログインシステム制作パック(格安の9,800円!)

ログインシステム制作パック(格安の9,800円!)

SNS や 会員制サイト の構築に利用された実績のある 「ログインシステム」 を、システム単体としてパッケージ化しました。
運営中や、新規制作のホームページ に 簡単にログイン機能 をつけることができます。

47都道府県「日本地図」のパズル

Ajaxで日本地図のパズルを作りました。

ドラッグ&ドロップで県パネルを当てはめていくゲームです。

Ajaxを利用しているので、iPhoneやiPadでも利用できます。

県の位置を学習するだけでなく、県にまつわる雑学も学習できます。

47都道府県「日本地図」のパズル

参考になりました?

Filed under: Ajax,JavaScript,便利なツール — admin 21:50  Comments (0)

JavaScript canvasタグのサンプル

canvasタグのサンプルサイト

http://serennz.sakura.ne.jp/sb/log/eid108.html

canvasタグのチュートリアル

https://developer.mozilla.org/ja/Canvas_tutorial


参考になりました?

Filed under: JavaScript,技術ノウハウサイト — admin 19:41  Comments (0)

JavaScriptドラッグ&ドロップ&吸着

JavaScriptで、ドラッグ&ドロップして、ドロップ先に触れたら吸着するスクリプトを作りました。

全部ドラッグ完了したら、「ドラッグ完了」というメッセージが表示されます。

カスタマイズ次第では、いろいろ使えます。利用したい方は下記よりダウンロードしてください。

また、これを応用して作ったのが「日本地図のパズル」です。

参考になりました?

Filed under: Ajax,JavaScript — admin 00:16  Comments (0)

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>

サンプルをダウンロード


参考になりました?

Filed under: JavaScript — admin 09:55  Comments (0)

ドラッグ&ドロップで配置が変更できるフォトギャラリー

ドラッグ&ドロップで配置を変更できるフォトギャラリーです。フォトギャラリーだけでなく、写真を掲載するようなサイトの制作にご利用ください。

以下が仕様です。

■仕様
(1)photo.csvに記述されてあるデータを基に、画像とタイトルを一覧表示する。
(2)ドラッグ&ドロップで配置変更できる
(3)「配置を保存」ボタンクリックで、変更した配置を photo.csv に保存できる。

■注意事項
このスクリプトは個人、商用とも利用可能です。ただし、ページ下部にある「PRリンク」は削除しないようお願いします。商用利用などでどうしても見せたくない場合などは<noscript>タグで括るなどして非表示にしてください。

参考になりました?

Filed under: Ajax,JavaScript,PHP — admin 11:07  Comments (0)

サブミット前にダイアログで確認メッセージを出す

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>

■動作サンプル&ソースダウンロード


参考になりました?

Filed under: JavaScript,忘れっぽいのでメモる — admin 15:02  Comments (0)

aタグやbuttonでサブミットする

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>

■動作サンプル&ソースダウンロード


参考になりました?

Filed under: JavaScript,忘れっぽいのでメモる — admin 13:07  Comments (0)

JavaScriptでフォーム内のアイテムに値をセット

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>

■動作サンプル&ソースダウンロード


参考になりました?

Filed under: JavaScript,忘れっぽいのでメモる — admin 11:58  Comments (0)

JavaScriptでフルスクリーン表示

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>

■動作サンプル&ソースダウンロード

 

参考になりました?

Filed under: JavaScript,忘れっぽいのでメモる — admin 11:04  Comments (0)

JavaScriptの書式

<head>~</head>の間に書く書式

 

外部JavaScriptファイルの読み込み

<script type="text/javascript" src="abc.js"></script>
 

HTML内に書くとき

<script type="text/javascript">
<!--
function abc(){
  ここに内容
}
// -->
</script>
 

参考になりました?

Filed under: JavaScript,忘れっぽいのでメモる — admin 23:42  Comments (0)

運営サイト/オリジナルCMS   |   ダウンロードランキング   |   お問い合わせ