Menu
Code:
<div class="Latest lasttab">
<div class="usertabs">
<ul class="lastnavtab">
<li class="tabsli selected"><a href="#tab1"><span>Bài viết mới</span></a></li>
<li class="tabsli"><a href="#tab2"><span>Nhôn nhịp</span></a></li>
<li class="tabsli last"><a href="#tab3"><span>Xem nhiều</span></a></li>
</ul>
</div>
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- END giefmod_index1 -->
</div>Code:
/*LATESTTOPIC*/
.Latest{color:#333;background-color:#fff;margin:auto auto 13px;-webkit-border-top-left-radius:0;-moz-border-radius-topleft:0;-khtml-border-top-left-radius:0;border-top-left-radius:0;-webkit-border-top-right-radius:0;-moz-border-radius-topright:0;-khtml-border-top-right-radius:0;border-top-right-radius:0;-webkit-border-bottom-right-radius:3px;-moz-border-radius-bottomright:3px;-khtml-border-bottom-right-radius:3px;border-bottom-right-radius:3px;-webkit-border-bottom-left-radius:3px;-moz-border-radius-bottomleft:3px;-khtml-border-bottom-left-radius:3px;border-bottom-left-radius:3px;font:13px/18px 'Roboto Condensed',sans-serif;height:100%}
.Latest.lasttab .usertabs{height:30px;padding:5px 0;border-bottom:1px solid #eff2f7;display:block;margin:auto 10px!important}
.Latest.lasttab ul.lastnavtab,.Latest.lasttab ul.lastnavtab2{height:30px}
.Latest.lasttab ul.lastnavtab > li,.Latest.lasttab ul.lastnavtab2 > li{border-bottom:none;float:left;position:relative;font-size:1.11em;margin:auto;border:0 solid #DDD;list-style-type:none;height:30px}
.Latest ul.lastnavtab > li.selected,.Latest ul.lastnavtab2 > li.selected{color:#000;background-color:#eff2f7}
.Latest.lasttab ul.lastnavtab > li.selected,.Latest.lasttab ul.lastnavtab2 > li.selected{height:30px}
.Latest ul.lastnavtab > li a,.Latest ul.lastnavtab2 > li a{font-size:14px;font-family:'Roboto',sans-serif;color:#246faf;text-decoration:none;margin:0;outline:none;display:block;line-height:30px;padding:0 15px;text-align:left}
.Latest.lasttab ul.lastnavtab > li a,.Latest.lasttab ul.lastnavtab2 > li a{cursor:pointer;line-height:30px;padding:0 15px}
.Latest .Lastcontent{padding:10px}
.Latest .Lastcontent ol.Lastcontentlist{counter-reset:numList}
.Latest .Lastcontent ol.Lastcontentlist li{padding:0;border-top:1px solid #eff2f7;float:left;width:100%}
.Latest .Lastcontent ol.Lastcontentlist li:first-child{border-top:1px none black}
.Latest .itemContent{padding:4px 0;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out;display:table;table-layout:fixed;word-wrap:normal;width:100%}
.Latest .itemContent:hover{background-color:#eff2f7;padding-right:6px;padding-left:6px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;text-decoration:underline!important}
.Latest .itemContent .listBlock{display:table-cell;vertical-align:middle}
.Latest .itemContent .itemTitle{width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:65%}
.Latest .itemContent .itemDetail{width:150px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.Latest .itemContent .itemDetail,.BRMSContainer .itemContent .itemDetail a{color:#38445f;font-size:14px;text-align:right}
.Latest .itemContent .itemDetailName{text-align:right}
.Latest.lasttab{position:relative;width:73%;float:right}
.Latest.lasttab2{position:absolute;margin-left:-258px;top:0;width:37%}
.Latest.lasttab2 .itemContent .itemDetail{width:40px}
.after_view::after{content:" Views"}
.after_rep::after{content:" Replies"}Code:
<div id="tab2" class="Lastcontent selected tab_content" style="display:none">
<ol class="Lastcontentlist clearfix">
<!-- BEGIN TOPIC -->
<li class="topicli">
<div class="itemContent">
<div id="active_topics" class="listBlock itemTitle" style="width: auto;"><img src="http://i.imgur.com/0bZs6yT.gif" style="padding-right:4px" /><a href="{TOPIC.LINK}" title="{TOPIC.TITLE}">{TOPIC.NAME}</a> </div>
<div class="listBlock itemDetail itemDetailName rep_viewer after_rep">{TOPIC.TITLE}</div>
</div>
</li>
<!-- END TOPIC -->
</ol>
</div>Code:
<div id="tab3" class="Lastcontent selected tab_content" style="display:none">
<ol class="Lastcontentlist clearfix">
<!-- BEGIN TOPIC -->
<li class="topicli">
<div class="itemContent">
<div id="viewed_topics" class="listBlock itemTitle" style="width: auto;"><img src="http://i.imgur.com/0bZs6yT.gif" style="padding-right:4px" /><a href="{TOPIC.LINK}" title="{TOPIC.TITLE}">{TOPIC.NAME}</a> </div>
<div class="listBlock itemDetail itemDetailName rep_viewer after_view">{TOPIC.TITLE}</div>
</div>
</li>
<!-- END TOPIC -->
</ol>
</div>Code:
<!-- BEGIN classical_row -->
<div id="tab1" class="Lastcontent selected tab_content">
<ol class="Lastcontentlist clearfix">
<!-- BEGIN recent_topic_row -->
<li class="topicli">
<div class="itemContent">
<div class="listBlock itemTitle" style="width: auto;"><img src="http://i.imgur.com/0bZs6yT.gif" style="padding-right:4px" /><a href="{classical_row.recent_topic_row.U_TITLE}" title="{classical_row.recent_topic_row.L_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a> </div>
<!-- BEGIN switch_poster -->
<div class="listBlock itemDetail itemDetailName"> <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}" class="username" dir="auto">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a> </div>
<!-- END switch_poster -->
<!-- BEGIN switch_poster_guest -->
{classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
<!-- END switch_poster_guest -->
</div>
</li>
<!-- END recent_topic_row -->
</ol>
</div>
<!-- END classical_row -->Code:
<div class="Latest lasttab2">
<div class="usertabs">
<ul class="lastnavtab2">
<li class="tabsli selected"><a><span>Top poster</span></a></li>
</ul>
</div>
<div class="Lastcontent selected">
<ol class="Lastcontentlist clearfix">
<!-- BEGIN POSTER -->
<li class="topicli">
<div class="itemContent">
<div id="topposters" class="listBlock itemTitle" style="width:180px">{POSTER.NAME}</div>
<div class="listBlock itemDetail itemDetailName rep_viewer">{POSTER.NB_POSTS}</div>
</div>
</li>
<!-- END POSTER -->
</ol>
</div>
</div>Code:
$(document).ready(function() {
$(".lastnavtab li").click(function() {
$(".lastnavtab li").removeClass('selected');
$(this).addClass("selected");
$(".tab_content").hide();
var selected_tab = $(this).find("a").attr("href");
$(selected_tab).fadeIn();
return false;
});
$(".rep_viewer").each(function() {
$(this).html(parseInt($(this).text().replace(/^[\s\S]*-\s+(\d+)\s+[\s\S]*$/m, '$1')));
});
});
|
|
|