ゆたんぶろぐ

気が向いたら書いてます

「jquery.utility.js」を公開しました

application

先日リニューアルした「京巡りガイド」の開発時に派生してできた「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()
;

確認環境


サンプルの実行結果は、jquery.utility.js | Archives | Flügel でご覧ください。