[Tut] zzAnnouncement - Giao diện mới cho chức năng thông báo

zzAnnouncement sẽ gói gọn tất cả thông báo vào một bảng nhỏ nằm góc dưới-phải của diễn đàn, cách sử dụng không có nhiều khác biệt với chức năng mặc định nên bạn sẽ không gặp chút khó khăn nào để làm quen với nó.
Nếu bạn đã thấy nhàm chán với thông báo chạy phía trên diễn đàn thì đây chắc chắn sẽ là lựa chọn tuyệt vời dành cho bạn.

Demo:

Chức năng:
Giữ lại các tuỳ chọn của chức năng thông báo mặc định.
Dễ dàng xem từng tin thông báo riêng.
Cho phép người dùng ẩn hoặc tắt bảng thông báo.


Bước 1: Thêm vào CSS
ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet

Code:

/* zzAnnouncement v0.1 by zzbaivong (http://devs.forumvi.com) */
#zzTicker_new,#zzTicker{display:none}
#zzAnnouncement{border-left:1px solid #DDD;border-top:1px solid #DDD;position:fixed;right:0;bottom:0;width:300px;padding:5px 20px;font-family:monospace;z-index:888}
#zzAnnouncement,.zzAnnouncement-list > li{background:#333;color:#FFF}
.zzAnnouncement-title{height:26px;line-height:30px}
.zzAnnouncement-title > h2{font-size:22px;font-weight:300;text-transform:uppercase;color:#ff0;padding-left:30px;background:url(http://i.imgur.com/n3kolMS.png) no-repeat 0 center transparent}
.zzAnnouncement-button{position:absolute;right:0;top:0}
.zzAnnouncement-button > div{width:30px;height:30px;text-indent:-9999px;background:none no-repeat center center #2559FD;float:right;margin:3px 3px 3px 0}
.zzAnnouncement-button > div.zzAnnouncement-toggle{background-image:url(http://i.imgur.com/1bDKWJT.png)}
.zzAnnouncement-button > div.zzAnnouncement-close{background-color:#FF3737}
.zzAnnouncement-button > div:hover{cursor:pointer;background-color:#666;-webkit-transition:background 300ms;transition:background 300ms}
.zzAnnouncement-content{margin:18px 0 10px;overflow:hidden}
.zzAnnouncement-list{position:relative;overflow:hidden}
.zzAnnouncement-list > li{width:100%;list-style:none;position:relative;-webkit-transition:all 300ms;transition:all 300ms}
.zzAnnouncement-list > li.show{z-index:10}
.zzAnnouncement-list.zztop > li{left:0;top:-100%}
.zzAnnouncement-list.zztop > li.show{top:0}
.zzAnnouncement-list.zzbottom > li{left:0;bottom:-100%}
.zzAnnouncement-list.zzbottom > li.show{bottom:0}
.zzAnnouncement-list.zzleft > li{top:0;left:-100%}
.zzAnnouncement-list.zzleft > li.show{left:0}
.zzAnnouncement-list.zzright > li{top:0;right:-100%}
.zzAnnouncement-list.zzright > li.show{right:0}
.zzAnnouncement-paging{height:20px;line-height:20px;text-align:center;margin-top:15px}
.zzAnnouncement-paging > span{padding:2px 5px;margin:0 3px;background:#666;cursor:pointer}
.zzAnnouncement-paging > span:hover,.zzAnnouncement-paging > span.active{background:#C03AFF}

Bước 2: Tạo file javascript jQuery Plugin announcement
ACP >> Modules >> HTML & JAVASCRIPT >> Javascript codes management

Title * : javascript jQuery Plugin announcement
Placement : Không chọn bất kỳ mục nào.
Javascript Code * :

Code:

/*!
 * jQuery Plugin announcement v0.1
 *
 * by zzbaivong
 * http://devs.forumvi.com/
 */
(function(a){a.fn.announcement=function(c){var b=a.extend({width:300,speed:3E4,autoPlay:!0,close:!1,title:"Th\u00f4ng b\u00e1o",icon:{show:"http://i.imgur.com/1bDKWJT.png",hide:"http://i.imgur.com/aCZ3EGZ.png",close:"http://i.imgur.com/uPes6CG.png"}},c),g=a(this);g.addClass("zzAnnouncement-list").wrap('<div id="zzAnnouncement"><div class="zzAnnouncement-content"></div></div>');var k=a("#zzAnnouncement"),d=a(".zzAnnouncement-content"),e=a("li",g);d.before('<div class="zzAnnouncement-title"><h2>'+b.title+
'</h2><div class="zzAnnouncement-button"><div class="zzAnnouncement-toggle">Toggle</div></div></div>');var l=a(".zzAnnouncement-toggle"),p=e.length,f=0,h,m,q,r=function(){d.is(":visible")&&(q=setInterval(function(){f+=1;f==p&&(f=0);m.eq(f).click()},b.speed))};k.width(b.width);if(1<p){h=a("<div>",{"class":"zzAnnouncement-paging"});g.after(h);var n=0;e.each(function(b,c){var d=a(this).height();d>n&&(n=d);h.append(a("<span>",{"data-index":b,text:b+1}))});g.add(e).height(n);e.first().addClass("show");
e.css("position","absolute");m=a("span",h);m.first().addClass("active");m.click(function(){var b=a(this),d=b.data("index");f=d;a("li.show",g).removeClass("show");e.eq(d).addClass("show");a("span.active",h).removeClass("active");b.addClass("active")});b.autoPlay&&(r(),k.hover(function(){clearInterval(q)},function(){r()}))}c=my_getcookie("zzAnnouncement");"hidden"==c?(l.css("backgroundImage","url("+b.icon.hide+")"),d.hide()):"remove"==c?k.remove():d.hide().slideDown("slow");l.click(function(){d.stop(!0,
!1).slideToggle("slow",function(){var a,c;d.is(":hidden")?(a="hidden",c=b.icon.hide):(a=null,c=b.icon.show);l.css("backgroundImage","url("+c+")");my_setcookie("zzAnnouncement",a,!1)})});b.close&&(c=a("<div>",{style:"background-image: url("+b.icon.close+")","class":"zzAnnouncement-close"}),l.before(c),c.click(function(){k.remove();my_setcookie("zzAnnouncement","remove",!1)}))}})(jQuery);

Chú ý: Ghi nhớ liên kết tệp javascript vừa tạo

Bước 3: Thay thế chức năng thông báo mặc định của forumotion
ACP >> Display >> Templates >> QLTT >> overall_header

Tìm:

Code:

<!-- BEGIN switch_ticker -->
<link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" /> 
<script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
<!-- END switch_ticker -->

<!-- BEGIN switch_ticker_new -->
<script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
        /* Definir le sens de direction en fonction du panneau admin */
        var tickerDirParam = "{switch_ticker.DIRECTION}";
        var slid_vert = false;
        var auto_dir = 'next';
        var h_perso = parseInt({switch_ticker.HEIGHT});

        switch( tickerDirParam )
        {
                case 'top' :
                        slid_vert = true;
                        break;

                case 'left':
                        break;

                case 'bottom':
                        slid_vert = true;
                        auto_dir = 'prev';
                        break;

                case 'right':
                        auto_dir = 'prev';
                        break;

                default:
                        slid_vert = true;
        }

        $(document).ready(function() {

                var width_max = $('ul#fa_ticker_content').width();
                var width_item = Math.floor(width_max / {switch_ticker.SIZE});

                if (width_max > 0)
                {
                        $('#fa_ticker_content').css('display','block');

                        $('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).find('img').each(function () {
                                if ($(this).width() > width_item)
                                {
                                var ratio      = $(this).width() / width_item;
                                var new_height = Math.round($(this).height() / ratio);
                                $(this).height(new_height).width(width_item);
                                }
                        });

                        if (slid_vert)
                        {
                                var height_max = h_perso;

                                $('ul#fa_ticker_content li').each( function () {
                                        if ($(this).height() > height_max)
                                        {
                                                height_max = $(this).height();
                                        }
                                } );

                                $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
                                $('ul#fa_ticker_content li').height(height_max);
                        }

                        $('#fa_ticker_content').jcarousel({
                                        vertical: slid_vert,
                                wrap: 'circular',
                                auto: {switch_ticker.STOP_TIME},
                                auto_direction: auto_dir,
                        scroll: 1,
                        size: {switch_ticker.SIZE},
                        height_max: height_max,
                        animation: {switch_ticker.SPEED}
                        });
                }
                else
                {
                        $('ul#fa_ticker_content li:not(:first)').css('display','none');
                        $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
                }
        });
//]]>
</script>
<!-- END switch_ticker_new -->

và thay thế bằng:

Code:

<!-- BEGIN switch_ticker_new -->
<script src="LINK" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
$(function(){
        $("#zzTicker_new").show().announcement({
                "width":{switch_ticker.SPACING},
                "speed":{switch_ticker.SPEED}000,
                "autoPlay":!!{switch_ticker.STOP_TIME},
                "close":!!{switch_ticker.HEIGHT},
                "title": "Thông báo",
                "icon": {
                        "show": "http://i.imgur.com/1bDKWJT.png",
                        "hide": "http://i.imgur.com/aCZ3EGZ.png",
                        "close": "http://i.imgur.com/uPes6CG.png"
                }
        });
});
//]]>
</script>
<!-- END switch_ticker_new -->

<!-- BEGIN switch_ticker -->
<script src="LINK" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
$(function(){
        $("#zzTicker").show().announcement({
                "width":{switch_ticker.SPACING},
                "speed":{switch_ticker.SPEED}000,
                "autoPlay":!!{switch_ticker.STOP_TIME},
                "close":!!{switch_ticker.HEIGHT},
                "title": "Thông báo",
                "icon": {
                        "show": "http://i.imgur.com/1bDKWJT.png",
                        "hide": "http://i.imgur.com/aCZ3EGZ.png",
                        "close": "http://i.imgur.com/uPes6CG.png"
                }
        });
});
//]]>
</script>
<!-- END switch_ticker -->

Chú ý: Thay LINK(dòng 2 và 23) trong code trên bằng liên kết tệp javascript tạo ở bước 2.

Tìm và xoá:

Code:

<!-- BEGIN switch_ticker -->
        $(window).load(function() {           
                Ticker.start({
                        height : {switch_ticker.HEIGHT},
                        spacing : {switch_ticker.SPACING},
                        speed : {switch_ticker.SPEED},
                        direction : '{switch_ticker.DIRECTION}',
                        pause : {switch_ticker.STOP_TIME}
                });
        });
<!-- END switch_ticker -->

Tìm và xoá:

Code:

<!-- BEGIN switch_ticker_new -->
<style>
.jcarousel-skin-tango .jcarousel-item {
        text-align:center;
        width: 10px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
        margin-right: {switch_ticker.SPACING}px;
}

.jcarousel-skin-tango .jcarousel-item-vertical {
        margin-bottom: {switch_ticker.SPACING}px;
}
</style>
<!-- END switch_ticker_new -->

Tìm:

Code:

<!-- BEGIN switch_ticker_new -->
<div id="fa_ticker_block" style="padding-top:4px;">
        <div class="module main">
                <div class="main-content clearfix">
                        <div id="fa_ticker_container">
                                <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display: none;width: 100%;">
                                        <!-- BEGIN ticker_row -->
                                        <li>{switch_ticker.ticker_row.ELEMENT}</li>
                                        <!-- END ticker_row -->
                                </ul>
                        </div>
                </div>
        </div>
</div>
<!-- END switch_ticker_new -->

<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="padding-top:4px;">
        <div class="module main">
                <div class="main-content clearfix">
                        <div id="fa_ticker_container">
                                <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                                        <div class="fa_ticker_content">
                                                <!-- BEGIN ticker_row -->
                                                <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                                <!-- END ticker_row -->
                                        </div>
                                </div>
                        </div>
                </div>
        </div>
</div>
<!-- END switch_ticker -->

và thay thế bằng

Code:

<!-- BEGIN switch_ticker_new -->                               
<ul id="zzTicker_new" class="zz{switch_ticker.DIRECTION}">
<!-- BEGIN ticker_row -->
    <li>{switch_ticker.ticker_row.ELEMENT}</li>
<!-- END ticker_row -->
</ul>
<!-- END switch_ticker_new -->                           

<!-- BEGIN switch_ticker -->
<ul id="zzTicker" class="zz{switch_ticker.DIRECTION}">
<!-- BEGIN ticker_row -->
    <li>{switch_ticker.ticker_row.ELEMENT}</li>
<!-- END ticker_row -->
</ul>     
<!-- END switch_ticker -->

ACP >> QLTT >> Messages and e-mails >> Announcements

>> General announcements options: Tùy chọn chức năng

Activate announcements : Bật/tắt chức năng thông báo
Announcements display : Trang sẽ hiển thị thông báo
Scrolling : Hướng chuyển tin thông báo.
Scrolling speed : Thời gian chuyển giữa 2 tin kế tiếp. Đơn vị: giây(seconds).
Stop time : zzAnnouncement sử dụng thông số này với vai trò auto play, nhận 2 giá trị 0 hoặc 1:
0: Không tự chuyển tin nhắn.
1: Tự chuyển tin nhắn sau thời gian định trước (Scrolling speed).

Space between announcements (in pixels) : zzAnnouncement sử dụng thông số này với vai trò width để xác định chiều rộng cho bảng thông báo. Đơn vị: px(pixels).
Announcements block height (in pixels) : zzAnnouncement sử dụng thông số này với vai trò close để bật/tắt nút đóng bảng thông báo, nhận 2 giá trị 0 hoặc 1:
0: Không hiển thị nút đóng.
1: Hiển thị nút đóng.

Ví dụ:

>> Announcements: Danh sách các tin thông báo

Bạn có thể thêm nhiều thông báo mới bằng cách click vào nút +.
Chú ý: Nếu bạn chọn Scrolling là Deactivate, thì thông báo sẽ chỉ hiển thị tin đầu tiên.

PS Nếu có lỗi gì các bạn comment tại topic này