satya - 4/22/2014 10:06:23 AM

JSRender Example Source code

<!-- 
*************************************************
* widget template: secondary-banner2-template
* class prefix: sb2t-
* filename: secondary-banner2-template.html
* Fixed params:
*   tbd
*
* Arguments: 
*   A "loop" of the following
*     text
*     golink
*   See test-secondary-banner-widget.html
*   See also master page
* urls:
*   This file is at /item/4611
*************************************************
-->

<style>
.sb2t-main-div
{
}

.sb2t-section-div
{
    position:relative;
    color:purple;
    background:lavender;
    float:left;
    width:20%;
    margin:0px;
}

.sb2t-section-inner-div
{
    position:relative;
    margin:5px;
    min-height:70;
    max-height:200;
    background:rgb(185,184,163);
    /* or background:rgb(185,184,163); */
}

.sb2t-text
{
    font-size:12px;
    font-family:Verdana; 
    margin:5px;
    color:white;
}

.sb2t-go-div
{
    background:orange;
    float:right;
    margin:5px;
}
.sb2t-go-text
{
font-family:impact;
font-size:10; 
margin:2 15 2 15;
color:white"
}
</style>

<div class="sb2t-main-div">
{{for loop}}
<!-- Section Div -->
<div class="sb2t-section-div">

<!-- Inner div -->
<div class="sb2t-section-inner-div">

<!-- GO Div -->
<div class="sb2t-go-div akchover" 
   onclick="sb2t_goto('{{:golink}}')">
<center>
<p class="sb2t-go-text"><strong>>></strong>
</p>
</center>
</div>

<!-- Text -->
<p class="sb2t-text" >{{:text}}
</p>

<!-- Inner div end -->
</div>

<!-- End Section Div -->
</div>
{{/for}}

<!-- end of sb2t-main-div -->
</div>

<!--
****************************************************
* End of the widget div above.
* Some house keeping chores
****************************************************
-->
<!-- clear of the left/right floats -->
<div style="clear:both"/>

<!-- this is required as these are dynamic divs -->
<script>
function sb2t_goto(targetlink)
{
  document.location=targetlink;
}
$(".akchover").css('cursor','pointer');
</script>