[Topx] xdavn Full version

avatar

LASPERPEN169
357
132
Invision
Quản trị
Quản trị viên

Bài viết :
169
Points :
357
Like :
132
Invision
Quản trị

Latest topic xdavn Full version


Latest topic xdavn Full version được đánh giá khá cao bởi khả năng thẩm mỹ rất đẹp và đơn giản dành cho các site về IT

Index_body

Code:
<div id="hotrofm-topx" class="full large">
    <div class="lpp_hotrofm">
        <div class="larva-topx">
            <ul class="topx-tabs">
              <li class="sub-tab active"><a href="#tab1">Bài viết mới</a></li>
              <li class="sub-tab"><a href="#tab2">Chủ xem nhiều</a></li>
                <li id="refresh" title="Cập nhật lại"></li>
                <li class="select-list" style="display:none"> <select class="form-control" id="xdavn-topx-result-count"> <option value="12">12</option> <option value="22">22</option> <option value="32">32</option> <option value="42">42</option> <option value="52">52</option> </select> </li>
            </ul>
            <ul class="head-col">
                <li class="list-topx-header"> </li>
            </ul>
            <!-- BEGIN giefmod_index1 -->
            {giefmod_index1.MODVAR}
            <!-- END giefmod_index1 -->
        </div>
    </div>
</div>
 
  <script type="text/javascript">
      //<![CDATA[
      var versionMinor = parseFloat(navigator.appVersion),
         versionMajor = parseInt(versionMinor),
         IE = document.all && !window.opera && 7 > versionMajor,
         IE7 = document.all && !window.opera && 7 <= versionMajor,
         OP = window.opera,
         FF = document.getElementById,
         NS = document.layers;

      function get_item(a, c) {
         if (IE) return c ? window.opener.document.all[a] : document.all[a];
         if (FF) return c ? window.opener.document.getElementById(a) : document.getElementById(a);
         if (NS) return c ? window.opener.document.layers[a] : document.layers[a]
      }

      var current_tooltip;

      function show_tooltip(a, c) {
         var b = get_item("tooltip");
         b || (b = document.createElement("div"), b.setAttribute("id", "tooltip"), document.body.appendChild(b));
         b.style.zIndex = 1000;
         b.style.position = "absolute";
         b.innerHTML = "<p>" + c + "</p>";
         b.style.visibility = "visible";
         a.onmousemove = move_tooltip;
         a.onmouseout = function() {
            b.style.visibility = "hidden"
         };
         a.title = ""
      }
      var offsetxpoint = -60,
         offsetypoint = 20,
         real_body = document.compatMode && "BackCompat" != document.compatMode ? document.documentElement : document.body,
         real_body = document.documentElement ? document.documentElement : document.body;

      function move_tooltip(a) {
         var c = !IE ? a.pageX : event.clientX + real_body.scrollLeft,
            d = !IE ? a.pageY : event.clientY + real_body.scrollTop,
            b = IE && !window.opera ? real_body.clientWidth - event.clientX - offsetxpoint : window.innerWidth - a.clientX - offsetxpoint - 20,
            e = IE && !window.opera ? real_body.clientHeight - event.clientY - offsetypoint : window.innerHeight - a.clientY - offsetypoint - 20,
            f = 0 > offsetxpoint ? -1 * offsetxpoint : -1E3;
         current_tooltip = get_item("tooltip");
         current_tooltip.style.left = b < current_tooltip.offsetWidth ? IE ? real_body.scrollLeft + event.clientX - current_tooltip.offsetWidth + "px" : window.pageXOffset + a.clientX - current_tooltip.offsetWidth + "px" : c < f ? "5px" : c + offsetxpoint + "px";
         current_tooltip.style.top = e < current_tooltip.offsetHeight ? IE ? real_body.scrollTop + event.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : window.pageYOffset + a.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : d + offsetypoint + "px"
      }
      $(".list-link .list-link-col a.larva_tooltip:first-child").mouseover(function() {
         show_tooltip(this, $(this).next().html())
      });
        $(".topx-tabs li").click(function() {
        $(".topx-tabs li").removeClass('active');
        $(this).addClass("active");
        $(".topx-content").hide();
        var active_tab = $(this).find("a").attr("href");
        $(active_tab).fadeIn();
        return false;
    });
       //]]>
   </script>

