Flamingo.jQ¶

Flamingo.jQ is an optimized version of the jQuery library that provides basic functionality. It’s a cross-platform JavaScript library designed to simplify the client-side scripting for HTML. The library is used to work with the initial DOM tree before rendering a page. Usage of the Flamingo.jQ library is similar to that of the jQuery library.

Example 1¶

The example below demonstrates how to display all URLs used in a list.

Source HTML code available on original desktop site page:

<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>

You need to add the following code to your template to display all URLs used in the list:

<!--{foreach Flamingo.Selector.get('li > a') as item }-->
    URL is: <!--{= Flamingo.jQ(item).attr('href') }--><br/>
<!--{/foreach}-->

The result will look like:

URL is: http://www.site1.com

URL is: http://www.site2.com

Example 2¶

The example below demonstrates how to add a CSS class to the list.

Source HTML code available on original desktop site page:

<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>

You need to add the following code to your template to apply a CSS style called custom-class to the list:

<!--{
       var list = Flamingo.jQ('ul').clone(true);
       list.addClass('custom-class');
       Flamingo.output(list);
   }-->
<!--{= list[0].outerHTML}-->

The HTML code of the resulting page will look like:

<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>

Example 3¶

The example below demonstrates how to add the target=”_blank” attribute to each link in the list.

Source HTML code available on original desktop site page:

<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>

You need to add the following code to your template to add the target=”_blank” attribute to each link in the list:

<--{
       var links = Flamingo.jQ('a').clone(true);
       links.attr('target', '_blank');
       Flamingo.output(links);
   }-->

The HTML code of the resulting page will look like:

<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>