※スマホ対応はしてません。

タグ: jQuery

CSS3のtransformを素敵に扱えるjQueryプラグインを作った。

カテゴリー: JavaScript

ダウンロード

なにこれ?

CSSのtransformプロパティの値を素敵に扱うやつです。 .css()からtransformを扱う際に既存の値を完全に上書きしてしまう問題を解消します。

transform ?

transformはご存知CSS3で追加されたプロパティで、要素を変形(transform)させる事ができます。このプロパティ複数の値を取り得、例えば「小さめで傾ける」という指定の場合は

transform: scale(.8) rotate(-30deg);

のような指定になります。

詳しくはこのあたりとか。

jQuery + transformの問題点

(さらに…)

jQueryで使えるけどCSSでは使えないセレクター。(CSS おれおれ Advent Calendar 2012 – 13日目)

カテゴリー: CSS, JavaScript

CSS おれおれ Advent Calendar 2012 – 13日目

今日はちょいと視点を変えて見ました。

jQueryの特徴的な機能として「CSSのセレクターを使って要素を検索できる」というのがあります。

ただしjQueryでは独自に拡張してCSS本来のセレクターよりも強力だったりします。逆にjQueryを普段から使っていてたまにCSSを書こうとすると迷う場面もありそうです。

というわけで、jQueryが独自に拡張しているセレクター一覧です。(属性非同値セレクター以外は全部疑似セレクターですね。)

全般

[name!="value"]

(さらに…)

文章がはみ出したら”…”を表示するtext-overflowの使い勝手が悪いのでjQueryで書いてみたりとか。(CSS おれおれ Advent Calendar 2012 – 08日目)

カテゴリー: CSS

CSS おれおれ Advent Calendar 2012 – 08日目

ネタバレ: 書いてみたは良いけど微妙な感じに。

CSSのプロパティでtext-overflowというのがあります。まあ読んで字の如(ごと)く、テキストがはみ出したときの指定です。以下のいずれかを指定します。

  • ellipsis … はみ出たら”…” (…) を表示させる
  • clip … 通常処理。

元々IEの独自仕様なんだっけ? 一般的なブラウザーでは利用可能です。

利用可能なんだけど、利用する場面がどれだけあるのかはちょっとよくわかんないです。

たしかに切ってくれるんだけど

ちょいと試してみます。

  • 改行しないようにしたもの (white-space:nowrap)
  • 長い単語を含むもの
  • 領域の高さが足りないもの

    (さらに…)

jQueryの$()が多機能すぎる件について。5種類も仕事があるよ。(軽めのjQuery Advent Calendar 2012 – 01日目)

カテゴリー: JavaScript, Web

軽めのjQuery Advent Calendar 2012 – 01日目

jQueryってあるじゃないですか。便利ですよね。いろんなところで紹介されてるっていうかもう普通に使われてると思うんですけど。

jQuery()

APIについてはこちら。

jQueryと$は同じものなので、jQuery()と$()は同じです。これ、実は関数なんですよ。

というわけで、以下使い方。

5種類の使い方

セレクター : $('#target')

たぶんこれが一番多いですよね。

var $theElement = $('div#target > .enabled:not(.hidden):eq(0)');

ちなみに複雑なセレクターを書くより、関数で分割した方が実行は高速です。

HTML : $('<div />')

これもぼちぼち使いますね。HTMLを画面から探してくるんじゃなくて、新しく作成します。属性を付けたり、入れ子のHTMLをまとめて作る事も可能です。

var $newElement = $('<div id="hoge"><span class="fuga">piyo</span></div>');

第二引数には属性を設定する事も出来ます。

var $newElement = $('<div />', { id:'hoge', class:'fuga', text:'piyo&piyo' });
// => <div id="hoge" class="fuga">piyo&amp;piyo</div>

意外と速度面ではこちらの方が不利っぽいのだけれど、 適切にエスケープしてくれる という非常に大きな利点があります。外部から得た値等、不確実な内容で要素構築する場合は、必ずこちらを利用するようにしましょう。

関数 : $(function(){ ... })

JSファイル全体を括ったりしてるのを見た事があるはず。

alert('1');
$(function(){
  alert('3');
});
alert('2');

画面の読み込みが終わるまで待ってから、中身を実行します。

要素オブジェクト : $(this)

えーとアレです、 .click() とかの中で使うやつですね。

$('a').click(function() {
  var url = $(this).attr('href');
  alert(url);
});

このときthisはクリックされたa要素の 生の オブジェクトです。jQueryじゃないので .attr()は使えません。なので$(this)でjQueryのオブジェクトにしてから、 .attr()を使っています。

空 : $()

空のjQueryオブジェクトを返します。セレクターで検索して結果0件だった場合とだいたい一緒です。

まーあんまり使わないと思う。

おしまい

いやー、実に多機能ですね。第二引数は知らない人多そうなので、一度APIのドキュメントを眺めてみると良いかと思います。

どっとはらい。

軽めのjQuery Advent Calendar 2012

カテゴリー: JavaScript

参加表明はこちらから: 軽めのjQuery Advent Calendar 2012

(*’-‘) oO( こっちのページはいらない気がする……