[TUTs] zzChat - Chatbox forumvi - v0.2

  Bài viết hay nhất1
First topic message reminder :

zzChat - Chatbox forumvi - v0.2


zzChat là là một ứng dụng chat sử dụng dữ liệu từ chatbox mặc định trong forumotion, cải tiến và bổ sung các chức năng mới, giúp cho việc chat trở nên thú vị hơn.


Demo

[You must be registered and logged in to see this image.]
Giao diện zzChat v0.2


Chức năng


  1. Chat riêng giữa 2 thành viên với nhau.
  2. Chọn màu chữ ngẫu nhiên.
  3. BUZZ, gây chú ý cho người chat khác.
  4. Tự đăng nhập, chống kick.
  5. Tích hợp bộ smiley mặc định của facebook.
  6. Thông báo số tin nhắn mới.
  7. Giữ lại tin cũ, giúp cuộc trò chuyện không bị gián đoạn.


Hướng dẫn


Bước 1

Tạo trang HTML mới, sử dụng code sau:

Code:
<!DOCTYPE HTML>
<html>

<head>
   <meta charset="utf-8" />
   <title>Chatbox forumvi</title>
   <link rel="stylesheet" type="text/css" href="http://baivong.github.io/cdn/zzchat/0.2/zzchat.min.css" />
</head>

<body>

   <div id="chatbox-forumvi">

      <div id="chatbox-header">
         <div id="chatbox-me">
            <h2>...</h2>
            <div id="chatbox-action-logout"></div>
            <div class="chatbox-action-checkbox autologin">
               <input type="checkbox" id="chatbox-input-autologin" name="autologin" checked />
               <label for="chatbox-input-autologin">Tự đăng nhập</label>
            </div>
            <div id="chatbox-hidetab" class="show"></div>
         </div>
         <div id="chatbox-title" data-id="publish">
            <h2>Kênh chung</h2>
            <div class="chatbox-action-group edit"></div>
            <div class="chatbox-action-group add"></div>
            <div class="chatbox-action-group close chatbox-action" data-action="/out"></div>
            <div class="chatbox-action-checkbox refresh">
               <input type="checkbox" id="chatbox-input-autorefesh" name="autorefesh" checked />
               <label for="chatbox-input-autorefesh">Tự cập nhật</label>
            </div>
         </div>
      </div>

      <div id="chatbox-tabs">
         <div id="chatbox-list">
            <div class="chatbox-change active" data-id="publish">
               <h3>Kênh chung</h3>
               <span class="chatbox-change-mess" data-mess="0"></span>
            </div>
         </div>
         <div id="chatbox-members"></div>
         <div id="chatbox-copyright">© 2014 - devs forumvi</div>
      </div>

      <div id="chatbox-main">
         <div id="chatbox-wrap">
            <div class="chatbox-content" data-id="publish">
            </div>
         </div>
         <div id="chatbox-messenger-form">
            <form id="chatbox-form" data-key="">
               <input type="hidden" name="sbold" id="chatbox-input-bold" value="0" />
               <input type="hidden" name="sitalic" id="chatbox-input-italic" value="0" />
               <input type="hidden" name="sunderline" id="chatbox-input-underline" value="0" />
               <input type="hidden" name="sstrike" id="chatbox-input-strike" value="0" />
               <input type="hidden" name="scolor" id="chatbox-input-color" value="333333" />
               <div id="chatbox-messenger">
                  <input type="text" name="message" id="chatbox-messenger-input" data-id="publish" maxlength="1024" autocomplete="off" />
               </div>
               <div id="chatbox-option">
                  <div id="chatbox-option-bold">B</div>
                  <div id="chatbox-option-italic">I</div>
                  <div id="chatbox-option-underline">U</div>
                  <div id="chatbox-option-strike">S</div>
                  <div id="chatbox-option-color" style="background: #333333;"></div>
                  <div id="chatbox-option-smiley"></div>
                  <div id="chatbox-option-buzz">BUZZ</div>
                  <div id="chatbox-option-submit">
                     <input type="submit" value="Gửi tin" id="chatbox-submit" />
                  </div>
               </div>
            </form>
         </div>
      </div>

   </div>

   <audio id="chatbox-buzz-audio">
      <source src="http://baivong.github.io/cdn/zzchat/sound/buzz.ogg" type="audio/ogg" />
      <source src="http://baivong.github.io/cdn/zzchat/sound/buzz.mp3" type="audio/mpeg" />
   </audio>

   <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

   <script type="text/javascript" src="http://baivong.github.io/cdn/zzchat/0.2/zzchat.min.js"></script>