mod_most_viewed_topics

Code:
<ul id="tab2" class="topx-content" style="display:none">
    <!-- BEGIN TOPIC -->
    <li class="list-link">
        <div class="list-link-col list-link-title"><a class="larva_tooltip" href="{TOPIC.LINK}">{TOPIC.NAME}</a>
            <div class="tooltip_data" style="display:none">
                <div class="tooltipContent">
                    <b>{classical_row.recent_topic_row.L_TITLE}</b>
                    {TOPIC.TITLE}</div>
                <span class="arrow"></span>
            </div>
        </div>
    </li>
    <!-- END TOPIC -->
</ul>

mod_recent_topics

Code:
<ul id="tab1" class="topx-content">
    <!-- BEGIN classical_row -->
    <!-- BEGIN recent_topic_row -->
    <li class="list-link">
        <div class="list-link-col list-link-title"><a class="larva_tooltip" href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a>
            <div class="tooltip_data" style="display:none">
                <div class="tooltipContent">
                    <b>{classical_row.recent_topic_row.L_TITLE}</b>
                    <br /> Username:
                    <!-- BEGIN switch_poster -->
                    <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
                    <!-- END switch_poster -->
                    <!-- BEGIN switch_poster_guest -->
                    {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
                    <!-- END switch_poster_guest -->
                    <br /> Thời gian: {classical_row.recent_topic_row.S_POSTTIME}</div>
                <span class="arrow"></span>
            </div>
        </div>
        <div class="list-link-col list-link-time"><span class="topx-timmer">{classical_row.recent_topic_row.S_POSTTIME}</span></div>
    </li>
    <!-- END recent_topic_row -->
    <!-- END classical_row -->
</ul>

CSS

Code:
#hotrofm-topx li{list-style:none}
#hotrofm-topx{width:100%;height:auto;position:relative;margin:10px auto;line-height:.5;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
#hotrofm-topx .lpp_hotrofm{position:relative;width:auto;background:#fff;border:1px solid #ccc;-webkit-box-shadow:0 0 12px rgba(50,50,50,0.2);-moz-box-shadow:0 0 12px rgba(50,50,50,0.2);-webkit-box-shadow:0 0 12px rgba(50,50,50,0.2);-moz-box-shadow:0 0 12px rgba(50,50,50,0.2);-khtml-box-shadow:0 0 12px rgba(50,50,50,0.2);-webkit-box-shadow:0 0 12px rgba(50,50,50,0.2);-moz-box-shadow:0 0 12px rgba(50,50,50,0.2);-khtml-box-shadow:0 0 12px rgba(50,50,50,0.2);box-shadow:0 0 12px rgba(50,50,50,0.2);margin-right:320px;margin-right:0!important}
#hotrofm-topx ul.topx-tabs{position:absolute;top:0;left:0;right:0;padding:9px 12px 3px;margin:0;text-align:left;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;-khtml-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;list-style-type:none}
#hotrofm-topx ul.topx-tabs .sub-tab{float:left;margin:0;cursor:pointer;padding:0 21px;height:31px;line-height:31px;overflow:hidden;position:relative;display:inline-block;vertical-align:top;color:#162736;font-family:arial;font-size:13px}
#hotrofm-topx ul.topx-tabs li.active{background:#4cc8f1;color:#fff;border-bottom:1px solid #FFF;margin:0 -1px;border-top:0 solid #4cc8f1}
#hotrofm-topx ul.topx-tabs li.active a{color:#fff}
#hotrofm-topx ul.topx-tabs #refresh{float:right;height:20px;width:20px;background:url(http://xdavn.com/styles/xdavn/topx/refresh.png) no-repeat center;cursor:pointer;margin:4px 10px}
#hotrofm-topx ul.topx-tabs .select-list{float:right}
#hotrofm-topx ul.topx-tabs .select-list select{padding:5px;border:1px solid #eff2f7}
#hotrofm-topx .head-col{padding:0;margin:50px 10px 5px;list-style-type:none;font-family:arial;font-size:12px;text-decoration:none;color:#162736}
#hotrofm-topx .topx-content{padding:0;margin:0 10px 10px;list-style-type:none;font-family:arial;font-size:14px;text-decoration:none}
#hotrofm-topx .topx-content .list-link{padding:5px 0 0 10px}
#hotrofm-topx .topx-content .list-link::nth(2){border-top:0}
#hotrofm-topx .topx-content .list-link:active{background-color:#eff2f7;color:#38445b}
#hotrofm-topx .list-topx-header .list-link-col,#hotrofm-topx .list-link .list-link-col{display:inline-block;padding:6px 3px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#hotrofm-topx.large .list-link-title{width:85%;min-width:200px!important}
#hotrofm-topx .list-link .list-link-col>span{width:auto;max-width:100%;display:inline-block;white-space:nowrap;text-overflow:ellipsis}
#hotrofm-topx .tooltip{display:inline;position:relative}
#hotrofm-topx .list-link .list-link-col>a{width:auto;max-width:100%;display:inline-block;color:#797979;text-decoration:none;white-space:nowrap;text-overflow:ellipsis;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
#hotrofm-topx.large .list-link-time{display:inline-block;width:15%}
#hotrofm-topx .list-link .list-link-col>span{width:auto;max-width:100%;display:inline-block;white-space:nowrap;text-overflow:ellipsis}
/* Tooltip */
#tooltip{font-size:13px;color:#666;background-color:#fff;padding:5px 10px;-webkit-border-radius:2px;-moz-border-radius:2px;-khtml-border-radius:2px;border-radius:2px;-webkit-border-bottom-left-radius:0;-moz-border-radius-bottomleft:0;-khtml-border-bottom-left-radius:0;border-bottom-left-radius:0;z-index:999;cursor:default;-webkit-box-shadow:0 2px 5px rgba(0,0,0,0.25);-moz-box-shadow:0 2px 5px rgba(0,0,0,0.25);-khtml-box-shadow:0 2px 5px rgba(0,0,0,0.25);box-shadow:0 2px 5px rgba(0,0,0,0.25)}
/*prefix*/
.prefix{background-color:#777;padding-right:10px;padding-left:10px;-webkit-border-radius:2px;-moz-border-radius:2px;-khtml-border-radius:2px;border-radius:2px;display:inline-block;line-height:20px;text-transform:uppercase;margin-right:5px}
.prefix.thong-bao{color:#fff;background-color:#EB6B6B;border-color:#F88}
.prefix.test{color:#fff;background-color:#98e2a1;border-color:#90ee90}

Widget


Tags: #latest-topic


Được sửa bởi lasperpen ngày 1/10/2016, 12:07 pm; sửa lần 1.
 Trả lời bài viết
avatar

Karbyz49234
501
137
Punbb
An toàn
Anh là vô địtt :))
Quản lý viên

Bài viết :
234
Points :
501
Like :
137
Punbb
An toàn
Anh là vô địtt :))
Hot thế, mới yêu cầu đã có rồi Smile
 Trả lời bài viết
