Flamingo.output()¶

output() メソッドはオリジナルページの各種要素を処理し、要素を修正してその結果をモバイルページに出力するために使用できます。

output()メソッド を使って修正するノードは複製する必要があります。そうしなければデスクトップサイト用オリジナルページが修正されます。

構文¶

Flamingo.output()

パラメータ¶

パラメータ名	型	説明
outputData	String, Array, jQ collection, NodeList or HTML Element	得られたページの出力

例 1¶

以下の例はリストに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>

例 2¶

以下の例はリストの各リンクに 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>

参考

Flamingo