[Share] last dạng tab invision

Post n°1

by AnhDauSai Sun Aug 17, 2014 12:35 pm

Demo ảnh:

Lưu ý: last này của version inv nên mình chưa test vs punbb và phpbb

mod_most_active_starters

Code:: <div id="poster1" class="muc_post baimoi laslist" style="display:none;margin-top:34px">  <li style=" background: transparent; "> {POSTER.NAME} <span class="las_right"> {POSTER.NB_TOPICS}</span></li>  </div>

Reccent

Code:: <div id="loading" style="display: none;"></div> <div id="loadddddd" style="display:none"> </div> <div class="fuck" style="width:66.5%;height: 260px;float:right;border: 1px solid #ddd; padding:5px;background:#FFF url(http://i.imgur.com/42jdx1a.png)repeat-x left top;margin-top:-4px"> <div class="tag mekiep"> <span style="display:inline-block;padding-bottom: 2px;margin-top: 2px;"> <div data="0" class="active last">Bài mới</div> <div data="10" class="last">Gunny</div> <div data="13" class="last">Kiếm thế</div> <div data="14" class="last">Mu private</div> <div data="15" class="last">Võ lâm</div> <div data="16" class="last">Game khác</div> <div data="1" class="last">Event VnGame</div> </span></div> <div class="latest_topic"> <div id="poster" style="display:block;" class="muc_post baimoi laslist" style="margin-bottom:3px;"> <ol class="muc_post baimoi activea forum0" style="overflow:hidden;">   <li> <a href="{classical_row.recent_topic_row.U_TITLE}" title="{classical_row.recent_topic_row.L_TITLE}" class="topicn topictitle1"> <span class="ten1">{classical_row.recent_topic_row.S_POSTTIME}</span>{classical_row.recent_topic_row.L_TITLE} </a>  <a class="las_right" href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>  </li>   </ol> <ol id="lastest" class="muc_post baimoi forum10"></ol> <ol id="lastest" class="muc_post baimoi forum13"></ol> <ol id="lastest" class="muc_post baimoi forum14"></ol> <ol id="lastest" class="muc_post baimoi forum15"></ol> <ol id="lastest" class="muc_post baimoi forum16"></ol> <ol id="lastest" class="muc_post baimoi forum11"></ol> </div> </div></div> <div class="clear"></div> <style>div.borderwrap {background-color: initial;border: 0;padding: 0;}/*box*/.blockLinksList a:active{background-color: #ccc;}/*khoang cachhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh*/.nodeList{zoom:1}.nodeList .node.level_1{margin-bottom:20px}.nodeList .node{zoom:1;vertical-align:bottom;zoom:1;vertical-align:bottom}.nodeList li{list-style:none}.border{background:#fff;border:1px solid #ccc;box-shadow:rgba(0,0,0,.05) 0 1px 4px;-webkit-box-shadow:rgba(0,0,0,.05) 0 1px 4px;-moz-box-shadow:rgba(0,0,0,.05) 0 1px 4px;-khtml-box-shadow:rgba(0,0,0,.05) 0 1px 4px;border-radius:3px;-webkit-border-radius:3px 3px 3px 3px;-moz-border-radius:3px 3px 3px 3px;-khtml-border-radius:3px 3px 3px 3px}.node .nodeInfo.primaryContent,.node .nodeInfo.secondaryContent{padding:0}.nodeList .categoryForumNodeInfo,.nodeList .forumNodeInfo,.nodeList .pageNodeInfo,.nodeList .linkNodeInfo{padding:10px;border-bottom:1px solid #fff1e5;padding:0;background:#fff}.node .nodeInfo{overflow:hidden;zoom:1;position:relative}.node .nodeText{margin:10px 270px 10px 56px}.node .unread .nodeTitle{color:#fffebf}.node .nodeTitle{font-weight:700;font-size:12px;color:#fffebf}.primaryContent a{color:#900}.node .nodeStats{font-size:11px;margin-top:2px;background:#fff}.nodeStats{overflow:hidden;zoom:1}.nodeStats dl{float:left;display:block;margin-right:10px}.pairsInline dt{color: black;padding-right: 4px;display:inline}.pairsInline dd{display:inline}.node .nodeLastPost{background:url(http://i.imgur.com/Xmc0Lyo.png) repeat-x top #fff;padding:10px;border-bottom:1px solid #ccc;font-size:11px;background:#fff none;padding:3px 10px;margin:6px 10px 10px;border-width:0;position:absolute;top:0;right:0;line-height:16px;white-space:nowrap;word-wrap:normal;overflow:hidden;width:210px;height:28px}.nodeLastPost>a{font-weight:700}.node .nodeLastPost .lastThreadMeta{display:block}.node .tinyIcon{background:url(http://i.imgur.com/sqFYMJi.png) no-repeat -112px -16px;margin:1px 4px;display:block;white-space:nowrap;text-indent:9999px;overflow:hidden;opacity:.25;width:14px;height:14px}.node .nodeInfo:hover .tinyIcon[href]{opacity:1}.node .nodeControls{position:absolute;top:0;right:240px;margin:20px 0}.node .nodeIcon{margin:10px 0 10px 10px;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-khtml-border-radius:3px;background:no-repeat center center;float:left;box-shadow:inset rgba(0,0,0,.3) 0 1px 2px;-webkit-box-shadow:inset rgba(0,0,0,.3) 0 1px 2px;-moz-box-shadow:inset rgba(0,0,0,.3) 0 1px 2px;-khtml-box-shadow:inset rgba(0,0,0,.3) 0 1px 2px;width:29px;height:29px}.nguoigui{float: left;}.sub a {padding: 2px 15px!important}.sub a:before {content: url(http://i38.servimg.com/u/f38/16/18/15/10/qltt10.gif);margin-right: 5px;}.subforums {margin: 2px 0 3px 0px;overflow: hidden;float: left;width: 100%;}.sub:nth-child(odd) {float: left;clear: both;width: 49%;position: relative;font-weight: bold;font-size: 12px;}.sub:nth-child(even) {float: right;width: 49%;position: relative;font-weight: bold;font-size: 12px;}.sub:nth-child(even):last-child {position: relative;left: -3px;width: 49%;font-weight: bold;font-size: 12px;}</style><script>function last(a){if(a != '' ){var b = a.split('<br />');document.write('<div><span class="nguoigui">' + b[1] + '</span></div><div align="right">Vào lúc : '+b[0]+'.</div>');}}</script><script>$(document).ready(function(){$('.subforums').each(function(){$(this).find('a:has(img)').next().wrap('<li class="sub node forum level-n node_13" />');$(this).find('a:has(img)').remove();});$('.subforums').each(function(index){cm = $(this).html();cm = cm.replace(/, /gi,'');$(this).html(cm);});});</script>

mod_top_post_users_month

Code:: <div id="poster3" class="muc_post baimoi laslist" style="display:none;margin-top:26px">  <li style=" background: transparent; "> {POSTER.NAME} <span class="las_right"> {POSTER.NB_POSTS}</span></li>  </div>

mod_top_post_users_week

Code:: <div id="poster2" class="muc_post baimoi laslist" style="display:none;margin-top:30px">  <li style=" background: transparent; "> {POSTER.NAME} <span class="las_right"> {POSTER.NB_POSTS}</span></li>  </div>

mod_top_posters

Code:: <div class="las_lasttopic"> <div id="lasv_top" style="width:31%;height: 260px;float:left;padding:5px;border: 1px solid #ddd; border-right: 0px solid #ccc; background:#FFF url(http://i.imgur.com/42jdx1a.png)repeat-x left top;"> <span style="display:inline-block;padding: 2px 25px 9px 0px;font:bold 12px Tahoma;color:blue; margin-top:4px;margin-left:5px"> <script type="text/javascript">function showstuff(value){document.getElementById("poster").style.display = (value == "poster") ? "block" : "none";document.getElementById("poster1").style.display = (value == "poster1") ? "block" : "none";document.getElementById("poster2").style.display = (value == "poster2") ? "block" : "none";document.getElementById("poster3").style.display = (value == "poster3") ? "block" : "none";}</script> <select style=" margin-top: -8px; height: 28px" id="changer" name="type" onchange="showstuff(this.value);"> <option value="poster">Top poster</option> <option value="poster1">Top mở chủ đề</option> <option value="poster2">Top poster tuần</option> <option value="poster3">Top poster tháng</option> </select></span> <div id="poster" style="display:block;" class="muc_post baimoi laslist">  <li style=" background: transparent; "> {POSTER.NAME} <span class="las_right"> {POSTER.NB_POSTS}</span></li>  </div></div> <style> #loading { background: url(http://i58.servimg.com/u/f58/18/67/94/07/loadin11.gif) no-repeat center center; color: #FFF; filter: alpha(opacity=65); left: 50%; margin-top: 5px; opacity: .9; padding: 0; position: absolute; text-align: center; width: 300px; height: 250px; } .muc_post a.topicn {margin-top:-.5px;display:inline-block;width:70%;overflow:hidden;height:16px;text-align:left;font:14px Arial;text-overflow:ellipsis;white-space:nowrap;float:left;} #poster1,#poster2,#poster3{margin-top:36px;width:194px;position:absolute;margin-left:5px;} .laslist {background:url(http://i.imgur.com/ODResGK.png) no-repeat 0 1px transparent;padding-left:5px;}.las_right {float:right;display:inline-block;text-align:right;} .muc_post li {list-style:none;border-bottom:1px dashed rgb(235,235,235);padding:3px 0px 3px 20px;height:16px;} .muc_post {height:232px;overflow:hidden; margin-top:-1px} .muc_post span.ten1 {display:none;color:#fff;font:bold 11px Arial;width:auto;height:13px;} .muc_post a:hover span.ten1 {display:inline-block;position:absolute;margin-left:-118px;background:#000 url(http://i35.servimg.com/u/f35/16/18/15/10/117.png)no-repeat right top;margin-top:-2px;padding:4px 6px;}div.mekiep {float:left;margin-right:-1px;overflow:hidden;position:relative;z-index:8;width:auto;} .tag div.active {color:#f40;background-color: rgb(255,255,255);height: 18px;border-bottom-color: #fff;} .tag div {text-decoration:none;color:rgb(20,20,20);text-decoration:none;background-color:#ebebeb;padding:4px 10px 4px 10px;margin-right:2px;margin-bottom:-1px;border:1px solid #ccc;border-top-left-radius:3px;-webkit-border-top-left-radius:3px;-moz-border-radius-topleft:3px;-khtml-border-top-left-radius:3px;border-top-right-radius:3px;-webkit-border-top-right-radius:3px;-moz-border-radius-topright:3px;-khtml-border-top-right-radius:3px;display:inline-block;line-height:18px;cursor:pointer;outline:0 none;height:18px;}.last {border-bottom:1px solid #DBE4EF;border-right:1px solid #DBE4EF;display:block;font-size:11px;font-weight:700;line-height:normal;outline:none;text-decoration:none;}#lastest {line-height:20px;list-style:decimal-leading-zero outside none;}.fuck ol.activea {display:block;}#lastest li {clear:both;}.fuck ol {display: none;}.muc_post li:hover span.ten1 {display: inline-block;position: absolute;margin-left: -118px;background: #000 url(http://i35.servimg.com/u/f35/16/18/15/10/117.png)no-repeat right top;margin-top: -2px;padding: 4px 6px;}#lastest li:hover span.ten1::before {content: "Lượt xem : ";font-size: 12px;color: yellow;} #lastest a.topictitle {display: inline-block;width: 620px;overflow: hidden;height: 16px;text-align: left;font: 14px Arial;text-overflow: ellipsis;white-space: nowrap;float: left;}.latest_topic {margin-top: 35px;} </style>

Code đã ẩn trả lời để xem nội dung

sắp xếp:

tạo 1 file js cho hiển thị ở in the home page
đối với version invision:

Code:: $(function() { $(".tag div").click(function() { $(".active").removeClass("active"); $(this).addClass("active"); var a = $(this).attr("data"); 0 != a ? ($("#loading") .show(), $("#loadddddd").load("/f" + a + "-forum .ipbtable", function() { var b = ""; for (i = 1; i < $("#loadddddd tr") .length; i++) { b = b + '<li><span style="overflow: hidden; position: absolute;width:445px!important; margin-left:10px">' + $(this) .find('.topic-title:eq(' + i + ')').html() + '</span> </li>' } $(".activea").removeClass("activea"); $(".forum" + a).addClass("activea").html(b); $("#loading").fadeOut(); })) : ($(".activea").removeClass("activea"), $(".forum" + a).addClass("activea")) }) });

đối với punbb:

Code:: $(function() {$(".tag div").click(function() {$(".active").removeClass("active"); $(this).addClass("active");var a = $(this).attr("data");0 != a ? ($("#loading") .show(),$("#loadddddd").load("/f" + a + "-forum .helo tr", function() {var b = "";for(i = 1;i < $("#loadddddd tr") .length;i++) {b = b + '<li><span style="overflow: hidden; position: absolute; width:760px!important">' + $(this) .find('tr:eq('+i+') .topic-title').html() +'</span>   </li>'} $(".activea").removeClass("activea");$(".forum" + a).addClass("activea").html(b);$("#loading").fadeOut();})) : ($(".activea").removeClass("activea"), $(".forum" + a).addClass("activea"))})});

Được sửa bởi AnhDauSai ngày Sun Aug 17, 2014 10:19 pm; sửa lần 2.