Ajax・jquery

プラグイン不要のjquery簡単スクロールトップ

jqueryのプラグインを使わず簡単なjavascriptとcssで実現可能。

サンプルページ

まずはjqueryを読み込む

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

一定の範囲スクロールしたらボタンを表示させ、クリックでページトップへスクロールするjavascriptを読み込む

JAVASCRIPT

<script type="text/javascript">
$(function(){
$('#top-link').hide();
$(window).scroll(function(){
if($(this).scrollTop() > 50){
$('#top-link').fadeIn(1000);
}else{
$('#top-link').fadeOut(500);
}
});
$("#top-link").click(function(){
$('html, body').animate({scrollTop:0},300);
});
});
</script>

解説

スクリプト内の数字「50」は、ページが何ピクセルスクロールされたら処理を行うかの数値
スクリプト内の数字「1000」はボタンがフェードインする速度
スクリプト内の数字「500」はページトップでボタンがフェードアウトする速度
スクリプト内の数字「300」はスクロールする速度

ボタンを表示させたままで構わなければもっと簡単

<script type="text/javascript">
$("#top-link").click(function(){
$('html, body').animate({scrollTop:0},500);
});
</script>

スタイルシートも単純 サンプルではグレイの四角ボタンにしているが、テキスト表示や画像で構わなければもっと簡単

CSS

<style>
#top-link{
position:fixed;
right: 10px;
bottom: 30px;
padding:10px 0px;
width: 100px;
text-align:center;
color:#fff;
cursor:pointer;
cursor:hand;
background-color:#ccc;
}
</style>

ボタンの設置も簡単 Page Topのボタンはbody内のどこに記述しても構わない。

HTML

<div id="top-link">Page Top</div>

 

マウスオーバーするとラインがついてくるメニューの作り方

メニューの各項目にマウスオーバーすると、下にあるラインが「ピョ〜ン」とそのメニュー幅になりつつ移動してきて「ボヨヨ〜ン」となるメニューを作りたい時はこの方法。
何を言ってるのか分からない、という人は以下のサンプルページでメニューにマウスオーバーしてもらえれば意味が分かるはず。

サンプルページ

使うのはjqueryとエフェクト用のjquery.easing

設置方法

「jquery.easing.1.3.js」は以下のリンクからダウンロード
http://gsgd.co.uk/sandbox/jquery/easing/

「jquery-1.11.0.min.js」はjquery.comから呼び出す。
「jquery.easing.1.3.js」はjsフォルダ内に置いた場合。

まずはページにjavascriptの呼び出しを挿入

JAVASCRIPT

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="./js/jquery.easing.1.3.js"></script>

同様に、ラインがついてくるようにするためのスクリプトも挿入

<script>
$(function(){
$('#menu span').css({
width:$('#menu .current').outerWidth(),
left:$('#menu .current').position().left
});
$('#menu a').mouseover(function(){
$('#menu span').stop(true).animate({width:$(this).outerWidth(),left:$(this).position().left},1000,'easeOutElastic');
});
});
</script>

レイアウトのためのスタイルシートを挿入 #menuのwidthや#lineboxのwidth等はメニューの個数やページサイズに合わせる

CSS

<style>
#menu {
position: relative; 
margin: 0px auto 0px auto;
padding: 0;
text-align:center;
width: 400px;
}
#menu a {
padding:10px 20px;
color:#999;
text-decoration:none;
}
#menu span {
display:block;
position:absolute;
margin-top:0px;
left:0;
width:50px;
height:5px;
background:#666;
}
#linebox {
margin: 15px auto 0px auto;
width:460px;
height:5px;
background:#eee;
}
</style>

メニュー部分のHTMLは

HTML

<div id="menu">
<a href="#">menu1</a>
<a href="#" class="current">menu2</a>
<a href="#">menu3</a>
<a href="#">menu4</a>
<div id="linebox"><span></span></div>
</div><!-- menu -->

マウスが無い状態で、currentの項目にラインが表示されるから、例えば「menu2のページのメニューはmenu2にclass=”current”を入れる」。

<div id="linebox"><span></span></div>

の部分はjavascriptによりラインが書き出される。

jQuery Mobileの最新版 jQuery Mobile 1.4の主な変更点は

スクリーンショット 2014-02-10 14.17.21

jQuery Mobile の最新版 jQuery Mobile 1.4が正式版となりました。

