Đăng Nhập

Vui lòng khai báo chính xác tên truy cập và mật khẩu!

Quên mật khẩu?

Đăng Ký

Bạn phải điền đầy đủ thông tin đăng ký!

  

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

    Quản trị viên

    avatar

    Bài viết : 89

    Tài sản : 275

    Uy tín : 7

    #1

     on 21.08.15 13:25 

    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: #tutorial #mod #jquery-plugin #phpbb2 #phpbb3 #punbb #invision #announcements
    You cannot reply to topics in this forum