先日リニューアルした「
京巡りガイド」の開発時に派生してできた「jquery.utility.js」を公開しました。
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' のようにスラッシュで区切ることで、同じ値を複数の属性に定義できます。
$('#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';
}
}
})
;
.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() などで個別に指定してください。
$('body')
.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）へスクロールします。
$().mobile() で true と判定された場合は、上記の場所へのスムーススクロールのアニメーション無しのジャンプになります。
$(document)
.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})
;
.isMail(value)
.isMail() は、判定する値がメールアドレスかどうか（xx@xx.xx）を true/false で返します。引数 value が以下の場合、次のような挙動になります。
- 与えられている場合：与えられた value がメールアドレスかどうかの判定をします。
- 与えられない場合：$(this).val() を値として、メールアドレスかどうかの判定をします。
$(document)
.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()
;
確認環境
- Chrome/Safari/Firefox/Opera/IE8+
- iPhone/iPad/iPod touch/Android
サンプルの実行結果は、
jquery.utility.js | Archives | Flügel でご覧ください。
