jquery.utility.js
tx()やcreate()、isMail()などの機能を提供するjQueryプラグインです。
.create(tagName, elements)
.create() は、ほぼ .append() と似ていますが、生成する方法が異なります。
第一引数 tagName は、'div' や 'span' などのタグ名を記載します。
第二引数 elements は、生成する要素に与えるデータを Object 形式で定義します。
'css' の場合は、$(selector).css({color: 'rgb(255, 0, 0)'}) と同じ形式です。font-size などハイフンが入る値の場合は、css: {'font-size': '1.2em'} のように引用符で囲んでください。
'data' の場合は、data: {name: 'user name'} のように Object 形式で指定します。name-01 などハイフンが入る値の場合は、data: {'name-01': 'user name 01'} のように引用符で囲んでください。
また、上記以外の場合、'title/text' のようにスラッシュで区切ることで、同じ値を複数の属性に定義できます。
第一引数 tagName は、'div' や 'span' などのタグ名を記載します。
第二引数 elements は、生成する要素に与えるデータを Object 形式で定義します。
'css' の場合は、$(selector).css({color: 'rgb(255, 0, 0)'}) と同じ形式です。font-size などハイフンが入る値の場合は、css: {'font-size': '1.2em'} のように引用符で囲んでください。
'data' の場合は、data: {name: 'user name'} のように Object 形式で指定します。name-01 などハイフンが入る値の場合は、data: {'name-01': 'user name 01'} のように引用符で囲んでください。
また、上記以外の場合、'title/text' のようにスラッシュで区切ることで、同じ値を複数の属性に定義できます。
$('#create')
.create('input', {
id: 'create_input',
'placeholder/title/value': 'Fill in your name'
})
.create('a', {
id: 'a',
href: 'http://jquery.com/',
'title/html': 'A',
data: {
href: 'http://jquery.com/',
tag: function() {
return 'a';
}
},
css: {
color: 'rgb(255, 0, 0)',
'font-size': function() {
return '1.2em';
}
}
})
;
.create('input', {
id: 'create_input',
'placeholder/title/value': 'Fill in your name'
})
.create('a', {
id: 'a',
href: 'http://jquery.com/',
'title/html': 'A',
data: {
href: 'http://jquery.com/',
tag: function() {
return 'a';
}
},
css: {
color: 'rgb(255, 0, 0)',
'font-size': function() {
return '1.2em';
}
}
})
;
.tx(string)
.tx() は、要素に title と html に同じ値を入れたい場合などに使用できます。
img 要素と input 要素（type:image）に使う場合は、alt と title に string が入ります。
input 要素（type:text）、input 要素（type:search）、input 要素（type:url）、input 要素（type:tel）、textarea 要素に使う場合は、title と placeholder に string が入ります。
その他の場合は title と html に string が入ります。
強制的に上記の 2 つの属性に string が入るので、個別に指定したい場合は、.tx() を使わず、.attr() などで個別に指定してください。
img 要素と input 要素（type:image）に使う場合は、alt と title に string が入ります。
input 要素（type:text）、input 要素（type:search）、input 要素（type:url）、input 要素（type:tel）、textarea 要素に使う場合は、title と placeholder に string が入ります。
その他の場合は title と html に string が入ります。
強制的に上記の 2 つの属性に string が入るので、個別に指定したい場合は、.tx() を使わず、.attr() などで個別に指定してください。
$('body')
.find('#tx1').tx('tx1').end()
.find('#tx2').tx('tx2').end()
;
.find('#tx1').tx('tx1').end()
.find('#tx2').tx('tx2').end()
;
.changeClass(remove, add)
.toggleClass() は、あれば削除、なければ追加をしますが、.changeClass() は、強制的に第一引数を削除、第二引数を追加します。
$('#changeClass2').changeClass('blue', 'red');
.doScroll(target)
.doScroll() は、画面スクロールを行います。引数 target が以下の場合、次のような挙動になります。
- 与えられている場合：target の場所を position() で取得し、スクロールします。
- 与えられない場合：ページの一番上（x: 0, y: 0）へスクロールします。
$(document)
.on('click', '#btn_doScroll1', function() {
$().doScroll('#btn_doScroll2');
})
.on('click', '#btn_doScroll2', function() {
$().doScroll();
})
;
.on('click', '#btn_doScroll1', function() {
$().doScroll('#btn_doScroll2');
})
.on('click', '#btn_doScroll2', function() {
$().doScroll();
})
;
.isMobile(target)
.isMobile() は、アクセスしたデバイスがモバイルかどうかを UserAgent で判定します。引数 target が以下の場合、次のような挙動になります。
- 与えられない場合：iPhone/iPad/iPod/Android であるかの結果を true/false で返します。
- 'iPhone' の場合：iPhone であるかの結果を true/false で返します。
- 'iPad' の場合：iPad であるかの結果を true/false で返します。
- 'iPod' の場合：iPod であるかの結果を true/false で返します。
- 'iOS' の場合：iPhone/iPad/iPod であるかの結果を true/false で返します。
- true の場合：iPhone/iPad/iPod/iOS であるかの結果を Object 形式で返します。
var isMobile = $().isMobile(true);
$('#isMobile')
.create('p', {'title/text': 'mobile: ' + $().isMobile()})
.create('p', {'title/text': 'iPhone: ' + $().isMobile('iPhone')})
.create('p', {'title/text': 'iPad: ' + $().isMobile('iPad')})
.create('p', {'title/text': 'iPod: ' + $().isMobile('iPod')})
.create('p', {'title/text': 'iOS: ' + isMobile.iOS})
;
$('#isMobile')
.create('p', {'title/text': 'mobile: ' + $().isMobile()})
.create('p', {'title/text': 'iPhone: ' + $().isMobile('iPhone')})
.create('p', {'title/text': 'iPad: ' + $().isMobile('iPad')})
.create('p', {'title/text': 'iPod: ' + $().isMobile('iPod')})
.create('p', {'title/text': 'iOS: ' + isMobile.iOS})
;
.isMail(value)
.isMail() は、判定する値がメールアドレスかどうか（xx@xx.xx）を true/false で返します。引数 value が以下の場合、次のような挙動になります。
- 与えられている場合：与えられた value がメールアドレスかどうかの判定をします。
- 与えられない場合：$(this).val() を値として、メールアドレスかどうかの判定をします。
$(document)
.on('keyup', '#isMail', function() {
$('#result').tx('isMail: ' + $('#isMail').isMail());
})
;
.on('keyup', '#isMail', function() {
$('#result').tx('isMail: ' + $('#isMail').isMail());
})
;
.addJS(file)
.addJS() は、head 要素の一番最後に JavaScript ファイルを追加します。
$().addJS('sample.js');
.addCSS(file)
.addCSS() は、head 要素の一番最後に CSS ファイルを追加します。
$().addCSS('sample.css');
.print(target)
.print() は、console.log() を行います。引数 target が以下の場合、次のような挙動になります。
- 与えられている場合：console.log(target) を実行します。
- 与えられない場合：concole.log($(this)) を実行します。
var isMobile = $().isMobile(true);
$('#print')
.print(isMobile)
.print()
;
$('#print')
.print(isMobile)
.print()
;
確認環境
- Chrome/Safari/Firefox/Opera/IE8+
- iPhone/iPad/iPod touch/Android
サンプルの実行結果は、jquery.utility.js | Archives | Flügel でご覧ください。
「検索して選ぶ」でホテル名などを入力（セレクトメニューでカテゴリを絞ることも可能）するか、「カテゴリから選ぶ」「最寄りの施設から選ぶ」でのボタンを押すと一覧ページが表示されます。
「基本情報」では、「読み方」「（出発地からの）直線距離」「路線（駅・バス停のみ）」「Tel（ホテル・ショップのみ）」が表示されます。また、「時刻表」（駅・バス停のみ）は「駅から時刻表」（駅）・「京都市バス」（バス停）へ、「予約」（ホテル・ショップのみ）は「楽天トラベル」もしくは「るるぶ」へ、「評価」（ショップのみ）は「食べログ（掲載されている場合のみ）」へ、それぞれジャンプします。「写真」（神社仏閣・観光スポットのみ）を押すと、Google画像検索での該当施設を検索した結果が表示され、「Tel」（ホテル・ショップのみ）は電話をその場でかけられます。また、「出発地にする」を押して、出発地に指定することができます。
一覧ページで「ルートなどの詳細」を押すと、出発地から該当施設までの電車やバスによるルートや周辺地図などの詳細ページが表示されます。
「ルート」を開くと、最大3件までルート情報が表示されます。駅やバス停の情報と、路線や時刻表（駅の場合は「駅から時刻表」、バス停の場合は「京都市バス」にジャンプします）、乗り換え（ある場合）のボタンが表示されます。
「乗り換え」を押すと乗り換え元と乗り換え先をピンで示した地図を表示します。
「（該当施設）周辺地図」を開くと、該当施設周辺の地図を表示します。大きな地図で見る場合（iOSの場合は地図アプリに自動切り替え）は、「大きな地図で見る」を押してください。
「SNS連携」を開くと、TwitterとFacebookへ投稿できるエリアが表示されます。投稿したくない共有先はフリップスイッチでオフにできます。投稿するには、ナビゲーションエリア（パソコンやiPadは画面左、その他は画面下）にある「SNS連携」を開いて接続します。
詳細ページの「ルート」内の路線名を押すと、路線内の駅やバス停の一覧ページが表示されます。乗車駅・バス停は赤で、降車駅・バス停は黄で表示されます。
「乗り換え」を押すと、その駅やバス停で乗り換えられる路線が表示されます。
foursquareのExplorer機能を使って、現在地から近くの施設を探すことができます。ナビゲーションエリア（パソコンやiPadは画面左、その他は画面下）にある「SNS連携」を開いてfoursquareに接続します。
ナビゲーションエリアにある「最寄りの施設から選ぶ」内の「explorer」を押し、表示されたページで「飲食店」「カフェ」「バー」「ショップ」「美術館等」を選ぶと、結果が表示されます。電話番号が登録されている場合は、電話ボタンが表示されます。また、foursquareでのvenueページへジャンプするボタンも表示されます。
全てのページは、「このページを保存」を押すことにより、端末内のストレージに情報を保存することができます。
出発地が現在地で詳細ページを保存した場合は、次回アクセスした際の現在地からルートを計測します。
保存したページを削除したい場合は、「削除モード」を押してモードを変更し、削除したいページを押してから「削除」を押してください。