[TUTs] zzChat - Chatbox forumvi - v0.2

  Bài viết hay nhất1

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ất2
Hàng quá nóng luôn huynh ơiiiiiii ~~~ :v
  Bài viết hay nhất3
Demo toàn mấy con thụ chém gió tối qua =))
The author of this message was banned from the forum - See the message
  Bài viết hay nhất5
I don't know, why it's not working in  my forum
[You must be registered and logged in to see this link.]
ID: test0
pass: 12345678aa
  Bài viết hay nhất6
Where's yours chatbox?
  Bài viết hay nhất7
I don't know. Chatbox is active. code installed. But not showing
  Bài viết hay nhất8
Vậy là phải đổi forum sang INVISION mới làm được hả, hay punBB đều làm được cả???
  Bài viết hay nhất9
[You must be registered and logged in to see this link.] wrote:Vậy là phải đổi forum sang INVISION mới làm được hả, hay punBB đều làm được cả???

All Version -_-
  Bài viết hay nhất10
punbb làm ko đc hõ
  Bài viết hay nhất11
[You must be registered and logged in to see this link.] wrote:punbb làm ko đc hõ

Nhắc lại lần cuối: All Version -_-
  Bài viết hay nhất12
Kazuto cho Rin hỏi có dùng dc cho punbb ko :P
  Bài viết hay nhất13
[You must be registered and logged in to see this link.] wrote:Kazuto cho Rin hỏi có dùng dc cho punbb ko :P

Hắn có nói All Ver rồi mà bác Rin :v
  Bài viết hay nhất14
[You must be registered and logged in to see this link.] wrote:
[You must be registered and logged in to see this link.] wrote:Kazuto cho Rin hỏi có dùng dc cho punbb ko :P

Hắn có nói All Ver rồi mà bác Rin :v

Cat làm hụt hứng quá thực sự là biết all ver mà tại Rin đọc hết cmt rùi nhưng mún trêu cho vui thui thế mà Cat làm tụt luôn :'(
  Bài viết hay nhất15
@@ chả biết nói gì ngoài lời cảm ơn @@
Mong hóng thêm mod :3
  Bài viết hay nhất16
Đậu , hôm nay vào đọc mới thấy cái hình , e thề hận bác cả đời bác ạ
  Bài viết hay nhất17
Đổi mặc định chatbox không auto login thì làm sao nhỉ
  Bài viết hay nhất18
[You must be registered and logged in to see this link.]
[You must be registered and logged in to see this link.] wrote:I don't know. Chatbox is active. code installed. But not showing
f12, copy and then paste your console log here
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ất21
Vẫn dùng được bình thường, đôi lúc lỗi iframe của cái đồng hồ và iframe chat cũ(nằm cuối trang, có thể là ở index-body hoặc footer-begin) lẫn vào.
Cập nhật: Lỗi do cookie/cache trong firefox. Xóa cookie/cache là dùng được bình thường.
  Bài viết hay nhất22
lỗi ko chát riêng được demo: [You must be registered and logged in to see this link.]
nick tex: zzchat
pass: 21122012
cám ơn
  Bài viết hay nhất23
Tìm trong kiểm duyệt từ, có từ nào giống style hoặc tương tự, và xóa đi.
  Bài viết hay nhất24
Lỗi còn tồn tại:
1. Đang soạn topic mới, nếu có ai pm chatbox thì con trỏ sẽ nhảy sang khung nhập text của chatbox.
2. Khi di chuyển con trỏ vào giữa đoạn text rồi nhập thêm thì con trỏ sẽ bị dời về cuối dòng.
3. Khi có người pm chatbox, trình duyệt sẽ bị giật xuống dưới.

P/s: Liệu đâu trong 3 vấn đề này là do chủ ý của BaiVong? nếu tất cả đều là chủ ý của BaiVong thì làm sao để khắc phục?
  Bài viết hay nhất25
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.
2. Lỗi này đã biết.
3. Theo code mình viết thì không có cơ chế nào gây ra lỗi này, và mình cũng không thấy lỗi đó.
  Bài viết hay nhất26
You cannot reply to topics in this forum