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

First topic message reminder :

jQuery plugin Announcement sẽ gói gọn tất cả thông báo vào một bảng nhỏ nằm bên dưới 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

https://baivong.github.io/announcement/

Chức năng

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

Hướng dẫn

Cài đặt

ACP >> Display >> Templates >> QLTT >> overall_header

Tìm:

Code:

{JS_DIR}jquery/ticker/ticker.css

và thay bằng:

Code:

//baivong.github.io/announcement/dist/jquery.announcement.css

Tìm:

Code:

{JS_DIR}jquery/ticker/ticker.js

và thay bằng:

Code:

//baivong.github.io/announcement/dist/jquery.announcement.min.js

Tìm:

Code:

Ticker.start({
    height : {switch_ticker.HEIGHT},
    spacing : {switch_ticker.SPACING},
    speed : {switch_ticker.SPEED},
    direction : '{switch_ticker.DIRECTION}',
    pause : {switch_ticker.STOP_TIME}
});

và thay bằng:

Code:

var tickerDirection = '{switch_ticker.DIRECTION}',
    tickerEffect = '',

    tickerWidth = {switch_ticker.SPACING},
    tickerHeight = {switch_ticker.HEIGHT};

if (tickerWidth === 0) tickerWidth = 'auto';
if (tickerHeight === 0) tickerHeight = 'auto';

switch (tickerDirection) {
    case 'top':
        tickerEffect = 'zoom-in';
        break;

    case 'left':
        tickerEffect = 'rotate-left';
        break;

    case 'bottom':
        tickerEffect = 'zoom-out';
        break;

    case 'right':
        tickerEffect = 'shuffle';
        break;

    default:
        tickerEffect = 'fading';
}

$('#announcements').announcement({

    title: 'Thông báo',

    showToggle: true,
    showClose: !!{switch_ticker.STOP_TIME},

    position: 'bottom-right',

    width: tickerWidth,
    height: tickerHeight,

    speed: {switch_ticker.SPEED},

    effect: tickerEffect

});

Nếu bạn muốn bảng thông báo nằm bên trái thì trong code trên, dòng 38, sửa bottom-right thành bottom-left. Ở dòng 33, bạn cũng có thể thay Thông báo, bằng tiêu đề khác phù hợp hơn.

Tìm:

Code:

<!-- 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 bằng:

Code:

<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="display: none;">
    <ul id="announcements">
        <!-- BEGIN ticker_row -->
        <li>{switch_ticker.ticker_row.ELEMENT}</li>
        <!-- END ticker_row -->
    </ul>
</div>
<!-- END switch_ticker -->

Tìm và xoá:

Code:

<!-- BEGIN switch_ticker_new -->
Bao gồm cả code nằm bên trong nó
Có 3 đoạn switch_ticker_new như thế này
<!-- END switch_ticker_new -->

Sử dụng

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 : Hiệu ứ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 : jQuery Announcement sử dụng thông số này với vai trò showClose, nhận 2 giá trị 0 hoặc 1 để tắt hoặc bật nút đóng.
  
• Space between announcements (in pixels) : jQuery Announcement sử dụng thông số này với vai trò width để xác định chiều rộng. Đơn vị: px(pixels).
  
• Announcements block height (in pixels) : jQuery Announcement sử dụng thông số này với vai trò height để xác định chiều cao. Đơn vị: px(pixels).
  

>> 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 +.
Nếu bạn chọn Scrolling là Deactivate, thì thông báo sẽ chỉ hiển thị duy nhất tin đầu tiên.

Nguồn

Zzbaivong (devs.forumvi.com)

---

Tags: #mod #jquery-plugin #tutorial #phpbb2 #phpbb3 #punbb #invision #announcement

Zzbaivong wrote:Trong temp xóa chưa hết, nói chung là tìm code bao quanh bằng cặp tag:

Code:

<!-- BEGIN switch_ticker -->
..
<!-- END switch_ticker_new -->

...hoặc:

Code:

<!-- BEGIN switch_ticker -->
..
<!-- END switch_ticker_new -->

...mà xóa hết đi, trừ code của zzAnnouncement.

ok thank bác để mình thử lại thank bạn

nếu muốn chuyễn bản thông báo sang bên trái thì lam thế nào

