[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ất51
[You must be registered and logged in to see this link.]
DeeW. wrote:This code is not english. :(
that option will be available in the next version.
The author of this message was banned from the forum - See the message
  Bài viết hay nhất53
Cool one! Thank you very much for this.
  Bài viết hay nhất54
Báo cáo: hiện tại thì zzChat mất kết nối liên tục.
  Bài viết hay nhất55
ko sài dc chátbox này là sao z ko hiện thị j hết
  Bài viết hay nhất56
Làm ko đúng thì hiện bằng răng :v
  Bài viết hay nhất57
trước đó nó có hiện nhưng 2 hôm nay ko hiên ko bít có pải tại js ko?
  Bài viết hay nhất58
sài Firefox lúc hiện lúc ko . Làm ko đúng thì hiện bằng răng bít cái đết nói xàm
  Bài viết hay nhất59
Do lỗi thôi, ko việc gì phải tranh cãi cả.
  Bài viết hay nhất60
[You must be registered and logged in to see this link.]
huynh.tan.338 wrote:sài  Firefox lúc hiện lúc ko . Làm ko đúng thì hiện bằng răng bít cái đết nói xàm

Chờ baivong fix đi. Thật ra nó cũng chỉ bị ẩn đi thôi. Dùng css để cho nó hiện lại. Bên mình mới sửa lại dùng cũng tạm ổn. Có điều là hay mất comment lắm. Mong baivong fix luôn lỗi này.
  Bài viết hay nhất61
Mình cũng bị cái này, cơ mà các bạn cập nhật lại code HTML giống như @baivong post trên là lại bình thường lại ngay ý mà @@!
  Bài viết hay nhất62
chatbox không còn hiện nữa rồi ạ :( bùn
  Bài viết hay nhất63
sao hôm nay chatbox mình bị gì mà hiện thị khó khăn quá zậy các bác
  Bài viết hay nhất64
FM mới update chatbox 7, thay đổi cách thức cập nhật, giảm tải,... và thường xuyên bị chậm tin.
Đã sửa lỗi!
  Bài viết hay nhất65
[You must be registered and logged in to see this link.]
Zzbaivong wrote:FM mới update chatbox 7, thay đổi cách thức cập nhật, giảm tải,... và thường xuyên bị chậm tin.
Đã sửa lỗi!
bác cho em hỏi là cập nhật tự động hay phải sửa code gì không admin
  Bài viết hay nhất66
[You must be registered and logged in to see this link.]
tommy_phan wrote:[You must be registered and logged in to see this link.]
Zzbaivong wrote:FM mới update chatbox 7, thay đổi cách thức cập nhật, giảm tải,... và thường xuyên bị chậm tin.
Đã sửa lỗi!
bác cho em hỏi là cập nhật tự động hay phải sửa code gì không admin
Không cần. Đã cập nhật trong file gốc, nếu đã thay file css, và js thì mới cần cập nhật lại.
  Bài viết hay nhất67
thấy nó lag lag sao ấy
  Bài viết hay nhất68
Lag thì dùng cái mặc định cho khỏi lag
  Bài viết hay nhất69
Cách thức cập nhật mới làm cbox nhận tin chậm hơn cũ Baivong à :(
  Bài viết hay nhất70
Chịu thôi, chờ FM update chatbox 8 xem sao.
You cannot reply to topics in this forum