http://blog.jquerymobile.com/2013/12/23/jquery-mobile-1-4-0-released/

主な変更点としては、1.4アルファ版でアナウンスされていたものが実施されている。

いままでのjQuery MobileではHTMLに多数のDIVタグなどが自動的に追加されていたが、性能向上のため1.4ではDIVタグの追加が抑えられる

SVG化によりRetinaでもなめらかなアイコン表示
http://demos.jquerymobile.com/1.4.0/icons/

jQuery Mobile 1.4.0 では従来のテーマが存在せず、デフォルトのテーマ(light、dark)がフラットデザインに
http://demos.jquerymobile.com/1.4.0/theme-default/

ローカルストレージで複数の値を保存したい時(JSON)

ローカルストレージで複数の値を保存したい時、最も簡単なのはそれぞれの名前で複数のデータを保存すること
例えば以下の方法。

Javascript

<script type="text/javascript">
//複数のローカルストレージに保存
function setConfig(){
var n = document.getElementById("na").value;
var t = document.getElementById("te").value;
var a = document.getElementById("ad").value;
localStorage.setItem('onamae',n);
localStorage.setItem('tel',t);
localStorage.setItem('address',a);
alert("保存しました");
}
</script>
上記の方法は、保存データがそれぞれ多い場合はそれでも構わないが、少ないデータで無駄に多種類のデータを保存するのは好ましい方法とは言えない。

ローカルストレージに複数の値を保存するにはいくつか方法があるが、今後の展開をふまえてJSON形式で保存する方法を紹介する。
そのまま使えるサンプルになっているから、適所にコピーして自由に改造して使ってもらいたい。

なお、今回も以下のサンプルではjqueryを使うことを前提としているから、まずはヘッダーでjqueryを読み込んでおくこと。

html

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
Javascript
<script type="text/javascript">
//ローカルストレージに保存
function setConfig(){
var n = document.getElementById("na").value;
var t = document.getElementById("te").value;
var a = document.getElementById("ad").value;
//保存データ
var datalist = {onamae:n,tel:t,address:a}
//ローカルストレージに保存
localStorage.setItem('config', JSON.stringify(datalist));
alert("保存しました");
}
//ローカルストレージを削除
function removeConfig(){
na.value = '';
te.value = '';
ad.value = '';
localStorage.clear();
alert("削除しました");
}
//ローカルストレージから取得
function getConfig(){
if(localStorage.getItem("config")){
var d = JSON.parse(localStorage.getItem("config"));
na.value = d.onamae;
te.value = d.tel;
ad.value = d.address;
}
}
//ページ読み込み時にローカルストレージから取得
$(document).ready(function(){
getConfig();
});
</script>
html
お名前<input type="text" id="na" />
電話番号<input type="text" id="te" />
住所<input type="text" id="ad" />
<button id="button" onclick="setConfig()">保存</button>
<button id="button" onclick="removeConfig()">すべて削除</button>

html5の機能、ローカルストレージを使いたい時

html5のローカルストレージはとても簡単に使えて便利。わざわざ仕組みを解説するより、なるべく単純でそのまま使えるサンプルを記載しておくから、コピーして必要な箇所を変更して使ってもらいたい。
PCから試す時はGoogleのChrome等、html5に対応したブラウザを使うこと。下のサンプルの場合、好きな名前を入力して保存ボタンをクリックした後、リロードしたり別のページを読み込んだ後に戻るとデータが保存されていることが確認できる。

なお、以下のサンプルではjqueryを使うことを前提としているから、まずはヘッダーでjqueryを読み込んでおくこと。

html

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

ローカルストレージは同じ名前で空の内容を上書きすることで見かけ上削除された状態には出来るが、完全に削除したいと思うユーザーもいるから、削除ボタンのサンプルも一緒に載せておく。

Javascript

<script type="text/javascript">
//ローカルストレージに保存
function setConfig(){
var na = document.getElementById("na").value;
localStorage.setItem('name',na);
alert("保存しました");
}
//ローカルストレージを削除
function removeConfig(){
na.value = '';
localStorage.clear();
alert("削除しました");
}
//ローカルストレージから取得
function getConfig(){
config_na = localStorage.getItem('name');
na.value = config_na;
}
//ページ読み込み時にローカルストレージから取得してテキストボックスに表示
$(document).ready(function(){
getConfig();
});
</script>

html

お名前<input type="text" id="na" />
<button id="button" onclick="setConfig()">保存</button>
<button id="button" onclick="removeConfig()">すべて削除</button>