avatar

the_dav188
267
41
Punbb
Quản trị
Trảm Phong

Bài viết :
188
Points :
267
Like :
41
Punbb
Quản trị
ngon phết mà
 Trả lời bài viết
avatar

ShanFan36
40
2
Punbb
An toàn
範黄山
Hỗ trợ viên

Bài viết :
36
Points :
40
Like :
2
Punbb
An toàn
範黄山
demo online đâu :)
 Trả lời bài viết
avatar

Kou94109
157
8
Punbb
An toàn
Oppai daisuki~
Thành viên thân thiết
Thành viên thân thiết

Bài viết :
109
Points :
157
Like :
8
Punbb
An toàn
Oppai daisuki~
@ShanFan đã viết:demo online đâu :)
Code:
http://xdavn.com/forums/
 Trả lời bài viết
avatar

ShanFan36
40
2
Punbb
An toàn
範黄山
Hỗ trợ viên

Bài viết :
36
Points :
40
Like :
2
Punbb
An toàn
範黄山
@Kou94 cái đó tôi yêu cầu mà. Cái demo tồi muốn là cái forumotion của mình có xài last đó á
 Trả lời bài viết
avatar

LASPERPEN169
357
132
Invision
Quản trị
Quản trị viên

Bài viết :
169
Points :
357
Like :
132
Invision
Quản trị
Code:
http://demohotrofm.forumvi.com/
 Trả lời bài viết
Điểm 4.6/5 dựa vào 87 đánh giá

Có Thể Bạn Quan Tâm

Đang tải...