ForuMotion Popup ChatBox

สวัสดี forumers, กวดวิชานี้จะช่วยให้คุณบรรลุ chatbox ป๊อปอัพสำหรับการเริ่มต้นForu เคลื่อนไหว ChatBox

การติดตั้ง

ที่จะเริ่มต้นคุณต้องให้แน่ใจว่าคุณมี chatbox เริ่มต้นเปิดการใช้งานเพื่อนำทางไปยัง .. บริหารแผง > โมดูล > Chatbox > การตั้งค่าเปิดใช้งาน chatbox: ใช่แล้วคลิกตรวจสอบ

ขยายภาพนี้

ตอนนี้ chatbox ถูกเปิดใช้งานเราควรจะใช้ CSS สำหรับรูปแบบขั้นพื้นฐานดังนั้นโปรดนำทางไป .. บริหารแผง > แสดง > รูปภาพและสี > สี > CSS สไตล์วางรหัสด้านล่างในแผ่นของคุณและส่ง .

รหัส: ---------- เลือกเนื้อหา

/*Chatbox*/
#chatButton{
box-shadow:0px 10px 6px rgba(255,255,255, 0.2) inset, 0px -10px 6px rgba(0,0,0, 0.2) inset;
padding:10px 20px 10px 20px;
background-color:#257;
border:1px solid #146;
font-weight:bold;
font-size:10px;
z-index:999;
color:#fff;
}
#chatButton:hover{
cursor:pointer;
color:#ff8;
background-color:#368;
}
#chatBox iframe{
z-index:999;
border:none;
height:50%;
width:65%;
}

เพื่อปรับสีของปุ่มเพียงแก้ไขพื้นหลังสี# chatButton . เพื่อปรับความสูงและความกว้างแก้ไขความสูงและความกว้างของคุณสมบัติ# chatbox iframe . ตอนที่คุณรู้วิธีการปรับเปลี่ยนรูปแบบที่คุณควรจะพร้อมที่จะแก้ไขเมื่อคุณพร้อม ขอย้ายไปและใช้สคริปต์สำหรับ chatbox ของเรานำทางไป .. บริหารแผง > โมดูล > HTML และ JAVASCRIPT > การจัดการรหัส Javascript > สร้างสคริปต์ใหม่หัวข้อ:ป๊อปอัพ ChatBox ตำแหน่ง:ในทุกหน้า (ถ้าคุณต้องการ chatbox ทุกที่) Javascript รหัส

รหัส: ---------- เลือกเนื้อหา

jQuery(document).ready(function(){
jQuery('body').append('<span id="chatButton" title="Open/Close Chatbox">Open Chat</span><div id="chatBox"><iframe src="/chatbox/index.forum"></iframe></div>');
jQuery('#chatBox').hide();
jQuery('#chatButton').css('position', 'fixed').css('right', '0px').css('bottom', '0px');
jQuery('#chatBox iframe').css('position', 'fixed').css('right', '10px').css('bottom', '45px');
if(!document.getElementById('logout')){
jQuery('#chatButton').hide();
jQuery('#chatBox').hide();}
jQuery('#chatButton').click(function(){
jQuery('#chatBox').fadeToggle();
});
});


เมื่อคุณทำเสร็จแล้วบันทึกสคริปต์และ chatbox ของคุณควรจะมีที่คลิกปุ่ม! ผลที่ได้:

ขยายภาพนี้

คลิกที่ปุ่ม 'เปิดการสนทนา' จะแสดง / ซ่อน chatbox ถ้าคุณต้องการที่จะปรับเปลี่ยนถ้อยคำที่พูดภาษาอื่นทั้งหมดที่คุณต้องทำคือการแก้ไขบรรทัดนี้

รหัส: ---------- เลือกเนื้อหา

jQuery('body').append('<span id="chatButton" title="Open/Close Chatbox">Open Chat</span><div id="chatBox"><iframe src="/chatbox/index.forum"></iframe></div>');

สุดท้ายที่จะปรับเปลี่ยนแก้ไขตำแหน่งบรรทัดนี้

รหัส: ---------- เลือกเนื้อหา

jQuery('#chatButton').css('position', 'fixed').css('right', '0px').css('bottom', '0px');
jQuery('#chatBox iframe').css('position', 'fixed').css('right', '10px').css('bottom', '45px');

ถ้าคุณต้องการคุณสามารถใช้ออกไปและใช้สไตล์ CSS ของคุณในการปรับเปลี่ยนตำแหน่ง เพื่อป้องกันไม่ให้ผู้ใช้ที่ลืมที่จะเพิ่ม CSS จาก messing up รูปแบบฟอรั่มของพวกเขาดังนั้นการวางตำแหน่งจะกระทำภายในสคริปต์ขอบคุณสำหรับการอ่านถ้าคุณมีคำถามหรือแสดงความคิดเห็นใด ๆ โปรดอย่าลังเลที่จะออกจากพวกเขา สนุก!



ข้อมูลจาก>>http://fmdesign.forumotion.com/t104-forumotion-popup-chatbox