スポンサーサイト

--.--.-- --:--|スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【HP作成】ナビゲーションメニューのテンプレート化【JavaScript】

2014.09.02 21:37|雑記
まだまだ浅い知識ですが、覚え書き程度にまとめて置きます。
 
今回行うのは、ナビゲーションメニューのテンプレート化。(サンプルHTML
ナビゲーションメニューとは"コレ"のこと。
html.jpg

どういうものかわかったところで早速やっていきましょう。

まずは今回のスクリプトでは"jQuery"を使うので公式サイトからJSファイルをダウンロードしておきましょう。
http://jquery.com/


次にメインのHTMLファイルの作成、今回はこんな感じでタグを書いておきます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="ja">
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<link rel="stylesheet" href="css/style.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/template.js">
</script>
<title>Navi</title>
</head>
<body>
<div id="header">ヘッダー</div>
<div id="mainbox">
    <div id="leftbox">
        <div class="left"><div id="list"></div></div>
    </div>
    <div id="rightbox">
        <div class="right">右ボックス</div>
    </div>
</div>
<div id="footer">フッター</div>
</body>
</html>

JSファイルは"jQuery"の方を最初に読み込むようにしてください。
ここで重要なポイントですが、メニューを入れる場所にはidなどを設定しておきましょう。(今回はid="list"で設定)


ではテンプレ用HTMLの中には、上記のメニュー挿入場所に書くはずだった内容を書き込んでおきます。

<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>

"<html>~"などは省いて良いです)
ファイル名を"list.ht"で保存。
保存方法は必ず文字コード"UTF-8"で保存してください。
スクリプトの関係上、UTF-8以外では文字化けします。


それでは次はJSファイルの作成です。
メモ帳やエディターで下記の様にスクリプトを組みます。

$(function(){
    var root;
    var scripts = document.getElementsByTagName("script");
    var i = scripts.length;
    while (i--) {
        var match = scripts[i].src.match(/(^|.*\/)template\.js$/);
        if (match) {
            root = match[1];
            break;
        }
    }
$("#list").load(root + "../template/list.ht");
});

ファイル名は"template.jsで保存します。
保存が完了したらファイルは各フォルダに入れておきます。
(JSファイルはJSフォルダへ、テンプレ用HTMLはtemplateフォルダへ)


以上が完了したら、メインのHTMLファイルを開いてみてください。
するとJavaScriptが動作していれば、idを設定したところにテンプレHTMLの中身が反映されているかと思います。

ちなみにテンプレ用HTMLは拡張子"html"ではなく"ht"と適当な形式で保存しています。
なぜかというと、FC2ホームページなどの無料サービスではhtmlファイルには自動で広告を挿入しようとするので、
想定している表示とは異なった表示になることがあり、うまく表示されません。
なので、html形式と認識されないようにこのような形をとっています。
スポンサーサイト

テーマ:webサイト作成
ジャンル:コンピュータ

タグ:PC HTML JavaScript 覚え書き 解説

Comment

非公開コメント

| 2017.10 |
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 - - - -
プロフィール

しろねこ

Author:しろねこ
適当に思いついたことをまとめていく日々。

検索ワードでこのページへ辿り着いた方へ。
内容が無いような記事ばかりで申し訳

最新記事

最新コメント

最新トラックバック

月別アーカイブ

カテゴリ

アクセスカウンター

検索フォーム

RSSリンクの表示

リンク

ブロとも申請フォーム

この人とブロともになる

QRコード

QR

ページトップへ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。