html5实现的仿微博、微信网页版,运用到了html5+css3+jquery+swiper+wcPop等技术进行架构开发,其中wcPop.js弹窗插件又进行了一次全面升级(更加丰富的api接口),修复了编辑器光标定位问题,新增了图片、附件上传预览。。。
https://blog.csdn.net/xiaoyan_2015/article/details/81750894
/* --- 用户设置.Start ---*/
// 联系人/群聊切换
$("body").on("click", ".wc__addChat-tab li", function () {
var idx = $(this).index();
$(this).addClass("on").siblings().removeClass("on");
$(this).parents(".wc__popupTmpl").find(".J__swtChatUser").hide();
$(this).parents(".wc__popupTmpl").find(".J__swtChatUser").eq(idx).show();
// 清除筛选
$(".wc__addChatMixList .item").removeClass("selected");
});
// 1、新建聊天
$("body").on("click", ".J__addChat", function(){
$(".wc__addChat-tab").show();
var chatidx = wcPop({
skin: 'ios',
title: '<h2 style="font-size:18px; font-weight:700;">新建聊天</h2>',
content: $("#J__popupTmpl-addChat").html(),
style: 'background-color: #f3f3f3; max-width: 640px; width:auto;',
btns: [
{
text: '确定',
style: 'background:#12b7f5;color:#fff;font-size:14px;',
onTap() {
wcPop.close(chatidx);
}
}
]
});
});
// 勾选联系人选项
$("body").on("click", ".wc__addChatMixList .item", function () {
if($(this).hasClass("qun")){
$(this).addClass("selected").siblings().removeClass("selected");
}else{
$(this).toggleClass("selected");
}
});
// 2、设置聊天
$("body").on("click", ".J__setChat", function(e){
var that = $(this), contextTpl, menuNode = $("<div class='wc__contextmenu animated anim-fadeIn'></div>");
contextTpl = "<div class='wc__contextmenuSetChat menu'><a class='status online' href='#'>在线</a><a class='status offline' href='#'>离开</a><a class='status busy' href='#'>忙碌</a><a class='status invisible' href='#'>隐身</a><a class='deliver'></a><a href='#'>关闭桌面通知</a><a href='#'>关闭提醒声音</a><a href='#'>退出</a></div>";
if (!$(".wc__contextmenu").length) {
$("body").append(menuNode.html(contextTpl));
posFix();
} else {
$(".wc__contextmenu").hide().html(contextTpl).fadeIn(250);
posFix();
}
function posFix() {
$(".wc__contextmenu").css({
position: "absolute",
left: e.pageX,
top: e.pageY
});
}
});
// 群公告
$("#J__groupAnnouncement").on("click", function(){
var announcementIdx = wcPop({
skin: 'android',
title: '群公告',
content: '<p style="font-size:12px;font-family:arial;">jcFlow 更新于 08-10 10:26</p><p style="color:#333;margin-top:10px;">进群的小伙伴注意啦,修改群名,格式统一为部门加英文名(技术部-Jackson),部门有英文简称的用英名,无则用中文拼音首字母,如JS-Henory……注意大小写!</p>',
btns: [
{
text: '关闭',
style: 'color: #12b7f9;',
onTap() {
wcPop.close(announcementIdx);
}
}
]
});
});
// 屏蔽消息
$("#J__shieldMsg").on("click", function () {
var shieldIdx = wcPop({
skin: 'android',
title: '提示',
content: '确定要屏蔽该群聊消息嚒,您将收不到群聊发来的消息!',
btns: [
{
text: '取消',
onTap() {
wcPop.close(shieldIdx);
}
},
{
text: '确定',
style: 'color: #12b7f9;',
onTap() {
wcPop({ content: '消息屏蔽成功!', time: 2 });
}
}
]
});
});
// 解除屏蔽
$(".J__unlockerMsg").on("click", function(){
var unshieldIdx = wcPop({
skin: 'ios',
content: '<div><p style="color:green;font-size:16px;">已解除屏蔽!</p><p style="margin-top:10px;">您现在可以接收到对方发来的消息。</p></div>',
time: 2,
btns: [
{
text: '知道了',
style: 'color: #12b7f9;',
onTap() {
wcPop.close(unshieldIdx);
}
}
]
});
});
// 群聊信息
$("#J__groupMemberInfo").on("click", function(){
var chatMemidx = wcPop({
skin: 'ios',
title: '<h2 style="font-size:18px; font-weight:700;">群聊信息(124)</h2>',
content: $("#J__popupTmpl-groupMemInfo").html(),
style: 'background-color: #f3f3f3; max-width: 640px; width:auto;'
});
});
// 删除退群
$("body").on("click", "#J__leaveOutQun", function () {
var leaveOut = wcPop({
id: 'wc__LeaveOutQun',
skin: 'android',
content: '删除并退出群聊后,将不再接收此群聊的信息?',
btns: [
{
text: '取消',
onTap() {
wcPop.close(leaveOut);
}
},
{
text: '确定',
style: 'color:#e64240',
onTap() {
wcPop.closeAll();
wcPop({id: 'wcTips', content: '已退出该群聊!', time: 2 });
}
}
]
});
});
/* --- 用户设置.End ---*/
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。