</body>

</html>
Chú ý: Ghi nhớ page_id của trang HTML vừa tạo.

Bước 2

Thay thế mã {CHATBOX_TOP} trong index_body bằng:

Code:
<!-- BEGIN switch_user_logged_in -->
<div class="main">
   <div class="main-content chatbox clearfix">
      <div id="chatbox_top" style="height: 420px; border: 1px solid #DDD;">
         <iframe src="/h{PAGE_ID}-chatbox" id="frame_chatbox" scrolling="auto" frameborder="0" height="100%" width="100%"></iframe>
      </div>
      <div style="resize">
         <img src="http://illiweb.com/fa/resize.gif" onmousedown="javascript:resizeElement(event, 'chatbox_top');" alt="" style="cursor:se-resize; float: right;" />
      </div>
   </div>
</div>
<!-- END switch_user_logged_in -->
Invision:

Code:
<!-- BEGIN switch_user_logged_in -->
<div class="borderwrap">
   <div class="maintitle floated">
      <h2>Chatbox</h2>
      <div class="contract" id="bcb" onclick="toggleCategory('cb');">
         &nbsp;&nbsp;&nbsp;
      </div>
   </div>
   <div id="cb" class="maincontent">
      <div id="chatbox_top" style="height: 420px;">
         <iframe src="/h{PAGE_ID}-chatbox" id="frame_chatbox" scrolling="auto" frameborder="0" height="100%" width="100%"></iframe>
      </div>
      <div style="resize">
         <img src="http://illiweb.com/fa/resize.gif" onmousedown="javascript:resizeElement(event, 'chatbox_top');" alt="" style="cursor:se-resize; float: right;" />
      </div>
   </div>
</div>
<!-- END switch_user_logged_in -->
Chú ý: Thay {PAGE_ID} trong code trên bằng, số page_id của trang HTML tạo ở bước 1.

Bước 3

Thêm vào CSS

Code:
#chatbox_header, #chatbox_members, #chatbox, #chatbox_footer {
   display: none;
}


Ghi chú

Trong zzChat, các chức năng luôn có sẵn nút bấm hoặc danh sách lựa chọn để sử dụng, tuy nhiên bạn cũng có thể dùng nhanh bằng cách lệnh CMD:

  • /toggle : Đóng mở cột thông tin thành viên. Lưu ý: Khi cột thành viên đóng lại, bạn sẽ không bị làm phiền bởi chức năng BUZZ
  • /chat {NICKNAME} : Sử dụng chức năng chat riêng. Trong đó: {NICKNAME} là thành viên bạn muốn chat.
  • /out : Rời khỏi phòng chat riêng.
  • /buzz : Kích hoạt chức năng BUZZ.
    Các lệnh CMD mặc định của chatbox vẫn được giữ nguyên

zzChat được phát triển hướng đến chức năng chat riêng, chat nhóm (đang phát triển) nên trong lúc bạn chat thì các tin nhắn cũ sẽ không bị mất đi, dù Mod/Admin dọn dẹp chatbox bằng chức năng Clear.
Theo dõi và tham gia phát triển zzChat tại [You must be registered and logged in to see this link.]


Nguồn

Zzbaivong (devs.forumvi.com)
  Bài viết hay nhất26
Làm sao để chỉnh sửa phần hiển thị thời gian nằm trước nick vậy BaiVong? Tiện thể cho hỏi luôn các xóa @ trước nick :D
  Bài viết hay nhất27
Có thể sửa được, nhưng bạn nên đợi phiên bản kế tiếp.
  Bài viết hay nhất28
[You must be registered and logged in to see this link.]
Zzbaivong wrote:Có thể sửa được, nhưng bạn nên đợi phiên bản kế tiếp.
Vậy cho mình xin đoạn CSS để ẩn kí tự "@" đi được không?
  Bài viết hay nhất29
