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

  Bài viết hay nhất1
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ất2
hihi code này hay ... tks baivong!! sẵn bóc tem luôn kkkk !! :3
  Bài viết hay nhất3
Bác vong dìm hàng Méo :v Ném đá hội đồng nhá :v
  Bài viết hay nhất4
Thiệt là đau lòng lắm hóa điên dại mà :'(
  Bài viết hay nhất5
Nổi hứng nhất thời. :D
Cơ mà viết thế này mới là viết chứ, đâu phải cứ viết tạm bợ, chạy được xong. :v
Ps: Dìm hàng người khác đúng là khoái cảm khó kìm chế mà. :fb148:
  Bài viết hay nhất6
Nhưng mà giúp đỡ code đẹp thế này cũng tốt hơn là dùng code méo đưa :v
  Bài viết hay nhất7
Anh có thể giúp em đưa cái thông báo đó đi chỗ khác được không, ở giữa dưới cùng chẳng hạn!
  Bài viết hay nhất8
@nghiahungdn2000 wrote:Anh có thể giúp em đưa cái thông báo đó đi chỗ khác được không, ở giữa dưới cùng chẳng hạn!
Thay CSS của #zzAnnouncement:
Code:
#zzAnnouncement {
   border: 1px solid #DDD;
   position: fixed;
   left: 50%;
   margin-left: -150px;
   bottom: 0;
   width: 300px;
   padding: 5px 20px;
   font-family: monospace;
   z-index: 888;
}
  Bài viết hay nhất9
Mình không hiểu lý do vì sao Baivong lại xóa comment của mình ? Mình chỉ muốn áp dụng bảng thông báo này cho nhiều mục đích khác nhau thôi mà .
  Bài viết hay nhất10
Không liên quan đến chủ đề!
  Bài viết hay nhất11
Đổi màu được không, thành màu xanh dương nhạt chẳng hạn
  Bài viết hay nhất12
@khaiproqn81 wrote:Đổi màu được không, thành màu xanh dương nhạt chẳng hạn
Chỉnh trong CSS, khá đơn giản. :D
The author of this message was banned from the forum - See the message
  Bài viết hay nhất14
bác admin giúp mình với mình làm theo ok hết nhưng nó bị chèn doạn thông báo ở trên đầu trang

demo:
http://toilait.forumvi.com/forum
mong bác giúp sớm
  Bài viết hay nhất15
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 -->
...hoặc:
Code:
<!-- BEGIN switch_ticker_new -->
..
<!-- END switch_ticker_new -->
...mà xóa hết đi, trừ code của zzAnnouncement.
  Bài viết hay nhất16
@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
  Bài viết hay nhất17
nếu muốn chuyễn bản thông báo sang bên trái thì lam thế nào
  Bài viết hay nhất18
Tìm trong CSS của #zzAnnouncement, sửa right thành left.
  Bài viết hay nhất19
@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
  Bài viết hay nhất20
Ý 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à
  Bài viết hay nhất21
Tìm lại đi, tìm không thấy thì... thôi. -_-
  Bài viết hay nhất22
@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
  Bài viết hay nhất23
http://vnanimefc.5forum.net/?tt=1
Em bị lỗi ùi anh ZzBaiVong ơi :((
  Bài viết hay nhất24
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.
  Bài viết hay nhất25
Em làm đc gùi Thanks anh ^.^~
You cannot reply to topics in this forum