今天主要解决了这些问题：
- 利用jquery通过class增加id
- 修改easyui已有的属性值
- 透明度修改问题css适合的浏览器
- easyui的分类面板以及面板功能
- echarts的修改如何修改主题
利用jquery通过class增加id的方法：
$(".panel-header").attr(‘id‘,"panelname");
取出一个clss然后用attr方法来增加
该方法还可以用于修改css样式，在之后使用它来今天显示和隐藏功能的实现：
<div id="win"></div>
#win{
display: none;
}
$(‘#win‘).attr(‘display‘,‘inline‘);
如上述方法先把win的样式中的display属性设置为隐藏none然后再运行函数的时候将其修改成inline即可
透明度修改问题css适合的浏览器
这里使用的方法如下：
样式中将透明度属性设置一下opacity:0.5;
注意这里使用的是opacity可以适应多种浏览器，而filter仅仅只能用于ie浏览器
function makevisible(i,which)
{if (which==0)$(‘.chart_img‘+i).css({‘opacity‘:‘1‘});
else $(‘.chart_img‘+i).css({‘opacity‘:‘0.5‘});}
easyui的分类面板以及面板功能贴出html的代码和js的部分代码
<!DOCTYPE html>
<html>
<head>
<title>echart图+滑块</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/esl.js"></script>
<script type="text/javascript" src="js/testPage.js"></script>
<script type="text/javascript" src="js/testPageFormate.js"></script>
<script type="text/javascript" src="js/testPagebar.js"></script>
<script type="text/javascript" src="js/testPageline.js"></script>
<script type="text/javascript" src="js/testPagepie.js"></script>
<script type="text/javascript" src="js/testPagescatter.js"></script>
<script type="text/javascript" src="js/testPageradar.js"></script>
<script type="text/javascript" src="js/testPagegauge.js"></script>
<script type="text/javascript" src="js/testPagefunnel.js"></script>
<script type="text/javascript" src="js/testPagek.js"></script>
<link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="testPage.css">
<script type="text/javascript" src="../easyui/jquery.min.js"></script>
<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
</head>
<body>
<input type="button" value="开始" onclick="window_show()">
<div id="main" style="height:400px"></div>
<div id="wrong-message"></div>
<!-- 整个窗口的div -->
<div id="win">
<div id="edit">
<div id="accord" class="easyui-accordion">
<div title="折线图" data-options="iconCls:‘icon-large-shapes‘,collapsed:false,selected:true" style="padding:10px;">
<div name="part3"><img src="img/line.png" class="chart_img3" onclick="showline()"onMouseOver="makevisible(3,0)" onMouseOut="makevisible(3,1)">
<div id="bartext" class="text_box">类型：折线图<br>
范围：写这个图表可以适合几个维度的数据类型</div><br></div>
</div>
<div title="条形图" data-options="iconCls:‘icon-large-shapes‘,collapsed:false" style="overflow:auto;padding:10px;">
<div name="part1"><img src="img/bar.png" class="chart_img1" onclick="showbar()"onMouseOver="makevisible(1,0)" onMouseOut="makevisible(1,1)">
<div id="bartext" class="text_box">类型：条形图<br>
范围：写这个图表可以适合几个维度的数据类型</div><br></div>
</div>
<div title="堆积图" data-options="iconCls:‘icon-large-shapes‘,collapsed:false" style="padding:10px;">
<div name="part2"> <img src="img/duibar.png" class="chart_img2" onclick="showduibar()"onMouseOver="makevisible(2,0)" onMouseOut="makevisible(2,1)">
<div id="bartext" class="text_box">类型：堆积图<br>
范围：写这个图表可以适合几个维度的数据类型</div><br></div>
</div>
<div title="散点图" data-options="iconCls:‘icon-large-shapes‘,collapsed:false" style="padding:10px;">
<div name="part4"><img src="img/scatter.png" class="chart_img4" onclick="showscatter()"onMouseOver="makevisible(4,0)" onMouseOut="makevisible(4,1)">
<div id="bartext" class="text_box">类型：散点图<br>
范围：写这个图表可以适合几个维度的数据类型</div><br></div>
</div>
</div>
</div><br>
</div>
</body>
</html>
//该函数用于把整个图表编辑器显示出来，并且进行渲染
function window_show(){
$(‘#win‘).attr(‘display‘,‘inline‘);
$(‘#win‘).window({
width:240,
title:‘图表编辑器‘,
// height:470,
left:900,
top:40,
iconCls:‘icon-large-chart‘,
});
function makevisible(i,which)
{if (which==0)$(‘.chart_img‘+i).css({‘opacity‘:‘1‘});
else $(‘.chart_img‘+i).css({‘opacity‘:‘0.5‘});}
$(‘#accord‘).accordion({
});
}
//用做窗口内图片的透明度变化事件，鼠标移上去不透明，鼠标移开变透明
function makevisible(i,which)
{if (which==0)$(‘.chart_img‘+i).css({‘opacity‘:‘1‘});
else $(‘.chart_img‘+i).css({‘opacity‘:‘0.5‘});}
时间： 2024-11-09 00:31:51