A very practical QQ online customer service code, click on the QQ icon, can be directly with the customer service dialogue. The specific implementation code is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>jquery realize QQ customer service </title>
<link rel= "stylesheet" type= "Text/css" href= "Css/base.css"/>
<script type= "Text/javascript" src= "Js/jquery-1.8.3.min.js" ></script>
<script type= "Text/javascript" src= "Js/qqservice.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$ ("Body"). Sonline ({
Position: "Right",//left or right
top:200,//the top of the distance, the default 200px
Effect:true,//scrolling or fixed in two ways, Boolean value: TRUE or False
Defaultsopen:true,//default expand: True, default shrink: false
Qqlist: "<span>435027| customer service 01,435027| customer service 02,435027| customer service 03,435027| customer service 04,435027|"/multiple QQ with ', ' separated, QQ and customer service name with ' | ' Separated
});
})
</script>
<body>
<div style= "height:2500px" ></div>
<div style= "Text-align:center;clear:both" ></div>
</body>
/*
This plugin is based on jquery
Developer Yaohucaizi
blog:http://blog.csdn.net/yaohucaizi/
*/
(function ($) {
$.fn. Sonline = function (options) {
var opts = $.extend ({}, $.fn. Sonline.defualts, Options);
$.fn.setlist (opts); Call list Settings
if (opts. Defaultsopen = = False) {
$.fn. Sonline.close (opts. position,0);
}
Expand
$ ("#SonlineBox > Opentrigger"). Live ("Click", Function () {$.fn. Sonline.open (opts. Position);};
Shut down
$ ("#SonlineBox > Contentbox > Closetrigger"). Live ("Click", Function () {$.fn. Sonline.close (opts. Position, "fast");
IE6 compatible or scrolling mode display
if ($.browser.msie && ($.browser.version = = "6.0") &&!$.support.style| | OPTs. Effect==true) {$.fn. Sonline.scrolltype ();}
else if (opts. Effect==false) {$ ("#SonlineBox"). CSS ({position: "fixed"});
}
Plugin defaults
$.fn. Sonline.defualts ={
Position: "Left",//left or right
top:200,//the top of the distance, the default 200px
Effect:true,//scrolling or fixed in two ways, Boolean value: TRUE or
Defaultsopen:true,//default expand: True, default shrink: false
Qqlist: ""//Multiple QQ with ', ' separated, QQ and customer service name with ' | ' Separated
}
Expand
$.fn. Sonline.open = function (PositionType) {
var Widthvalue = $ ("#SonlineBox > Contentbox"). width ();
if (positiontype== "left") {$ ("#SonlineBox >. Contentbox"). Animate ({left:0}, "fast");
else if (positiontype== "right") {$ ("#SonlineBox >. Contentbox"). Animate ({right:0}, "fast");
$ ("#SonlineBox"). css ({width:widthvalue+4});
$ ("#SonlineBox > Opentrigger"). Hide ();
}
Shut down
$.fn. Sonline.close = function (positiontype,speed) {
$ ("#SonlineBox > Opentrigger"). Show ();
var widthvalue =$ ("#SonlineBox > Opentrigger"). width ();
var allwidth = (-($ ("#SonlineBox > Contentbox"). Width ()-6);
if (positiontype== "left") {$ ("#SonlineBox >. Contentbox"). Animate ({left:allwidth},speed);}
else if (positiontype== "right") {$ ("#SonlineBox >. Contentbox"). Animate ({right:allwidth},speed);}
$ ("#SonlineBox"). Animate ({width:widthvalue},speed);
}
Sub-plugins: Setting list parameters
$.fn.setlist = function (opts) {
$ ("Body"). Append ("<div class= ' sonlinebox ' id= ' sonlinebox ' ' style= '" top:-600px '); " ><div class= ' Opentrigger ' style= ' display:none ' title= ' unfold ' ></div><div class= ' ContentBox ' >< Div class= ' closetrigger ' ></div><div class= ' Titlebox ' ><span> Customer service center </span></div><div class= ' ListBox ' ></div></div></ Div> ");
if (opts. qqlist== "") {$ ("#SonlineBox > Contentbox >. ListBox"). Append ("<p style= ' padding:15px ' > No online customer service." </p> ")}
Else{var qqlisthtml = $.fn. Sonline.splitstr (opts); $ ("#SonlineBox > Contentbox >. ListBox"). Append (qqlisthtml); }
if (opts. position== "left") {$ ("#SonlineBox"). css ({left:0});
else if (opts. position== "Right" {$ ("#SonlineBox"). css ({right:0})}
$ ("#SonlineBox"). css ({top:opts. Top});
var allheights=0;
if ($ ("#SonlineBox >. Contentbox"). Height () < $ ("#SonlineBox >. Opentrigger"). Height ()) {
Allheights = $ ("#SonlineBox > Opentrigger"). Height () +4;
} else{allheights = $ ("#SonlineBox > Contentbox"). Height () +4;}
$ ("#SonlineBox"). Height (allheights);
if (opts. position== "Left" {$ ("#SonlineBox >. Opentrigger"). css ({left:0});
else if (opts. position== "Right" {$ ("#SonlineBox >. Opentrigger"). css ({right:0});
}
Sliding effect
$.fn. Sonline.scrolltype = function () {
$ ("#SonlineBox"). CSS ({position: "absolute"});
var topnum = parseint ($ ("#SonlineBox"). CSS ("top") + "");
$ (window). Scroll (function () {
var scrolltopnum = $ (window). scrolltop ()//Get the page to be rolled high
$ ("#SonlineBox"). Stop (true,true). Delay (0). Animate ({Top:scrolltopnum+topnum}, "slow");
});
}
Split QQ
$.fn. Sonline.splitstr = function (opts) {
var strs= new Array (); Define an array
var qqlisttext = opts. Qqlist;
Strs=qqlisttext.split (","); Character segmentation
var qqhtml= ""
for (Var i=0;i<strs.length;i++) {
var substrs= new Array (); Define an array
var subqqlist = strs[i];
Substrs = Subqqlist.split ("|"); Character segmentation
qqhtml = qqhtml+ "<div class= ' qqlist ' ><span>" +substrs[1]+ ": </span><a target= ' _blank ' href= ' http ://wpa.qq.com/msgrd?v=3&uin= "+substrs[0]+" &site=qq&menu=yes ' ></a></div> '
}
return qqhtml;
}
}) (JQuery);
