jQuery開發(fā)QQ客服教程之HTML實(shí)現(xiàn)內(nèi)容
我們來看下QQ客服的一般結(jié)構(gòu)：
左邊的一個(gè)div實(shí)現(xiàn)點(diǎn)擊切換顯示或者隱藏的效果
右邊的一個(gè)div是主要的內(nèi)容部分包括一個(gè)標(biāo)題，三個(gè)在線的QQ客服，以及電話和二維碼等，由于我們只為了展示功能，所以就沒有做二維碼了
我們先將用HTML將內(nèi)容大概的呈現(xiàn)出來，代碼如下：
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no" /> <title>QQ客服</title> </head> <body > <div id="rightArrow"><a href="#" title="在線客戶"></a></div> <div id="floatDivBoxs"> <div class="floatDtt">在線客服</div> <div class="floatShadow"> <ul class="floatDqq"> <li><a target="_blank" href="tencent://message/?uin=126401073&Site=sc.chinaz.com&Menu=yes"><img src="https://img.php.cn/upload/image/477/494/683/1478309332960894.png" > 在線客服1</a></li> <li><a target="_blank" href="tencent://message/?uin=126401073&Site=sc.chinaz.com&Menu=yes"><img src="https://img.php.cn/upload/image/477/494/683/1478309332960894.png" > 在線客服2</a></li> <li ><a target="_blank" href="tencent://message/?uin=126401073&Site=sc.chinaz.com&Menu=yes"><img src="https://img.php.cn/upload/image/477/494/683/1478309332960894.png" > 在線客服3</a></li> </ul> <div class="floatDtxt">熱線電話<br/>0551-123456789</div> </div> </div> </body> </html>
主要是使用div，在線客服部分用<ul><li>實(shí)現(xiàn)
這個(gè)頁面已經(jīng)可以實(shí)現(xiàn)彈出QQ對話框了，這是通過下面一行代碼實(shí)現(xiàn)的
<a?target="_blank"?href="tencent://message/?uin=126401073&Site=sc.chinaz.com&Menu=yes"><img?src="https://img.php.cn/upload/image/477/494/683/1478309332960894.png"?> 在線客服1</a>
修改其中的"uin=126401073",就可以指定客服的QQ號了
