<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
/* - - - - - - - - - 全局样式 - - - - - - - - -*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, code, del, em, img, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-style: inherit;
font-family: inherit;
vertical-align: baseline;
}
img {
border: none;
}
body {
font-size: 14px;
padding: 0px;
margin: 0 auto;
font: "Arial", "Microsoft YaHei";
background: #fff;
}
a {
text-decoration: none;
color: #4f4f4f;
}
.clear {
clear: both;
}
.hw {
width: 240px;
border:1px solid #DEDEE2;
border-radius: 3px;
padding-bottom:10px;
margin: 20px 10px;
float:left;
}
.hw_title {
width: 240px;
height: 38px;
border-bottom: 1px solid #f2f2f5;
text-align: center;
}
.hw_title h2 {
font-size: 14px;
color: #fff;
line-height: 38px;
}
.lyl ul {
width: 240px;
height: 38px;
border-bottom: 1px solid #f2f2f5;
}
.lyl ul li {
width: 120px;
height: 38px;
float: left;
color: #333;
line-height: 38px;
text-align: center;
}
.li1 {
height: 37px;
font-size:16px;
font-weight:bold;
border-bottom: 2px solid #EFEFEF;
}
.TabContent {
width: 240px;
margin: 0px auto;
}
.as{ height: 230px;
overflow: hidden;
overflow-y: auto;
width: 236px;
}
.TabContent ul li {
width: 226px;
height: 39px;
border-bottom: 1px solid #f2f2f5;
line-height: 39px;
}
.img_1 {
float: left;
margin-top: 12px;
margin-left: 10px;
margin-right: 8px;
display: inline;
}
.TabContent li p {
font-size: 14px;
color: #333;
float: left;
width:78px;
overflow:hidden;
height:39px;
}
.img_2 {
float: left;
margin-top: 7px;
display: inline;
}
.r {
float: right;
margin-right: 8px;
display: inline;
}
.shu {
float: left;
font-size: 14px;
color: #333;
margin-right: 8px;
display: inline;
}
.img_3 {
float: right;
margin-top:14px;
display: inline;
}
::-webkit-scrollbar-track-piece{
background-color:#fff;
-webkit-border-radius:0;
}
::-webkit-scrollbar{
width:8px;
height:8px;
}
::-webkit-scrollbar-thumb{
height: 30px;
background-color: #57A8A8;
-webkit-border-radius: 4px;
outline: 2px solid #fff;
outline-offset: -1px;
border: 3px solid #fff;
}
::-webkit-scrollbar-thumb:hover{
height:30px;
background-color:#9f9f9f;
-webkit-border-radius:4px;
}
</style>
</head>
<body>
<style>
.allDiv{ margin: 20px 10px;float:left;}
.allDiv table{
clear: both;
/* height: 300px; */
border: solid 1px #cbcbcb;
border-collapse: collapse;
border-spacing: 0;
font-size: 12px;
text-align: center;
}
.allDiv th{
line-height: 30px;
font-size: 16px;
text-align: left;
text-indent: 1em;
color: #FFF;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #7899DF), color-stop(1, #1A50C5));
}
.allDiv .tdhead td{
height: 34px !important;
line-height: 34px !important;
font-weight: bold;
text-indent: 11px !important;
}
.allDiv td{
line-height: 32px ;
text-indent: 5px ;
border: 1px solid #D7D5D5;
border-right: dotted 1px #c7c7c7;
}
tr:nth-child(even){
background-color:#EEF3F9;
}
</style>
<div class="hw" id="hw2">
<div class="hw_title" style=" background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #BCDF67), color-stop(1, #657711));">
<h2>客服</h2>
</div>
<div class="lyl">
<ul id="myTab2">
<li class="li1"> 本月 </li>
<li> 上月 </li>
</ul>
</div>
<div class="clear"></div>
<div class="TabContent" id="TabContent2">
<div class="as">
<ul>
</ul>
</div>
<div class="as" style="display:none">
<ul>
</ul>
</div>
</div>
</div>
<script>
var allObj=[];
var allObjPrev=[];
var allObjMonth=[];
var hwObjDY=[];
cutLi('myTab',"TabContent");
cutLi('myTab2',"TabContent2");
cutLi('myTab3',"TabContent3");
cutLi('myTab4',"TabContent4");
/*
cutLi('myTab10',"TabContent10");
cutLi('myTab11',"TabContent11");
cutLi('myTab12',"TabContent12");
cutLi('myTab13',"TabContent13");
*/
function cutLi(hwId,zxId){
var zli=document.getElementById(hwId).getElementsByTagName('li');
var yli=getElementsByClassName('as',document.getElementById(zxId));
for (i=0;i<zli.length;i++) {
zli[i].index=i;
zli[i].onclick=function(){
for (j=0;j<zli.length;j++) {
zli[j].className="";
yli[j].style.display='none';
}
this.className="li1";
yli[this.index].style.display='block';
}
}
}
function getElementsByClassName(className, parentElement){
var elems = (parentElement||document.body).getElementsByTagName("*");
var result=[];
for (i=0; j=elems[i]; i++){
if ((" "+j.className+" ").indexOf(" "+className+" ")!=-1){
result.push(j);
}
}
return result;
}
${rongyaobang}
//allObj allObjPrev allObjMonth
//var allObj=[1,1,1,1,1,1,1,1,1];
//var allObjPrev=[1,1,1,1,1,1,1,1,1];
//var allObjMonth=[1,1,1,1,1,1,1,1,1];
initAll("todaytr",allObj);
initAll("yesterdaytr",allObjPrev);
initAll("monthtr",allObjMonth);
function initAll(id,obj){
if(obj.length==0)return;
var tds=document.getElementById(id).getElementsByTagName('td');
for(var i=1;i<tds.length;i++)
{
$("#allDiv").show();
var td=tds[i];
td.innerHTML=obj[i-1] ;
}
}
initAll1("todaytr1",allObj);
initAll1("yesterdaytr1",allObjPrev);
initAll1("monthtr1",allObjMonth);
function initAll1(id,obj){
if(obj.length==0)return;
var tds=document.getElementById(id).getElementsByTagName('td');
for(var i=1;i<tds.length;i++)
{
$("#allDiv1").show();
var td=tds[i];
td.innerHTML=obj[i+6] ;
}
}
var temp1=0;
if(hwObjDY.length>1)
{
temp1=1;
}
//客服
if(zxObj.length>1)
{
buildHTML("TabContent2",zxObj,true,0,"zxObjDY");
buildHTML("TabContent2",zxObjPrev,false,1,"zxObjDYPrev");
}else{
$("#hw2").hide();
}
function buildHTML(parentName,data,isSJ,index,daoyuanname){
var bwObjliStr="";
for(var i=1;i<=data.length;i++)
{
var obj=data[i-1];
bwObjliStr+=' <li> <img class="img_1" src="images/'+i+'.jpg" /> <p >'+obj.name+'</p> ';
if(i<=3)
{
bwObjliStr+='<img class="img_2" src="images/pai_'+i+'.jpg" />';
}
var numTemp=obj.num;
if(temp1==1)
{
var arraTemp=eval(""+daoyuanname);
var isjia=false;
for(var k=0;k<arraTemp.length;k++)
{
var objTemp=arraTemp[k];
if(obj.name==objTemp.name)
{isjia=true;
numTemp+=" ("+objTemp.num+")";
break;
}
}
if(!isjia){
numTemp+=" "+"(0)";
}
}
bwObjliStr+=' <div class="r"> <span class="shu">'+numTemp+'</span> ';
if(isSJ){
bwObjliStr+='<img class="img_3" src="images/s_'+obj.state+'.jpg" /> ';
}
bwObjliStr+='<div class="clear"></div> </div> <div class="clear"></div> </li>';
}
$("#"+parentName+" ul").eq(index).html(bwObjliStr);
}
</script>
</body>
</html>
上面那段代码 显示效果为下图:
最多只能显示10个客服 我想请问下 如何让她显示更多的客服 我修改哪里 可以显示更多的客服呢 请问