h5聊天室web端(仿微博、微信)|h5仿微信網頁端|仿微信界面彈窗

時間 2019-12-09

標籤 h5 聊天室 web 微博微信網頁界面欄目 HTML 简体版

原文原文鏈接

這段時間一直在着手h5開發手機端聊天系統——html5仿微信聊天室，最近又在原先基礎上開發了一個仿微信、微博網頁web版聊天系統，使用到了HTML5+css3+jQuery+wcpop等技術開發，彈窗插件wcPop.js進行了一次全面api升級，修復編輯器插入表情時光標定位錯誤bug，新增了上傳附件及自定義推送內容，另外也新增了我的名片、上傳附件、分享等樣式，功能上實現了消息、表情的發送，圖片、視頻全屏預覽。
css

項目運行圖：html

/* --- 用戶設置.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");
});

// 一、新建聊天
$("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");
    }
});

// 二、設置聊天
$("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 ---*/

<div class="wc__scrolling-panel flex1 J__swtChat2AddrBook">
    <div class="wc__slimscroll">
        <!-- 通信錄區 -->
        <ul class="wc__addrBooks clearfix" id="J__addrBooks">
            <li id="A">
                <h2 class="initial wc__borT">A</h2>
                <div class="row flexbox flex-alignc wc__material-cell">
                    <img class="uimg" src="img/uimg/u__chat-img09.jpg" /><span class="name flex1">Aster</span>
                </div>
                <div class="row flexbox flex-alignc wc__material-cell">
                    <img class="uimg" src="img/uimg/u__chat-img01.jpg" /><span class="name flex1">Alibaba-馬雲</span>
                </div>
            </li>
            <li id="B">
                <h2 class="initial wc__borT">B</h2>
                <div class="row flexbox flex-alignc wc__material-cell">
                    <img class="uimg" src="img/uimg/u__chat-img02.jpg" /><span class="name flex1">馬麗 ▪ ☀☼㈱</span>
                </div>
                <div class="row flexbox flex-alignc wc__material-cell">
                    <img class="uimg" src="img/uimg/u__chat-img03.jpg" /><span class="name flex1">科比-kebi</span>
                </div>
                <div class="row flexbox flex-alignc wc__material-cell">
                    <img class="uimg" src="img/uimg/u__chat-img10.jpg" /><span class="name flex1">Bear</span>
                </div>
            </li>
            <li id="C">
                <h2 class="initial wc__borT">C</h2>
                <div class="row flexbox flex-alignc wc__material-cell">
                    <img class="uimg" src="img/uimg/u__chat-img15.jpg" /><span class="name flex1">賈斯汀-比伯</span>
                </div>
                <div class="row flexbox flex-alignc wc__material-cell">
                    <img class="uimg" src="img/uimg/u__chat-img05.jpg" /><span class="name flex1">肖蓓海</span>
                </div>
                <div class="row flexbox flex-alignc wc__material-cell">
                    <img class="uimg" src="img/uimg/u__chat-img04.jpg" /><span class="name flex1">張小龍</span>
                </div>
            </li>
            <li id="D">
                <h2 class="initial wc__borT">D</h2>
                <div class="row flexbox flex-alignc wc__material-cell">
                    <img class="uimg" src="img/uimg/u__chat-img06.jpg" /><span class="name flex1">張帥帥-shuaiMi</span>
                </div>
                <div class="row flexbox flex-alignc wc__material-cell">
                    <img class="uimg" src="img/uimg/u__chat-img07.jpg" /><span class="name flex1">肖鳳子</span>
                </div>
            </li>
            <li id="E">
                <h2 class="initial wc__borT">E</h2>
                <div class="row flexbox flex-alignc wc__material-cell">
                    <img class="uimg" src="img/uimg/u__chat-img08.jpg" /><span class="name flex1">Lm楊冪冪</span>
                </div>
                <div class="row flexbox flex-alignc wc__material-cell">
                    <img class="uimg" src="img/uimg/u__chat-img11.jpg" /><span class="name flex1">Wqq_王巧巧</span>
                </div>
                <div class="row flexbox flex-alignc wc__material-cell">
                    <img class="uimg" src="img/uimg/u__chat-img12.jpg" /><span class="name flex1">楊迪</span>
                </div>
            </li>
            <li id="F">
                <h2 class="initial wc__borT">F</h2>
                <div class="row flexbox flex-alignc wc__material-cell">
                    <img class="uimg" src="img/uimg/u__chat-img13.jpg" /><span class="name flex1">宋小白-sxb2018</span>
                </div>
                <div class="row flexbox flex-alignc wc__material-cell">
                    <img class="uimg" src="img/uimg/u__chat-img14.jpg" /><span class="name flex1">Nice奶思</span>
                </div>
            </li>
        </ul>
        <div class="wc__addrBooks-total">16位聯繫人</div>
        
        <!-- 右側字母定位 -->
        <!-- //字母顯示 -->
        <div class="wc__addrFriend-showletter">A</div>
        <!-- //26字母 -->
        <div class="wc__addrFriend-floatletter">
            <em>A</em>
            <em>B</em>
            <em>C</em>
            <em>D</em>
            <em>E</em>
            <em>F</em>
            <em>G</em>
            <em>H</em>
            <em>I</em>
            <em>J</em>
            <em>K</em>
            <em>L</em>
            <em>M</em>
            <em>N</em>
            <em>O</em>
            <em>P</em>
            <em>Q</em>
            <em>R</em>
            <em>S</em>
            <em>T</em>
            <em>U</em>
            <em>V</em>
            <em>W</em>
            <em>X</em>
            <em>Y</em>
            <em>Z</em>
        </div>
    </div>
</div>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。