|
Smarty
WARNING: All discussion is moving to https://reddit.com/r/smarty, please go there! This forum will be closing soon. |
|
View previous topic :: View next topic |
Author |
Message |
bimal Smarty Elite
Joined: 19 Apr 2007 Posts: 423
|
Posted: Thu Jun 11, 2009 5:32 pm Post subject: A tip a day - {cycle} tag in Smarty for color banding |
|
|
I plan to contribute the forum readers with some beautiful tips, whenever I have enough time. Normally, I will be taking out a tips from my realtime projects, which Smarty community might find useful. These tips are nothing new from Smarty's manual, but I try to compile them with some examples and explations.
Today, here is a {cycle} tips in printing out attractive color bands in rows of information. Normally, it may be an HTML/TR row, but can support any other tag.
Ok, to begin with, you need to make a list of at least two css styles, named A and B for TR tag. Here is the declaration:
Code: | tr.A
{
background-color:#D8EACB;
}
tr.B
{
background-color:#D0FBB2;
} |
Each of the row will be later noted by A, and followed by B, and again A, B, ... as long as the loop runs.
Below is a code sample that uses {section} loop over a variable. Please note carefully, the {cycle} tag.
Code: | <table border="0" cellspacing="1" cellpadding="5">
<tr>
<th> </th>
<th><a href="?sort=sn">Student</a></th>
<th>SLC</th>
<th>Entrance</th>
<th><a href="?sort=rs">Rank (SLC)</a></th>
<th><a href="?sort=re">Rank (Entrance)</a></th>
</tr>
{section name='r' loop=$ranks}
<tr class="{cycle name='ranking' values='A,B'}">
<td>{$smarty.section.r.index_next}.</td>
<td id="s{$ranks[r].sid}" class="s">{$ranks[r].sn}</td>
<td>{$ranks[r].sp}</td>
<td>{$ranks[r].es}</td>
<td>{$ranks[r].rs|ordinal:true:'slc'}</td>
<td>{$ranks[r].re|ordinal:true:'entrance'}</td>
</tr>
{sectionelse}
<tr>
<td> </td>
<td>No student records</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
{/section}
</table> |
In each loop, it produces a different band of <TR> with <tr class="{cycle name='ranking' values='A,B'}">.
This means, the browser will get:
<tr class="A">..
<tr class="B">...
<tr class="A">...
<tr class="B">...
Unless we define the proper styles for tr.A and tr.B, we may not see the effects.
Tips:
If you would like to do multiple cycles within a loop, you MUST give a unique name to the cycle.
For example: <tr class="{cycle name='ranking' values='A,B'}">
Even if you do not need to take benefits of named cycles, better, use them.
This helps you, clearly, allow a css designer take control on the look and feel.
Enjoy all the color bands now.
Last edited by bimal on Wed Jun 17, 2009 5:19 pm; edited 1 time in total |
|
Back to top |
|
jLix Smarty Regular
Joined: 01 Apr 2009 Posts: 59 Location: Lowlands, EU
|
Posted: Thu Jun 11, 2009 9:38 pm Post subject: |
|
|
Good to see you don't follow the official Smarty documentation or Smarty book in which they put the make-up straight into the markup: <tr bgcolor="{cycle values="#eeeeee,#d0d0d0"}">. How's that for separation of content and style?
Of course that's just an example of how {cycle} works, but it sets a bad example. And I think those should be avoided or else at least tagged as such with waving red flags
Better to use classNames like you did, although I'd personally do something like this: Code: | <tr{cycle values=' class="odd",'}>...</tr> | Which would give: Code: | <tr class="odd">...</tr>
<tr>...</tr>
<tr class="odd">...</tr>
<tr>...</tr>
<tr class="odd">...</tr> | It saves some unnecessary characters.
In CSS you'd then write: Code: | tr {
background-color: #d8eacb;
}
tr.odd {
background-color: #d0fbb2;
} |
Just my 2 cents. _________________ http://jlix.net/extensions/smarty |
|
Back to top |
|
bimal Smarty Elite
Joined: 19 Apr 2007 Posts: 423
|
Posted: Fri Jun 12, 2009 1:59 pm Post subject: |
|
|
Quote: | <tr{cycle values=' class="odd",'}>...</tr> |
It is one more trick to use blank values in the loop, yet good for the css. This helps to write few css selectors.
About the manual:
Even if we feel, the examples in the manual are not so good, I have some good feelings with these works. The core Smarty team should have produced them in a shorter timespan, and for free. Plus, they aimed at the learners of Smarty only. Learners might confuse with the advanced examples we like to use in our applications. And, again, it is the factor of time to revise the manual.
The manual is too old, but still supports / describes many things of the recent releases. |
|
Back to top |
|
mohrt Administrator
Joined: 16 Apr 2003 Posts: 7368 Location: Lincoln Nebraska, USA
|
Posted: Fri Jun 12, 2009 2:49 pm Post subject: |
|
|
I updated the example in SVN, it will get updated on the site at some point. |
|
Back to top |
|
jLix Smarty Regular
Joined: 01 Apr 2009 Posts: 59 Location: Lowlands, EU
|
Posted: Fri Jun 12, 2009 6:40 pm Post subject: |
|
|
mohrt wrote: | I updated the example in SVN, it will get updated on the site at some point. |
That's just great. Thanks! _________________ http://jlix.net/extensions/smarty |
|
Back to top |
|
|
|
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot vote in polls in this forum
|
Powered by phpBB © 2001, 2005 phpBB Group
|
|