jugl:reapeat の例にもありましたが、ここでは、画像を表示する例をみてみます。
前述の Repeat の処理コード2の続きに追加
<h2>Attributes</h2>
<!-- jugl:attributes を使うマークアップ3 -->
<div id="template_id3">
<img jugl:attributes="src source; alt description" />
<p jugl:attributes="class addClass && 'foo'">
This paragraph will only be given a class name if addClass is true.
<p>
</div>
<!-- 処理コード3 -->
<script type="text/javascript">
var source = "./img/marker-green.png";
var description = "my image";
var addClass = false;
// if true, the paragraph will get 'foo' class name
(new jugl.Template("template_id3")).process();
</script>
</body>
</html>
要素上（タグ中）の属性を設定するために、属性名（src, alt）と新しい属性値になる式（source, description）を用いて jugl:attribute 属性を追加します。
もし、式が偽なら、新しい属性は設定されません。
<img> タグの jugl:attributes="src source; alt description" は、タグの属性となるので、タグ中に処理されたデータが反映されます。
addClass && 'foo' の式は、addClass が真（true）のときだけ foo の値となります。
確認のため次のコードを <head> 内の <style> に追加してください。
<style>
---
p.foo {
background-color: #ffcccc;
}
</style>
<div id="template_id3">
<img jugl:attributes="src source; alt description" />
<p jugl:attributes="class addClass && 'foo'">
This paragraph will only be given a class name if addClass is true.
<p>
</div>
</body>
</html>
このテンプレートは次のコードで処理されます。
<script type="text/javascript">
var source = "path/to/image.png";
var description = "my image";
var addClass = false;
// if true, the paragraph will get 'foo' class name（背景が赤くなります）
(new jugl.Template("template_id3")).process();
</script>
テンプレートの処理をした後は、マークアップは次のようになります：
画像は、var addClass = true; にしてみました。
<div id="template_id3">
<img src="path/to/image.png" alt="my image" />
<p>
This paragraph will only be given a class name if addClass is true.
<p>
</div>
Animator.js については、
BernieCode Animator.js
http://berniecode.com/writing/animator.html
を参照してください。
英語がわからなくても、コードと効果のサンプルがあるので楽しく理解できると思います。
0 件のコメント:
コメントを投稿