前書き
jQueryでレスポンシブなサイトを構築するときに困るのは，jQueryのプラグインを使うときだろう．
jQueryのプラグインを導入するとき，多くのサイズ指定がpx指定で，「％」指定に対応していないことがあげられる．
こうなると，別のjQueryプラグインを探したり，改造したりする必要性が出てくるが，欲しい機能のものが見つからなかったり，保守性の悪い状態になってしまう．
こういった状況を改善するため，指定した要素において，任意のサイズ指定に対するpx値を取得するjQueryコードを作ってみた．
コード
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | /* * 指定された任意の単位の数値をpxに変換する * @param {string} size 任意の単位を含む数値 * @returns {integer} px単位の数値 */function SizeToPixel(size, target) { switch (arguments.length) { case 0: default://引数間違ってるので，return=0 return 0; break; case 1://引数が1つしかないので，ターゲットをbodyにする target = 'body'; break; case 2://引数は2つあり，通常処理できる if (target === '') { target = 'body'; //空文字を送りつけられた！！ } break; } var SizeToPixel_DivObj = $($.parseHTML('')) .attr('id', 'SizeToPxcel_temp_div') .appendTo($(target)); var px = SizeToPixel_DivObj .css('width', size) .width(); return px;} |
説明
引数
| 引数 | 説明 |
|---|---|
| size | px取得したいサイズを単位付きで指定 |
| target | ターゲットのidを指定 不要であれば省略可能 |
戻り値
| 説明 |
|---|
| px単位の値が返ってくる 取得不能は'0' |
使用例1
引数を1つ指定し，bodyタグの幅の50%をpxに変換して返す例．
1 2 | var get_width;get_width = SizeToPixel('50%'); //bodyタグの幅の50%をpxに変換して返す |
使用例2
引数を2つ指定し，id=articleのオブジェクトの幅の50%をpxに変換して返す例．
1 2 | var get_width;get_width = SizeToPixel('50%', 'article'); //id=articleのオブジェクトの幅の50%をpxに変換して返す |
コメント