首页 > 代码库 > 项目笔记——9.18

项目笔记——9.18

2024-07-23 05:19:43   229人阅读

今天主要解决了这些问题：

  1. 利用jquery通过class增加id
  2. 修改easyui已有的属性值
  3. 透明度修改问题css适合的浏览器
  4. easyui的分类面板以及面板功能
  5. 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


联系
我们