Tìm trong CSS của #zzAnnouncement, sửa right thành left.

Zzbaivong wrote:Tìm trong CSS của #zzAnnouncement, sửa right thành left.

làm gì có ở Css bác @@ e tìm rồi

Ý của e là Tin Nổi Bật của bác, đang nằm bên phãi, e muốn dời nó qua bên góc trái thì chỉnh phần nào ấy mà

Tìm lại đi, tìm không thấy thì... thôi. -_-

LilKhang1994 wrote:Ý của e là Tin Nổi Bật của bác, đang nằm bên phãi, e muốn dời nó qua bên góc trái thì chỉnh phần nào ấy mà

trong css dòng 3 tìm

Code:

right:0

thay right thành left

http://vnanimefc.5forum.net/?tt=1
Em bị lỗi ùi anh ZzBaiVong ơi :((

Tìm trong CSS của bạn, đoạn sau:

Code:

3, 3);"],span[style="color: rgb(26,span[style="color:#1A0303"]{text-decoration:line-through}

...và xóa nó đi.

Nếu vẫn không được thì đặt CSS của zzAnnouncement lên đầu.

Em làm đc gùi Thanks anh ^.^~

http://city-world.yourme.net/

Có lỗi gì đâu mà up? Ăn hại quá

Ad ơi của mình làm lúc trưa thì đc nhưng đến giờ nó ko hiện bảng nữa mà hiện ở đầu forum
http://vngiaitri.123.st/

Mặc dù đã kiểm tra lại temp đủ hết rùi ạ

Lỗi link script, kiểm tra lại http://boomtest.forumvi.com/18942.js

Cảm ơn Ad :3 lúc nãy đổi tên miền quên mất ko đổi js chỉ đổi số đằng sau :v mình ngu thật :3

Các bác giúp em chỉnh lại cái bảng Thông báo với, em làm theo tất cả các bước rồi và đảm bảo là Đúng theo hướng dân nhưng trên ƠHPBB3 và nó bị lệch như thế này ... Liệu có sửa đc k các bác?
-- Demo: https://i.imgur.com/govOzlG.png
-- Demo Online: http://www.teenvi.com/

Tìm đoạn css của .zzAnnouncement-title > h2 thêm vào thuôc tính margin: 0; như thế này:

Code:

.zzAnnouncement-title > h2 {
    background: url('http://i.imgur.com/n3kolMS.png') no-repeat scroll 0px center transparent;
    color: #FF0;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 22px;
    padding-left: 30px;
    margin: 0;
}

Á, anh ơi, nó lại đoạp troai như anh của ngày hôm woa rồi, cảm ơn anh nhé ,,,, hhaaha

Làm sao đề có chức năng xóa (tắt) bảng thông báo giống devs được ạ?

sao diễn đàn của em làm lần đầu thì thấy được, sau sửa lại thì nó ko thấy đâu hết

Hình như cái bảng thông báo này kị với các hộp thoại khác của forum. Chẳng hạn như đang mở hộp thoại chèn link. Chèn không nhanh thì bị đóng lại khi bảng thông báo chyển qa tin mới.

congdantoancau wrote:Hình như cái bảng thông báo này kị với các hộp thoại khác của forum. Chẳng hạn như đang mở hộp thoại chèn link. Chèn không nhanh thì bị đóng lại khi bảng thông báo chyển qa tin mới.

Mình chỉ bật thông báo trên trang chủ nên không để ý vụ này, sẽ cập nhật sau vậy. :P

Kelvin_Kingleon wrote:sao diễn đàn của em làm lần đầu thì thấy được, sau sửa lại thì nó ko thấy đâu hết

Nhấn F5 load lại trang hoặc tắt trình duyệt, khởi động lại xem

Mình đã sử dụng code zzAnnouncement theo sự hướng dẫn tại Devs, nhưng có một điểm mình cần trợ giúp là làm max chiều cao của khung thông báo!
Code khung hiện nay có thể chưa được cố định vì chiều cao nó phụ thuộc vào độ dài ngắn của thông tin của người viết, vậy xin bạn nào biết cách chèn code làm cho khung cố định lại chiều cao cho dù có đánh nhiều thông tin vẫn không bị thay đổi.


Mình xin cám ơn trước!