さんまがおいしい季節だねー(´・ω・`)

Zen Coding Plugin for jQuery

JavaScript — タグ: , — さくら @ 2010/07/22 17:25

jQuery Zen Coding Plugin を作ってみました。Zen Coding の書式から jQuery オブジェクトを作る感じのやつです。

とりあえずソースとかは http://sakuratan.biz/jquery/zencoding/ に置いてます。オリジナルの Zen Coding と同じで MIT ライセンスです。

使い方

var obj = $.zenCoding('div#page>div.logo+ul#navigation>li*5>a');

で、Zen Coding を展開した jQuery オブジェクトを返します。上の例ですと、

<div id="page">
  <div class="logo"></div>
  <ul id="navigation">
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
  </ul>
</div>

の構造を持った jQuery オブジェクトが返ってきます。jQuery オブジェクトってのは $(‘#id’) とか呼び出した時に返ってくるやつのことす。$.zenCoding の戻り値を他の jQuery オブジェクトにそのまま引っ付けることができるって意味す。

var obj = $.zenCoding('div#page>div.logo+ul#navigation>li*5>a');
$('#replace').append(obj);
$.fn も extend してますので、上の例は以下のように書くこともできます。

$('#replace').zenCoding('div#page>div.logo+ul#navigation>li*5>a');

$.fn.zenCoding は Zen Coding を展開したオブジェクトを append します。中身無い状態で append してもあんまりうれしくないと思いますので、こっちはあんまり使い道無いと思います。

Zen Coding 展開した結果をテキストで取得したい時は、resultType オプションを $.zenCoding につけて呼び出して下さい。

alert($.zenCoding('div#page>div.logo+ul#navigation>li*5>a',
      { resultType: 'text' }));

他にもオプションありますが、たぶんあんまり使い道無いと思います。詳しくは http://sakuratan.biz/jquery/zencoding/ をどうぞ。

ほかの例

もう少しややこしい感じのですと、ツイッターのタイムラインに埋め込むツイート部分を Zen Coding で書くとこんな感じになります。面倒くさくなってきたので ul の中身省略してます、サーセンw

$.zenCoding('li.status>(span.thumb.vcard.author>a.tweet-url>img)+(span.status-body>(span.status-content>(strong+span.entry-content))+span.meta.entry-meta>(a.entry-data+span))+ul.actions-hover+ul.meta-data.clearfix');

で、できあがるのはこんな感じの HTML。

<li class="status">
  <span class="thumb vcard author">
    <a class="tweet-url"><img src="" alt=""></a>
  </span>
  <span class="status-body">
    <span class="status-content">
      <strong></strong>
      <span class="entry-content"></span>
    </span>
    <span class="meta entry-meta">
      <a class="entry-data"></a>
      <span></span>
    </span>
  </span>
  <ul class="actions-hover"></ul>
  <ul class="meta-data clearfix"></ul>
</li>

元の Zen Coding が長ったらしいんでかえってややこしい気がしますwww
という感じですので、もうちょい小分けに使った方がよろしいんでは無いでしょうか。

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL) Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)
西畑 一馬

アスキー・メディアワークス
売り上げランキング : 69729
おすすめ平均 : 5つ星のうち5.0

Amazonで詳しく見る by AZlink

2件のコメント »

  1. jikviMdccZUVlFpSlA 6032

    コメント by LWBjvzpNjeazfPU — 2014 年 10 月 5 日 @ 17:52
  2. Check that off the list of things I was coensufd about.

    コメント by Mira — 2015 年 12 月 3 日 @ 21:45

この投稿へのコメントの RSS フィード。 TrackBack URI

コメントする

Copyright © 2017 さくらたんどっとびーず | powered by WordPress with Barecity