jqueryを使ってjsonを読み込むサンプル

Webデザイン

jqueryを使ってjsonを読み込むサンプルです。
階層深い場合も参考になるかと思います。

test.json

{
"test": "中間テスト",
"date": "2012/7/10",
"data": [{
"name": "neko",
"class": "A",
"score": [
{ "japanese": 100,
"math": 50,
"english": 80
}
]
},
{
"name": "hana",
"class": "B",
"score": [
{ "japanese": 60,
"math": 90,
"english": 20
}
]
}]
}

 

test.js

$(function() {
var url = 'test.json';
window.onload = function(){
fncJson();
}
function fncJson (){
var htmlData = "";
$.getJSON(url, function(json){
htmlData += "</p>
<h1>" + json.test + "</h1>
<p>" + json.date + "</p>
<p>";
for(var i in json.data){
htmlData += "</p>
<p>" + json.data[i].name + json.data[i].class + "</p>
<p>";
for(var j in json.data[i].score){
htmlData += "</p>
<p>国語:" + json.data[i].score[j].japanese + "</p>
<p>" +
"</p>
<p>数学:" + json.data[i].score[j].math + "</p>
<p>" +
"</p>
<p>英語:" + json.data[i].score[j].english + "</p>
<p>";
}
}
$("#jsTest").append(htmlData);
});
}
});

 

index.html

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="test.js"></script></p>
<div id="jsTest">
</div>
<p>

jQuery Mobileのページ切替効果を逆回しにする

Webデザイン

jQuery Mobileのページ切替効果を逆まわしにする方法です。

スライドの場合、左から右へのアニメーションですが、
これを指定することによって右から左へアニメーションするようになります。

指定したいリンクに data-direction=”reverse” を設定してあげるだけ


このような指定でできます。

ブラウザバックすると、デフォルトでアニメーションは逆回りになりますが、
戻るボタンなどを設置している場合は、この指定をしてあげたほうが自然な表現になります。

jQuery Mobileのページ切替効果を無効にする方法

Webデザイン

jQuery Mobileのページ切替効果を無効にする方法です。

デフォルトだと、全てのリンクにslideのアニメーションが適応されています。

jQuery Mobileのjsを1ページにしか入れていなくても、
遷移していくと他のページにも引き継がれてっちゃうんですよね。。

無効にしたいリンクに data-ajax=”false” をつけると効果が適応されなくなります。


これで無効にできます。

遷移先に効果が引き継がれていくこともありません。

jQuery Mobileを使って遷移させようとすると、簡単にできるのですが、
重くなっちゃうのですよね。。
必ずloadingて出ちゃいます。

もっと軽くなっていってほしいですね。

jsのif文の省略

Webデザイン

jsでのif文の省略について書いていきます。
省略系はほぼ暗号なので、知らないとまず読めませんよね。。

まずtrueの判定についてです。
trueの判定は型により異なります。

Number型 : 値が 0 または NaN で false
String型 : 空のとき、「””」のときは false
Undefined型, Null型は false

以下はtrueのときに通すものです。

var test = 1_;
if(test){
alert("true");
}

アラートで true が出ます。

{}も省略できます。
ただしステートメントが 2行以上続くときは省略できません。

var test = 0;
if(test)
alert("OK");
else
alert("NG");

さらに省略
三項演算子というものです

var test = 1;<br />
(test<5)? mes="OK" : mes="NG" ;
alert(mes);

trueかfluseのときは()も省略できます。

var test = 1;
test? mes="OK" : mes="NG" ;
alert(mes);

そのまま変数に入れることもできます。便利。

var test = 1;
var mes = (test)? "OK" : "NG" ;
alert(mes);

以下のように、配列を出し分けることもできます。

var test = 1;
var arr = ["trueだよ","falseだよ"];
alert( arr[test?0:1] );

こちらはアラートで trueだよ と出ます。
test が true の値なら、arr[0] を出し、
そうでなければ arr[1] を出すという条件式ですね。

コード量が減り、括弧の閉じ忘れなどのミスは減るかもしれません。
ただし運用面で適しているのか、複数人で作業するときは他の人も分かりやすいか、、
などはルールを決めた方がよさそうですね。

jsでclassを取得

Webデザイン

html内のclassを取得します。

testというclassがある場合の処理です。

var sample = document.getElementsByClassName("test");
alert("testの数:"+sample.length);
for (var i=0; i<sample.length; i++){
sample[i].style.border = "solid 1px red";
}

アラートでtestの数を出して、
classにtestが指定されているモジュールに赤い枠線をつけます。

classは配列になるので、sample[0]というかたちで操作します。

idと違って、何個も指定できるのがいいですね。

ただしこちらのclassの取得、スマホではきくようですが、IEでは効かないです。

解決法はこちらに載っていました。
▽JavaScript から HTML Element の class 属性を取得する方法
http://d.hatena.ne.jp/vividcode/20100327/1269724469

 

jsで全角を半角に直す

Webデザイン

フォームに数字を入れてもらう場合、
数字を半角で管理したい、ということありますよね

入力制限などで、ユーザに半角を入力してもらうことも可能ではありますが
とてもめんどう。。
全角になっているというだけで、エラーが出てしまっては、離脱の原因にも

全角が入力されたとしても、システムで半角に直してあげるほうがユーザには優しいですよね

ということで、jsで全角文字を半角に直す方法です。

<input onkeyup="textChange(this)">
<script type="text/javascript">
var half = '0123456789';
var em = '0123456789';
function textChange(obj){
if(typeof(obj.value)!="string")return false;
var text = obj.value;
for( i=0; i<em.length; i++ ){
var regex = new RegExp(em[i],"gm");
text = text.replace(regex,half[i]);
}
obj.value = text;
}
</script>

処理の流れは以下のようなかんじです。
2つの配列に、対応するように全角と半角を入れます。
入力された文字が、全角の配列の文字と一致するか比べます。
一致したら、半角の配列の中の、対応した数値と置換します。

RegExpはマッチングをみる際に正規表現にする指定です。
gmは、以下の項目を元に指定されています。

 オプション   説明
 g   全文検索を行う
 i   大文字、小文字の区別無くマッチする 
 m   複数行のマッチに対応する 

replaceは文字置換です。
replace(置換前, 置換後);
のように使います。

アルファベットでも同じことがしたい、という場合、
配列にアルファベットも追加してあげればできます

 

jsで指定箇所のテキストを変更

Webデザイン

いつも忘れる、jsの基本
指定箇所のテキストを変える方法です。

<div id="test">テキスト</div>
<p><button onclick="fncChange()">テキストを変更</button>
<script type="text/javascript">
function fncChange(){
var change=document.getElementById("test");
change.innerHTML="変更!";
}
</script>

idがtest内のテキストを変更します。

buttonのonclick=”fncChange()で、
クリックしたときにfncChangeを動かす指定をしています。

fncChange内で、変数changeにidを指定します。
change.innerHTMLで書き出します。
innerHTMLはタグも使えます。

 

スマホサイトでアドレスバーを消す

Webデザイン

スマホサイトで、アドレスバーを消す方法です
これによってファーストビューを多めに確保できます

function doScroll() { if (window.pageYOffset === 0) { window.scrollTo(0,1); } }
window.onload = function() { setTimeout(doScroll, 100); }

Y方向に1pxでも動いていると、アドレスバーが消えるようです
iPhone用に実行するタイミングをずらしています

外部jsに入れて、全ページ共通で読み込むとよいですね