Flamingo.jQ¶
Flamingo.jQ はjQuery ライブラリを最適化したバージョンで、基本機能を提供します。これはクロスプラットフォームのJavascriptライブラリで、HTMLのクライアントサイドのスクリプト作成を簡単にするため設計されました。このライブラリはページのレンダリング前の初期DOMツリー操作を行うため使用されます。Flamingo.jQ ライブラリの使用方法はjQuery ライブラリと同様です。
例 1¶
以下の例はリスト内で使用されているURL全てを表示する方法を示しています。
デスクトップサイト用オリジナルページにあるソースHTMLコード
<html>
<body>
<ul>
<li><a href="http://www.site1.com">List item 1</a></li>
<li><a href="http://www.site2.com">List item 2</a></li>
</ul>
</body>
</html>
custom-classと呼ばれるCSSスタイルをリストに適用するにはテンプレートに次のコード追加が必要です。
<!--{foreach Flamingo.Selector.get('li > a') as item }-->
URL is: <!--{= Flamingo.jQ(item).attr('href') }--><br/>
<!--{/foreach}-->
結果は以下のようになります。
URL is: http://www.site1.com
URL is: http://www.site2.com
例 2¶
以下の例はリストにCSSクラスを一つ追加する方法を示しています。
デスクトップサイト用オリジナルページにあるソースHTMLコード
<html>
<body>
<ul>
<li><a href="http://www.site1.com">List item 1</a></li>
<li><a href="http://www.site2.com">List item 2</a></li>
</ul>
</body>
</html>
*custom-class* と呼ばれるCSSスタイルをリストに適用するにはテンプレートに次のコード追加が必要です。
<!--{
var list = Flamingo.jQ('ul').clone(true);
list.addClass('custom-class');
Flamingo.output(list);
}-->
<!--{= list[0].outerHTML}-->
得られたページのHTMLコードは以下のようになります。
<html>
<body>
<ul class="custom-class">
<li><a href="http://www.site1.com">List item 1</a></li>
<li><a href="http://www.site2.com">List item 2</a></li>
</ul>
</body>
</html>
例 3¶
以下の例はリストの各リンクに target=”_blank” 属性を追加する方法を示しています。
デスクトップサイト用オリジナルページにあるソースHTMLコード
<html>
<body>
<ul>
<li><a href="http://www.site1.com">List item 1</a></li>
<li><a href="http://www.site2.com">List item 2</a></li>
</ul>
</body>
</html>
リストの各リンクに target=”_blank” を追加するには、テンプレートに次のコード追加が必要です。
<--{
var links = Flamingo.jQ('a').clone(true);
links.attr('target', '_blank');
Flamingo.output(links);
}-->
得られたページのHTMLコードは以下のようになります。
<html>
<body>
<ul>
<li><a href="http://www.site1.com" target="_blank">List item 1</a></li>
<li><a href="http://www.site2.com" target="_blank">List item 2</a></li>
</ul>
</body>
</html>