如何自定义分组图标

分类：智慧在线客服时间：2014-03-30 作者：

QQ空间新浪微博腾讯微博更多

案例参考：

操作步骤：

第一步：点击【设置中心】—【生成代码】—【图标设置】—【进入设置】，详见下图：

点击“进入设置”，进入如下图：

参考【快商通自定义分组图标】代码如下:

{
  //关闭区域(对象)的id值
  g_close:'',
  //顶端-html代码
  g_top:function(){
var g_id=KS.$(KS.grouping2IconId);
var d=document.createElement('div');
d.id='g2_img';
d.innerHTML='<img src="http://www.kuaishang.cn/cusimg/ks1.gif" border="0"/>';
d.style.cssText='position: absolute; left:0px; top:0px;';
KS.$(KS.grouping2IconId+'_fl').style.cssText='position:relative;display:none;';
g_id.appendChild(d);
KS.addEvent(g_id,'mouseover',this.g_show);
KS.addEvent(g_id,'mouseout',this.g_hid);
var _html=[];
_html.push('<img src="http://www.kuaishang.cn/cusimg/ks2.png" border="0" usemap="#fz1_t_map"/>');
_html.push('<map name="fz1_t_map" id="fz1_t_map" style="display:none"><area shape="rect" coords="9,10,103,45" href="http://tel.kuaishang.cn/call.php?sid=26&did=199" target="_blank" title="免费电话"/><area shape="rect" coords="8,59,103,96" href="javascript:void(0)" title="在线咨询" onclick="KS.openChatWin();return false;"/><area shape="rect" coords="9,111,105,149" href="tencent://message/?uin=800054885&Site=www.kuaishang.cn&Menu=yes" target="_blank" title="业务QQ"/><area shape="rect" coords="8,163,106,198" href="tencent://message/?uin=800054885&Site=www.kuaishang.cn&Menu=yes" target="_blank" title="售后QQ"/><area shape="rect" coords="5,212,130,246" href="http://shop.kuaishang.cn/user.php?act=register" target="_blank" title="免费注册"/><area shape="rect" coords="4,251,130,282" href="http://www.kuaishang.cn/download.html" target="_blank" title="在线客服下载"/></map>');
return _html.join('');
  },
  g_show:function(){
KS.$(KS.grouping2IconId+'_fl').style.display='block';
var f=KS.$(KS.grouping2IconId+'_if');
if(f)f.style.display='block';
KS.$('g2_img').style.display='none';
  },
  g_hid:function(){
KS.$(KS.grouping2IconId+"_fl").style.display="none";
var f=KS.$(KS.grouping2IconId+'_if');
if(f)f.style.display='none';
KS.$('g2_img').style.display='block';
  },
  //部门客服内容头
  g_cotent_top:'',
  /**部门列表-html代码
  * @_id 部门ID
  * @_name 部门名称
  * @_status 部门状态
  * @_hasCs 是否有需要显示的客服
  */
  g_dpt_list:function(_id,_name,_status,_hasCs){
return '';
  },

  /**客服列表-html代码
  * @_id 客服ID
  * @_name 客服名称
  * @_status 客服状态
  */
  g_cust_list:function(_id,_name,_status){
return '';
  },
  /**部门客服内尾部-html代码*/
  g_cotent_but:'</div></div>',

  /**中间按钮列表-html代码*/
  g_mid:function(){
return '';
  },
  /**底部-html代码*/
  g_but:function(){
return '';
  },
  /**浮动*/
  g_float:function(){
var f_v={
_HAlign:'left',//放在左边-left 右边-right 中间-center
_VAlign:'top',//放在底部-bottom 顶部-top 居中-middle
_HSize:0,//水平偏移位置  如上面是 right 则表示距离右边距50px
_VSize:100,//垂直偏移位置  如上面是 bottom 则表示距离底部边距50px
_zIndex:888 //层显示优先级,越大显示时越靠前端--可能会被优先级大于该值的层覆盖
};
return f_v;
  }
}

返回列表>>

上一篇：如何修改个人资料(登录名、密码、个人资料)?

下一篇：如何设置提醒方式?

如何自定义分组图标

相关问题