なお、スマートフォンなどHTML5に対応している可能性が高い環境はこれだけで良いが、PC環境の場合は、まだローカルストレージに対応していないブラウザでアクセスされることが多いだろう。
そんな時は下のようなサンプルで、アラートを出すか、サンプルを参考に条件分けをして処理を分岐するといい。

Javascript

if(typeof localStorage == 'undefined'){alert("ローカルストレージが使えません");}

 

Javascriptで引数からセレクトメニュー(プルダウンメニュー)を選択状態にしたい時

前回、Javascriptでセレクトメニュー(プルダウンメニュー)が変更されたらGETで送信する方法を書いたが、引数付きでジャンプした際、セレクトメニューはデフォルトの一番上が選択された状態に戻ってしまう。

PHP等の場合は、セレクトメニューを書き出す際にselectedを付加して書き出せば良いが、.htmlの場合はJavascriptで処理する。
例えば以下URLの場合

http://www.digital-gate.com/?c=2&g=1

下のHTMLを見れば分かるが、通常何もしない状態ではそれぞれのプルダウンは「全クラス表示」「全グループ表示」となるが、それでは表示されているであろう内容と合わないから「c」のプルダウンが「2組」、「g」のプルダウンが「グループ1」が選択された状態にしたい。

URLの引数を取得して、プルダウンメニューが選択された状態になるようにする方法は以下のサンプル

Javascript

function getVars(){
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.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}

上記Javascriptを使うと引数から設定値を簡単に取得出来る。

class = getVars()["c"];
group = getVars()["g"];

使い方はこんな感じ。

あとはjqueryを使ってプルダウンの選択を変更するだけ。
※別途jqueryを読み込んでおくこと。

$('#class-items').val(class);
$('#group-items').val(group);

具体的にはこんな感じ。

HMTL

<form method="get" action="" name="form">
<select name="class" onChange="multipleNavi()" id="class-items">
<option value="0">全クラス表示</option>
<option value="1">1組</option>
<option value="2">2組</option>
</select>
<select name="group" onChange="multipleNavi()" id="group-items">
<option value="0">全グループ表示</option>
<option value="1">グループ1</option>
<option value="2">グループ2</option>
</select>
</form>

jquery mobileのトグルスイッチ・スライダーをjavascriptから切り替えたい時

前回のエントリはjquery mobileでプルダウンを選択状態にしたい時だが、同様にjavascriptを使ってデータを取得したり、フォルダや引数からデータを取得したものをトグル・スライダーの表示に反映させたいことも多いはず。
トグルボタン・トグルスイッチ・スライダーを、javascriptを使い取得した値に合わせて選択済にさせる方法は以下のサンプルを参考にすると良い。

html

<form>
<select name="slider" id="toggle" data-role="slider" onChange="navi(this)">
<option value="stop">停止中</option>
<option value="start">送信中</option>
</select>
</form>

javascript

<script type="text/javascript">
//選択済にしたい項目のvalue
var co = 2;
//トグルメニューをセットする
$('#toggle').val(co);
//jquery mobile用の処理
$('#toggle').slider('refresh');
</script>

最後の

$('#toggle').slider('refresh');

がポイント

jquery mobileでプルダウンを選択状態にしたい時

javascriptを使ってデータを取得したり、フォルダや引数からデータを取得したものをフォームのプルダウンメニューに反映させたいことは多いはず。
javascriptを使いセレクトメニューを選択済にする方法はいろいろなサイトで公開されているのから困らないが、通常のjavascriptで選択状態にするだけでは、jquery mobileを使っている場合に反映されない。

jquery mobileを使用する環境でjavascriptを使って任意のプルダウンメニューを選択状態にしたい時は以下のサンプルを参考にすると良い。

HTML

<form method="get" action="" id="select">
<select name="menu" id="course">
<option value="">選択してください</option>
<option value="1">セレクト1</option>
<option value="2">セレクト2</option>
<option value="3">セレクト3</option>
<option value="4">セレクト4</option>
<option value="5">セレクト5</option>
</select>
</form>

javascript

<script type="text/javascript">
//選択済にしたい項目のvalue
var co = 2;
//該当するselectのIDにセット
$('#course').val(co);
//jquery mobile用の処理
$('select').selectmenu('refresh',true);
</script>

最後の

$('select').selectmenu('refresh',true);

がポイント