TopDragon
Topic list box đẹp
on 04/07/2013TopDragon
loading...
demo : http://skin123.forumvi.com/f1-forum
- Code:
topics_list_box:
[code]<style>
table.ipbtable th.icon {
empty-cells: show;
text-align: center;
width: 1%;
}
table.ipbtable th {
padding: 5px;
text-align: center;
background: #ffffff url(http://i74.servimg.com/u/f74/13/34/57/11/thead10.gif);
}
.row1, .row2 {
border: 1px solid #dcdcdc !important;
background-color: #ffffff;
overflow: hidden;
text-align: left;
}
.centered {
text-align: center;
}
table.ipbtable th.forum2 {
text-align: left;
width: 50%;
}
table.ipbtable th.icon {
empty-cells: show;
text-align: center;
width: 1%;
}
table.ipbtable th.replies, table.ipbtable th.topics, table.ipbtable th.views {
width: 8%;
}
table.ipbtable th {
background-color: #ced7e5;
background-image: url(http://2img.net/i/fa/empty.gif);
background-repeat: repeat-x;
border-bottom: 1px solid #9aa4b1;
border-right: 1px dotted #b0bbcd;
padding: 5px;
text-align: center;
}
table.ipbtable td {
padding: 5px;
vertical-align: top;
}
</style>
<!-- BEGIN topics_list_box -->
<!-- BEGIN row -->
<!-- BEGIN header_table -->
<!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
var all_checked = true;
for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
}
}
document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
}
}
}
</script>
<!-- END multi_selection -->
<div class="main-head">
<!-- BEGIN multi_selection -->
<input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
<!-- END multi_selection -->
<h1 class="page-title">{topics_list_box.row.L_TITLE} [{topics_list_box.row.COUNT_TOTAL_TOPICS}]</h1>
</div>
<div class="main-content">
<table cellspacing="0" class="ipbtable">
<thead>
<tr>
<th class="icon"></th>
<th class="icon" style="width: 2%;"></th>
<th class="forum2">{L_TOPICS}</th>
<th class="topics">{topics_list_box.row.L_REPLIES}</th>
<th class="views">{topics_list_box.row.L_VIEWS}</th>
<th class="views">Tác Giả</th>
<th class="last last-post2">{topics_list_box.row.L_LASTPOST}</th>
</tr>
</thead>
<tbody class="statused">
<!-- END header_table -->
<!-- BEGIN header_row -->
<strong>{topics_list_box.row.L_TITLE}</strong>
<!-- END header_row -->
<!-- BEGIN topic -->
<!-- BEGIN table_sticky -->
</tbody>
</table>
</div>
<div class="main-head">
<!-- BEGIN multi_selection -->
<input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" / >
<!-- END multi_selection -->
<h2>{topics_list_box.row.topic.table_sticky.L_TITLE} [{topics_list_box.row.topic.table_sticky.COUNT_TOTAL_TOPICS}]</h2>
</div>
<div class="main-content">
<table cellspacing="0" class="table">
<thead>
<tr>
<th class="icon"></th>
<th class="icon" style="width: 2%;"></th>
<th class="forum2">{L_TOPICS}</th>
<th class="topics">{topics_list_box.row.topic.table_sticky.L_REPLIES}</th>
<th class="views">Tác Giả</th>
<th class="views">{topics_list_box.row.topic.table_sticky.L_VIEWS}</th>
<th class="last last-post2">{topics_list_box.row.topic.table_sticky.L_LASTPOST}</th>
</tr>
</thead>
<tbody class="statused">
<!-- END table_sticky -->
<tr>
<td class="row1 centered">
<img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" />
</td>
<!-- BEGIN single_selection -->
<input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />
<!-- END single_selection -->
<td class="row1 centered"> {topics_list_box.row.ICON}</td>
<td class="row1">
{topics_list_box.row.NEWEST_POST_IMG}
{topics_list_box.row.PARTICIPATE_POST_IMG}
{topics_list_box.row.TOPIC_TYPE}
<h2 class="topic-title"><a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2>
{topics_list_box.row.GOTO_PAGE_NEW} <span style="float:right"><div class="sao1690"></div></span>
<script type="text/javascript">$(function(){if(1690>500){$(".sao1690").replaceWith('<span style="float:right">[<img src="http://i36.servimg.com/u/f36/17/76/06/16/rating11.png"/>]</span>')};if(1690>400&&1690<500){$(".sao1690").replaceWith('<span style="float:right">[<img src="http://i36.servimg.com/u/f36/17/76/06/16/rating12.png"/>]</span>')};if(1690>300&&1690<400){$(".sao1690").replaceWith('<span style="float:right">[<img src="http://i36.servimg.com/u/f36/17/76/06/16/rating13.png"/>]</span>')};if(1690>200&&1690<300){$(".sao1690").replaceWith('<span style="float:right">[<img src="http://i36.servimg.com/u/f36/17/76/06/16/rating14.png"/>]</span>')};if(1690>100&&1690<200){$(".sao1690").replaceWith('<span style="float:right">[<img src="http://i36.servimg.com/u/f36/17/76/06/16/rating15.png"/>]</span>')}});</script>
</td>
<td class="row2 centered <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">{topics_list_box.row.REPLIES}</td>
<td class="row1 centered author">{topics_list_box.row.TOPIC_AUTHOR}</td>
<td class="row2 centered <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">{topics_list_box.row.VIEWS}</td>
<td class="row1 lastaction <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">{topics_list_box.row.LAST_POST_TIME} <br/>{topics_list_box.row.L_BY} {topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</td>
<!-- BEGIN multi_selection -->
<td><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
<!-- END multi_selection -->
</tr>
<!-- END topic -->
<!-- BEGIN no_topics -->
<tr>
<td class="tcl" colspan="4"><strong>{topics_list_box.row.L_NO_TOPICS}</strong></td>
</tr>
<!-- END no_topics -->
<!-- BEGIN bottom -->
</tbody>
</table>
</div>
<div class="main-foot clearfix">
<!-- BEGIN multi_selection -->
<input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
<!-- END multi_selection -->
<p class="h2">{L_TOPICS} [{topics_list_box.row.bottom.COUNT_TOTAL_TOPICS}]</p>
<p class="options">
<a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a> {S_WATCH_FORUM} <a href="#top">{L_BACK_TO_TOP}</a>
</p>
</div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->[/code]