Code:
ul.online-users li a{font-size:0}
ul.online-users li a span:last-child{font-size:14px}
#chatbox-wrap span.user > span{display:none}
  Bài viết hay nhất30
Zzbaivong wrote:1. Khi có người nhắn sẽ tự focus để trò chuyện dễ dàng hơn, nếu bạn dùng ở tất cả trang thì nên có chế độ ẩn cho chatbox.
Còn cách nào khác không?
Hay là xóa đoạn này...
Code:
 $.get("/chatbox/chatbox_actions.forum?archives=1&mode=refresh").done(function(data) {
            getDone(data);
            $messenger.focus();
        });
...trong js?
  Bài viết hay nhất31
Xóa:
Code:
$messenger.focus();
  Bài viết hay nhất32
Xóa hết 4 dòng "$messenger.focus();" hả BaiVong? Mình chỉ xóa 1 dòng trong đoạn mình đưa ra và kết quả vẫn như cũ.
The author of this message was banned from the forum - See the message
  Bài viết hay nhất34
Ver 2 có thể làm đc, ver 1 ngừng phát triển rồi.
The author of this message was banned from the forum - See the message
The author of this message was banned from the forum - See the message
  Bài viết hay nhất37
Anh Vong ơi, cho em xin code ko có trò truyện riêng, đừng hiển thị thanh bên ai online, cứ để mặc định mở rộng, được ko anh, em muốn chèn bên wigdet cho nó tiện .
  Bài viết hay nhất38
[You must be registered and logged in to see this link.]
roseila wrote:Anh Vong ơi, cho em xin code ko có trò truyện riêng, đừng hiển thị thanh bên ai online, cứ để mặc định mở rộng, được ko anh, em muốn chèn bên wigdet cho nó tiện .
Được nhưng phải đợi. Phiên bản sau sẽ ở dạng jquery plugin. Dễ chỉnh sửa hơn cái này.
Hỏi thì đừng viết chữ size 16 nha. Không lịch sự lắm.
  Bài viết hay nhất39
hử.... s phải lịch sự hay ko lịch sự.... ize 16 có zấn đề gì ah
  Bài viết hay nhất40
@roseila: Ờ, bạn để size to như kiểu đấm vào mặt người ta ấy, hỏi thì viết size nhỏ lại.
  Bài viết hay nhất41
haizzzz... viết size to để nhìn cho nó rõ ràng thui, nhìn nó tương đối dễ nhìn, chứ chả có ý gì, quả là phiền phức
  Bài viết hay nhất42
Nhìn như thế không phải nhờ mà là sai bảo người khác
  Bài viết hay nhất43
Cái đó là do mọi người nghĩ nhiều thôi.... -_- chả hiểu
  Bài viết hay nhất44
[You must be registered and logged in to see this link.]
roseila wrote:Cái đó là do mọi người nghĩ nhiều thôi.... -_- chả hiểu
grow up đi rồi sẽ hiểu [You must be registered and logged in to see this image.] mọi người chỉ nói cho bạn lý do thôi, không có gì phiền phức hết. Mình chỉ góp ý cho bạn là viết chữ to không được lịch sự cho lắm, chứ không cấm bạn viết chữ to.
The author of this message was banned from the forum - See the message
  Bài viết hay nhất46
/clear bạn ạ, cái đó nó không cập nhật ngay được mà phải đợi 1 lát hay vô topic mới rồi ra lại nó mới xóa nó mới xóa :))
  Bài viết hay nhất47
@Mr.Bean: Không đọc ghi chú cuối cùng ah?
  Bài viết hay nhất48
Zzbaivong wrote:Các lệnh CMD mặc định của chatbox vẫn được giữ nguyên

Zzbaivong wrote:zzChat được phát triển hướng đến chức năng chat riêng, chat nhóm (đang phát triển) nên trong lúc bạn chat thì các tin nhắn cũ sẽ không bị mất đi, dù Mod/Admin dọn dẹp chatbox bằng chức năng Clear.

Em nghe ạ, do bác ý hỏi nên em trả lời thui :D
  Bài viết hay nhất49
This code is not english. :(
  Bài viết hay nhất50
Sao giờ cái chatbox của em ko BUZZ được zị :(
You cannot reply to topics in this forum