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

@kingofgame wrote: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

Đặt một biến current để ghi lại giá trị index.
Dùng phương thức setTimeout để thay đổi current sau một khoảng thời gian 10 giây chẳng hạn.
Kích hoạt hiển thị phần tử dựa trên current mỗi khi nó được thay đổi.
Vậy là thành slideshow thôi.

Xem chi tiết trong mã nguồn hoặc một ví dụ tương tự tại đây.
  Bài viết hay nhất52
Đặt cái này ở đâu thì nó nằm ở đó phải ko Baivong?

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

Mình muốn nó nằm 1 chỗ cố định chứ ko muốn nó trượt theo con trỏ. :)
  Bài viết hay nhất53

@anhdaodaica1 wrote:Đặt cái này ở đâu thì nó nằm ở đó phải ko Baivong?

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

Mình muốn nó nằm 1 chỗ cố định chứ ko muốn nó trượt theo con trỏ. :)

Thế thì phải sửa 1 số thuộc tính của nó như bỏ cái thuộc tính position đi ( em nghĩ bác cũng biết )....
  Bài viết hay nhất54

@kingofgame wrote:
@anhdaodaica1 wrote:Đặt cái này ở đâu thì nó nằm ở đó phải ko Baivong?

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

Mình muốn nó nằm 1 chỗ cố định chứ ko muốn nó trượt theo con trỏ. :)

Thế thì phải sửa 1 số thuộc tính của nó như bỏ cái thuộc tính position đi ( em nghĩ bác cũng biết )....
Rõ ràng là phải bỏ đi cái đó rồi :D
You cannot reply to topics in this forum