Spry1.6 | Spry Element Selector Utility 意訳

SpryでDOMの取り回しをやる時、便利そうなSpry Element Selector Utility(SpryDOMUtils.js)の
日本語の情報を探したけど見つからなかったのでちまちま翻訳まがいのメモです。(正式な情報は参照元をご覧ください。)
実際に動作テストして翻訳していません。このユーティリティに関して足がかりになればという感じです。
間違いは指摘していただけるとありがたいです。

ページのエレメントをセレクトする 参照元:Spry Element Selector Utility
Spryのエレメントセレクタはページ上のエレメントをピックアップできます。単独もしくは複数に渡るエレメントについて使えます。このユーティリティはCSS3の多くのセレクタに対応しています。
以下のサンプルを使って説明いたします。
[html]

This is body text.

This is the first span.
This is the second span.

This is closer text.

[/html]
Spry ではセレクタをあらわす時、下のように’$$’を使います。
Spry.$$(“the CSS selector”).utilfunction;
表記法を使ってクラスbodyText全てにクラスnewClassを追加します。
Spry.$$(“.bodyText”).addClassName(“newClass”);
もしくはこのようにspanタグ全てにクラスnewClassを追加できます。
Spry.$$(“span”).addClassName(“newClass”);


サポートしているセレクタ 参照元:Element Selector Examples
E
Spry.$$(“span”).addClassName(“boldText”);
全てのspanタグにクラスboldTextを追加
E.ClassName
Spry.$$(“span.highlight”).removeClassName(“highlight”);
全てのspanタグについているクラスhighlightを削除
E#myid
Spry.$$(“div#container”).removeClassName(“mainBlock”);
ID名がcontainerのdivタグからクラスmainBlockを削除
E F
Spry.$$(“div p”).addClassName(“redText”);
divタグ内のpタグにクラスredTextを追加
*
Spry.$$(“*.hightlight”).addClassName(“boldText”);
任意のタグ内のクラスhightlightにクラスboldTextを追加
E:first-child
Spry.$$(“p:first-child”).setClassName(“red”);
全てのpタグ内の最初のタグにクラスredを追加
E[foo]
Spry.$$(“p[id]”).setAttribute(“tabindex”, “0”);
全てのIDが設定されているpタグに属性tabindex=”0”を追加
ノート:エレメント[クラス]を使うとIEではうまくいかない。
E > F
Spry.$$(“div>span”).addClassName(“red”);
divタグ直下のspanタグ全てにクラスredを追加
E[foo~=bar]
Spry.$$(“p[class~=bodyText]”).setAttribute(“align”, “left”);
classがbodyTextに設定されているpタグのalign属性にleftを設定
E[hreflang|=en]
Spry.$$(“[hreflang|=en]”).setAttribute(“align”, “left”);
hreflang属性がenならalign属性にleftを設定
E[foo=bar]
Spry.$$(“[class=highlight]”).addClassName(“red”);
クラス名がhighlightの時だけクラスredを追加
E[foo$=bar]
Spry.$$(“[class$=red]”).addClassName(“blue”);
属性値の最後の文字列がredになっているクラスにクラスblueを追加
E[foo^=bar]
Spry.$$(“[class^=red]”).addClassName(“blue”);
属性値の最初の文字列がredになっているクラスにクラスblueを追加
E[foo*=bar]
Spry.$$(“[class*=red]”).addClassName(“blue”);
属性値内にredの文字列があるクラスにクラスblueを追加
E + F
Spry.$$(“div+p”).removeClassName(“bodyText”);
divタグに隣接するpタグのクラスbodyTextを削除
E ~ F
Spry.$$(“div~span”).addClassName(“red”);
divタグの後に出てくるspanタグにクラスredを追加?
E:last-child
Spry.$$(“p:last-child”).addClassName(“red”);
タグにはさまれたpタグの中で最後のpタグにクラスredを追加?
E:nth-last-of-type(n)
Spry.$$(“span:nth-last-of-type(1)”).removeClassName(“highlight”);
spanタグで最後から1番目のクラスhighlightを削除
E:nth-of-type(n)
Spry.$$(“p:nth-of-type(3)”).addClassName(‘red”);
親のエレメント内部で3番目のpタグにクラスredを追加
E:nth-last-child(n)
Spry.$$(“p:nth-last-child(3)”).addClassName(“red”);
親のエレメント内部で最後から3番目のpタグにクラスredを追加
E:empty
Spry.$$(“div:empty”).addClassName(“red”);
タグ内に何もないdivタグにクラスredを追加
E:nth-child(n)
Spry.$$(“div:nth-child(3)”).addClassName(“red”);
divタグ内の3番目の子要素にクラスredを追加
E:not(s)
Spry.$$(“p:not(.closer)”).addClassName(“red”);
クラスcloserを含まないpタグにクラスredを追加
E:only-child
Spry.$$(“p:only-child”).addClassName(“red”);
兄弟タグを持たないpタグ全てにクラスredを追加
E:only-of-type
Spry.$$(“p.bodyText:only-child”).addClassName(“red”);
親の中で唯一の要素名を持つp.bodyTextにクラスredを追加?
E:last-of-type
Spry.$$(“span.highlight:last-of-type”).addClassName(“red”);
親タグ内で最後のspanタグにクラスhighlightがついてればクラスredを追加
E:first-of-type
Spry.$$(“p.bodyText:first-of-type”).addClassName(“red”);
親タグ内で最初のpタグにクラスbodyTextがついてればにクラスredを追加
E:enabled
Spry.$$(“input:enabled”).addClassName(“green”);
inputタグでenableのものにクラスgreenを追加(enableなフォームフィールドとははっきりdisableでないもの)
E:disabled
Spry.$$(“input:disabled”).addClassName(“red”);
disableが設定されてあるinputタグにクラスredを追加
E:checked
Spry.$$(“input:checked”).addClassName(“red”);
checkedが設定されているinputタグにクラスredを追加


ノート:スペースの使い方に気をつける
Spry.$$(“DIV P”).addClassName(“redText”); ○
Spry.$$(“p[class~=dev”).setAttribute(“align”, “left”); ○
Spry.$$(“p[class ~= dev”).setAttribute(“align”, “left”); × ・・~=の前後のスペースはいらない


未サポートのセレクタ
E:link
E:visited
E:active
E:hover
E:focus
E::first-line
E::first-letter
E::before
E::after
E:target
E:lang(fr)
E::selection


セレクタファンクション 参照元:Spry Element Selector Utility
addClassName
Spry.$$(“element selector”).addClassName(“className”);
マッチしたエレメントにクラス名を追加します。
addEventListener
Spry.$$(“element selector”).addEventListener(eventType, handler, capture);
マッチしたエレメントそれぞれに指定のイベントを追加します。
forEach
Spry.$$(“element selector”).forEach(myFunction);
マッチしたエレメントそれぞれにforEach()内で指定したJavascriptを実行できるようにします。
removeAttribute
Spry.$$(“element selector”).removeAttribute(“attribute”);
マッチしたエレメントから指定した属性を削除する。
removeEventListener
Spry.$$(“element selector”).removeEventListener(eventType, handler, capture);
マッチしたエレメントからリスナーを削除する。
removeClassName
Spry.$$(“element selector”).removeClassName(“className”);
マッチしたエレメントから指定のクラス名を削除します。
setAttribute
Spry.$$(“element selector”).setAttribute(“attribute”,”value”);
マッチしたエレメントに属性と値をセットします。
setProperty
Spry.$$(“element selector”).setProperty(“property”,”value”);
プロパティと値をセットします。
setStyle
Spry.$$(“element selector”).setStyle(“width:30px;color:#FF00FF;”);
エレメントに指定したスタイルをセットします。


エレメントセレクタの使い方 参照元:Spry Element Selector Utility
エレメントセレクタはページの中で一度に複数のエレメントを取得したい場合に威力を発揮します。

  1. ページにjsファイルとリンクするようタグを入れます。
    [js]

    [/js]

  2. functionブロックを書きます。
    [js]

    function myFunction(){
    }

    [/js]

  3. エレメント選択用のコードを書きます。下はtableタグ内のpタグにクラスmyClassを追加します。
    [js]

    function myFunction(){
    Spry.$$(“table p”).addClassName(“myClass”);
    }

    [/js]

  4. 動作させるためにonclickなどのイベントを入れます。
    [html]Click Me[/html]

ページのロード時にエレメントセレクタを実行する
しばしば、ページのロード時に何か実行したいことがあります。エレメントセレクタはそれに対応しています。
例えば2つのアコーディオンパーツのためにスクリプトを入れてアクティブにさせるように出来ます。

  1. エレメントセレクタとページをリンクさせます。
    [html]


    [/html]

  2. myFunctions.jsというブランクのページを作り保存します。
  3. ブランクのページに下のfunctionを追加します。
    [js]
    function myFunction(){
    }
    [/js]
  4. エレメントセレクタ部分のコードを追加します。
    [js]
    function myFunction(){
    Spry.$$(“.Accordion”).forEach(function(n) { window[n.id] = new Spry.Widget.Accordion(n); });
    }
    [/js]
    このコードはクラスAccordionのあるタグすべてにfunction(n) { window[n.id] = new Spry.Widget.Accordion(n);を実行していることになります。その結果idがAccordion1,Accordion2のものがアコーディオンウィジェットになります。ウィジェットの名前もそれぞれAccordion1,Accordion2です。
    ウィジェットの開閉を設定したいならid名を指定してonclick=”Accordion2.open();”にすればよいです。
  5. 次にページがロードされた後すぐに実行されないためにリスナーを追加すべきなので下のようにします。マークアップがコンストラクタスクリプトが起こる前に必要になるのでこれは重要です。なぜなら一般的なSpryのページではマークアップのロード後にfunctionを呼ぶからです。
    [js]
    function myFunction(){
    Spry.$$(“.Accordion”).forEach(function(n) { window[n.id] = new Spry.Widget.Accordion(n); });
    }
    Spry.Utils.addLoadListener(myFunction);
    [/js]
  6. 最後にmyFunctions.jsをページにリンクします。
    [html]

    [/html]


cssセレクタに関して「CSS セレクタに関するおさらい | WWW WATCH」を参考にさせていただきました。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中