jquery to realize the floating on the right side of the Web QQ online customer Service Plug-in sample _jquery

Source: Internet
Author: User
Tags html page
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:
HTML page
Copy Code code 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>

CSS Styles
Copy Code code as follows:

/* Default Blue */
. sonlinebox{width:162px; font-size:12px;overflow:hidden; z-index:9999;}
. Sonlinebox. opentrigger{width:30px; height:110px; position:absolute; top:0px; z-index:1; cursor:pointer; background:# 0176ba URL (.. /images/opentrigger.jpg) No-repeat;}
. Sonlinebox. titlebox{width:158px; height:35px line-height:35px; background: #038bdc URL (.. /images/sonlinetitlebg.gif) Repeat-x; border-bottom:2px solid #0176ba;}
. Sonlinebox. Titlebox span{margin-left:10px; color: #fff; font-size:14px; font-family: ' Microsoft Ya-black ', ' bold ';}
. Sonlinebox. contentbox{width:158px height:auto border:2px solid #0176ba background: #fff position:absolute z-index : 2;}
. Sonlinebox. Contentbox closetrigger{width:25px; height:25px; display:block; cursor:pointer; : 5px;right:5px;-webkit-transition:all 0.8s ease-out;}
. Sonlinebox. Contentbox. Closetrigger:hover{-webkit-transform:scale (1) rotate (360deg);}
. Sonlinebox. Contentbox. Listbox{overflow:hidden; margin-bottom:10px;}
. Sonlinebox. Contentbox. ListBox. qqlist{display:block; width:86% height:22px; margin:10px auto 0px auto;
. Sonlinebox. Contentbox. ListBox. Qqlist span{float:left; line-height:22px;}
. Sonlinebox. Contentbox. ListBox. Qqlist A{float:left;}

jquery scripting code
Copy Code code as follows:

/*
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);

The effect chart is as follows:

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.