jQueryを利用してwebアプリケーションのようなものを作っていきます。
シームレスにコンテンツを切り替えて同一ページにて複数のコンテンツを展開させます。
jQueryを使用していますが、スマートフォンにも使えると思います。
jQeryの設定
まずはじめにjQueryをダウンロードします。基本的にjQueryを使用する際には『圧縮版』を使用します。これは、変数名を短くし、コメントや空白、改行とを削除したもので、『Minfied』と呼ばれる方法を採用しています。これはファイルサイズを軽くすることで、読み込みを早くするためだからです。したがって、jQueryをダウンロードする際は、圧縮版を利用します。
現在のjQueryのバージョンは『1.5.2』です。
コードの記述
次にコードを記述していきます。
まずプラグインとなるjavascriptを記述します。
var id2 = "";
$(function(){
$("#index1").hide();
$("#index2").hide();
$("#index3").hide();
$("#index4").hide();
$("#index5").hide();
$("#index6").hide();
$("#index7").hide();
$("#index8").hide();
id2 = "index0";
tab = getUrlVars()["tab"];
if (tab){
chenge(tab);
}
})
function chenge(id){
$("#" + id).fadeIn("slow");
$("#index0").hide();
id2 = id;
}
function closetab(id){
$("#" + id).hide();
$("#index0").fadeIn("slow");
id2 = "index0";
}
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i <hashes.length; i++)
{
hash = hashes[i].split('=');
vars[hash[0]] = hash[1];
}
return vars;
}
各コンテンツのリンクをリストにて実装します。
併せてjQueryのプラグインの読み込みも設定します。
このとき複数のリンク設定をするときは、以下のscriptを追加してください。
3つになる場合はchange3、と追記してください。
function chenge2(id){
$("#" + id).fadeIn("slow");
$("#" + id2).hide();
id2 = id;
}
次にコンテンツを作っていきます。
はじめに、最初に表示されるコンテンツを作成します。
これは『index0』とします。
次に非表示のコンテンツを作成します。
コンテンツjavascriptを設定したときにしていした、"index1"、"index2"と表示させるコンテンツにidを指定していきます。
Index1
sampleTitle
<p>sampleText samoleText</p>Index2
sampleTitle
<p>sampleText samoleText</p>また、『close_bt』は、表示されているコンテンツを非表示にし、初期状態に戻す指定です。
以上で準備は完了です。
動作環境は、IE７、IE８、FireFox4、Safari5、GoogleChrom10、Opera10.51で動作を確認しています。IE6でも動くと思いますが、確認はしていません。
ダウンロードはユーザー様の責任で行ってください。
なにか問題が発生した場合でも、当サイトでは責任を負いかねますので、予めご了承ください。
上記をご承知の方のみ、以下よりダウンロードしてください。
もう少しjavascriptの部分をうまく書く方法があると思いますが。。。
なにか間違いがございましたら、ご指摘頂ければ幸いです。
宜しくお願い致します。
ほぼ１年ぶりの更新になってしまいまいました。
せめて２週間に１度更新できるようにがんばってみます。
