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

  Bài viết hay nhất1
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.


Giao diện chức năng thông báo


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


Ví dụ cách tùy chỉnh

>> 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 ScrollingDeactivate, 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
The author of this message was banned from the forum - See the message
  Bài viết hay nhất27
Có lỗi gì đâu mà up? Ăn hại quá
  Bài viết hay nhất28
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 ạ
  Bài viết hay nhất29
Lỗi link script, kiểm tra lại http://boomtest.forumvi.com/18942.js
  Bài viết hay nhất30
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
The author of this message was banned from the forum - See the message
  Bài viết hay nhất32
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;
}
The author of this message was banned from the forum - See the message
  Bài viết hay nhất34
Làm sao đề có chức năng xóa (tắt) bảng thông báo giống devs được ạ?
  Bài viết hay nhất35
Bạn cần đọc kỹ lại bài hướng dẫn của chủ thớt, nhất là phần CÁCH SỬ DỤNG. Muốn có chức năng xóa (tắt) Bảng thông báo thì chỉ việc nhập số 1 vào mục Announcements block height (in pixels) là xong.

  Bài viết hay nhất36
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
  Bài viết hay nhất37
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.
  Bài viết hay nhất38

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
  Bài viết hay nhất39

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
  Bài viết hay nhất40
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!
  Bài viết hay nhất41
up
  Bài viết hay nhất42
thêm vào css :
Code:
#zzAnnouncement {height : <chiều cao cần>px}
-_-
  Bài viết hay nhất43

anhoang_qn wrote:thêm vào css :
Code:
#zzAnnouncement {height : <chiều cao cần>px}
-_-

Mình đã sửa nhưng tắt thì nó chỉ mất bài viết chứ khung không đóng xuống...
  Bài viết hay nhất44
sửa lại đoạn trên thành
Code:
.zzAnnouncement-content{height : <chiều cao>px;}
  Bài viết hay nhất45

anhoang_qn wrote:sửa lại đoạn trên thành
Code:
.zzAnnouncement-content{height : <chiều cao>px;}

Good mình làm được rồi, thank bạn nhiều lắm!
  Bài viết hay nhất46
Làm sao để giảm chiều cao của khung và để mặc định là chế độ thu gọn? Cảm ơn giải đáp!
  Bài viết hay nhất47
@congchuatoandau: tùy vào độ dài của thông báo mà khung thông báo tùy biến liên tục nhé :">
  Bài viết hay nhất48

Kelvin_Kingleon wrote:tùy vào độ dài của thông báo mà khung thông báo tùy biến liên tục nhé :">
Ngay cả khi bạn chỉ viêt một vài kí tự trong thông báo thì kích thước của nó cũng vẫn không thể thu gọn lại. Ý mình chính là giảm kích thước mặc định của khung này theo chiều trục tung.
  Bài viết hay nhất49
bạn có thể cho mình mượn demo xem tí được không :))
  Bài viết hay nhất50
Bác vong bác có thể rút gọn cho em cái js slideshow chuyển từ thông báo này sang thông báo khác được không
You cannot reply to topics in this forum