[Topx] style đơn giản nhưng màu mè

  • Giựt
    1. [Topx] style đơn giản nhưng màu mè
    avatar MOD

    Đề mô




    Code:
    http://forumchemgio123.123.st

    Cách làm


    APC >> Display >> Templates >> Portal

    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 /> Gửi cuối :
                        <!-- 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>

    Vào index_body thêm vào sau {JAVASCRIPT} code :

    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 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>

    Ok sắp xếp như sau :

Thông tin tác giả
avatar
MOD
Bài viết :
273
Points :
440
Like :
89
Punbb
Cẩn thận
Status :
Giựt đẹp trai
Xem lý lịch thành viên
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết