首页 > 代码库 > 项目笔记——9.18
项目笔记——9.18
今天主要解决了这些问题：
- 利用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="http://www.mamicode.com/js/esl.js"></script> <script type="text/javascript" src="http://www.mamicode.com/js/testPage.js"></script> <script type="text/javascript" src="http://www.mamicode.com/js/testPageFormate.js"></script> <script type="text/javascript" src="http://www.mamicode.com/js/testPagebar.js"></script> <script type="text/javascript" src="http://www.mamicode.com/js/testPageline.js"></script> <script type="text/javascript" src="http://www.mamicode.com/js/testPagepie.js"></script> <script type="text/javascript" src="http://www.mamicode.com/js/testPagescatter.js"></script> <script type="text/javascript" src="http://www.mamicode.com/js/testPageradar.js"></script> <script type="text/javascript" src="http://www.mamicode.com/js/testPagegauge.js"></script> <script type="text/javascript" src="http://www.mamicode.com/js/testPagefunnel.js"></script> <script type="text/javascript" src="http://www.mamicode.com/js/testPagek.js"></script> <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/testPage.css"> <script type="text/javascript" src="http://www.mamicode.com/easyui/jquery.min.js"></script> <script type="text/javascript" src="http://www.mamicode.com/easyui/jquery.easyui.min.js"></script> </head> <body> <input type="button" value="http://www.mamicode.com/开始" 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="http://www.mamicode.com/img/line.png" class="chart_img3" onclick="showline()"onMouseOver="makevisible(3,0)" onm ouseOut="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="http://www.mamicode.com/img/bar.png" class="chart_img1" onclick="showbar()"onMouseOver="makevisible(1,0)" onm ouseOut="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="http://www.mamicode.com/img/duibar.png" class="chart_img2" onclick="showduibar()"onMouseOver="makevisible(2,0)" onm ouseOut="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="http://www.mamicode.com/img/scatter.png" class="chart_img4" onclick="showscatter()"onMouseOver="makevisible(4,0)" onm ouseOut="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‘});}
项目笔记——9.18
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。