画线工具，功能需求：五个列表，前四列每一行都存放着不同的画线工具。第五列用于保存自己收藏的图形。其中每列都具有收藏和取消收藏的功能。
数据结构
第五列数组内容为空，在页面初始化时向服务器动态获取用户收藏的工具。
var chartLineStyle = [//顶部画图图片集合 [ {idx:0,dia:'LineSegment',txt:"线段",val:"c0_0",isSelect:"no",selImg:'imgs/rtdream/c1_slashSel.png',imgSrc:'imgs/rtdream/c1_slash.png',save:"imgs/rtdream/uncollected_min.png"}, {idx:1,dia:'HorizontalLine',txt:"水平线段",val:"c0_1",isSelect:"no",selImg:'imgs/rtdream/c1_horizontalSel.png',imgSrc:'imgs/rtdream/c1_horizontal.png',save:"imgs/rtdream/uncollected_min.png"}, {idx:2,dia:'VerticalLine',txt:"竖直线段",val:"c0_2",isSelect:"no",selImg:'imgs/rtdream/c1_verticalSel.png',imgSrc:'imgs/rtdream/c1_vertical.png',save:"imgs/rtdream/uncollected_min.png"}, {idx:3,dia:'RayLine',txt:"射线",val:"c0_3",isSelect:"no",selImg:'imgs/rtdream/c1_radialSel.png',imgSrc:'imgs/rtdream/c1_radial.png',save:"imgs/rtdream/uncollected_min.png"}, {idx:4,dia:'BidirectionLine',txt:"直线",val:"c0_4",isSelect:"no",selImg:'imgs/rtdream/c1_straightLineSel.png',imgSrc:'imgs/rtdream/c1_straightLine.png',save:"imgs/rtdream/uncollected_min.png"}, {idx:5,dia:'ParallelLine',txt:"平行线",val:"c0_5",isSelect:"no",selImg:'imgs/rtdream/c1_parallelLinesSel.png',imgSrc:'imgs/rtdream/c1_parallelLines.png',save:"imgs/rtdream/uncollected_min.png"}, {idx:6,dia:'CyclicLines',txt:"等周期线",val:"c0_6",isSelect:"no",selImg:'imgs/rtdream/c1_cycleSel.png',imgSrc:'imgs/rtdream/c1_cycle.png',save:"imgs/rtdream/uncollected_min.png"}, {idx:7,dia:'FibChannel',txt:"通道线",val:"c0_7",isSelect:"no",selImg:'imgs/rtdream/c1_passSel.png',imgSrc:'imgs/rtdream/c1_pass.png',save:"imgs/rtdream/uncollected_min.png"} ], [ {idx:0,dia:'Triangle',txt:"三角形",val:"c1_0",isSelect:"no",selImg:'imgs/rtdream/c2_triangleSel.png',imgSrc:'imgs/rtdream/c2_triangle.png',save:"imgs/rtdream/uncollected_min.png"}, {idx:1,dia:'Rectangle',txt:"矩形",val:"c1_1",isSelect:"no",selImg:'imgs/rtdream/c2_rectangleSel.png',imgSrc:'imgs/rtdream/c2_rectangle.png',save:"imgs/rtdream/uncollected_min.png"}, {idx:2,dia:'Parallelogram',txt:"平行四边形",val:"c1_2",isSelect:"no",selImg:'imgs/rtdream/c2_parallelogramSel.png',imgSrc:'imgs/rtdream/c2_parallelogram.png',save:"imgs/rtdream/uncollected_min.png"}, {idx:3,dia:'Circle',txt:"圆",val:"c1_3",isSelect:"no",selImg:'imgs/rtdream/c2_circularSel.png',imgSrc:'imgs/rtdream/c2_circular.png',save:"imgs/rtdream/uncollected_min.png"}, {idx:4,dia:'Ellipse',txt:"椭圆",val:"c1_4",isSelect:"no",selImg:'imgs/rtdream/c2_ellipseSel.png',imgSrc:'imgs/rtdream/c2_ellipse.png',save:"imgs/rtdream/uncollected_min.png"} ], [ {idx:0,dia:'ThreeWave',txt:"三浪",val:"c2_0",isSelect:"no",selImg:'imgs/rtdream/c3_threeWaveSel.png',imgSrc:'imgs/rtdream/c3_threeWave.png',save:"imgs/rtdream/uncollected_min.png"}, {idx:1,dia:'FiveWave',txt:"五浪",val:"c2_1",isSelect:"no",selImg:'imgs/rtdream/c3_fiveWaveSel.png',imgSrc:'imgs/rtdream/c3_fiveWave.png',save:"imgs/rtdream/uncollected_min.png"}, {idx:2,dia:'EightWave',txt:"八浪",val:"c2_2",isSelect:"no",selImg:'imgs/rtdream/c3_eightWaveSel.png',imgSrc:'imgs/rtdream/c3_eightWave.png',save:"imgs/rtdream/uncollected_min.png"}, {idx:3,dia:'HeadShoulder',txt:"头肩顶/底",val:"c2_3",isSelect:"no",selImg:'imgs/rtdream/c3_multipleWaveSel.png',imgSrc:'imgs/rtdream/c3_multipleWave.png',save:"imgs/rtdream/uncollected_min.png"}, {idx:4,dia:'WHeadFoot',txt:"M头W底",val:"c2_4",isSelect:"no",selImg:'imgs/rtdream/c3_mwShapeSel.png',imgSrc:'imgs/rtdream/c3_mwShape.png',save:"imgs/rtdream/uncollected_min.png"}, {idx:5,dia:'ABCD',txt:"ABCD形态",val:"c2_5",isSelect:"no",selImg:'imgs/rtdream/c3_abcdShapeSel.png',imgSrc:'imgs/rtdream/c3_abcdShape.png',save:"imgs/rtdream/uncollected_min.png"}, {idx:6,dia:'XABCD',txt:"XABCD形态",val:"c2_6",isSelect:"no",selImg:'imgs/rtdream/c3_xabcdShapeSel.png',imgSrc:'imgs/rtdream/c3_xabcdShape.png',save:"imgs/rtdream/uncollected_min.png"}, {idx:7,dia:'TrianglePattern',txt:"三角形态",val:"c2_7",isSelect:"no",selImg:'imgs/rtdream/c3_tetraShapeSel.png',imgSrc:'imgs/rtdream/c3_tetraShape.png',save:"imgs/rtdream/uncollected_min.png"} ], [ {idx:0,dia:'FibSpeedResistanceFan',txt:"速阻线",val:"c3_0",isSelect:"no",selImg:'imgs/rtdream/c4_speedResistanceSel.png',imgSrc:'imgs/rtdream/c4_speedResistance.png',save:"imgs/rtdream/uncollected_min.png"}, {idx:1,dia:'GannBox',txt:"江恩箱",val:"c3_1",isSelect:"no",selImg:'imgs/rtdream/c4_JiangEnxiangSel.png',imgSrc:'imgs/rtdream/c4_JiangEnxiang.png',save:"imgs/rtdream/uncollected_min.png"}, {idx:2,dia:'GannFan',txt:"江恩角度线",val:"c3_2",isSelect:"no",selImg:'imgs/rtdream/c4_gannFanSel.png',imgSrc:'imgs/rtdream/c4_gannFan.png',save:"imgs/rtdream/uncollected_min.png"}, {idx:3,dia:'FibChannel',txt:"斐波那契通道",val:"c3_3",isSelect:"no",selImg:'imgs/rtdream/c4_screenLinesSel.png',imgSrc:'imgs/rtdream/c4_screenLines.png',save:"imgs/rtdream/uncollected_min.png"}, // {idx:4,dia:'FibCircles',txt:"消解点",val:"c3_4",isSelect:"no",selImg:'imgs/rtdream/c4_digestionSel.png',imgSrc:'imgs/rtdream/c4_digestion.png',save:"imgs/rtdream/uncollected_min.png"}, // {idx:5,dia:'Pitchfork',txt:"斐波那契周期线",val:"c3_5",isSelect:"no",selImg:'imgs/rtdream/c4_fibonacciSel.png',imgSrc:'imgs/rtdream/c4_fibonacci.png',save:"imgs/rtdream/uncollected_min.png"}, {idx:4,dia:'FibCircles',txt:"斐波那契同心圆",val:"c3_4",isSelect:"no",selImg:'imgs/rtdream/c4_fibonacciCirSel.png',imgSrc:'imgs/rtdream/c4_fibonacciCir.png',save:"imgs/rtdream/uncollected_min.png"}, {idx:5,dia:'Pitchfork',txt:"干草叉",val:"c3_5",isSelect:"no",selImg:'imgs/rtdream/c4_pitchforkSel.png',imgSrc:'imgs/rtdream/c4_pitchfork.png',save:"imgs/rtdream/uncollected_min.png"}, {idx:6,dia:'FibRetracement',txt:"黄金分割",val:"c3_6",isSelect:"no",selImg:'imgs/rtdream/c4_goldensectionSel.png',imgSrc:'imgs/rtdream/c4_goldensection.png',save:"imgs/rtdream/uncollected_min.png"} // {idx:7,dia:'PredictRange',txt:"预测点",val:"c3_7",isSelect:"no",selImg:'imgs/rtdream/c4_digestionSel.png',imgSrc:'imgs/rtdream/c4_digestion.png',save:"imgs/rtdream/uncollected_min.png"} ], [] ];
1 new list，写相关事件，点击事件可优化
分两步： 1.1如果list为第五个，写针对第五列的事件，用户取消收藏将服务器发送取消后的收藏结果，并且将取消元素移出当前组。
1.2 list为其他组，写不是特殊列事件，
用户取消保存改变当前收藏状态，将第五列元素对应的数组元素pop，将用户的收藏结果保存在服务器。
用户选择保存改变当前收藏状态，将第五列元素对应的数组元素push，将用户的收藏结果保存在服务器。
function createChartListTools(pid,showImg,index){//头部菜单画图显示
if (ChartListTools) {ChartListTools.r();}
var items = {
p:pid,
ifIcon:true,
ifSave:true,
items: chartLineStyle[+index],
onClick:function(selElm){
// [].forEach.call($('canvas_chartGroupTools').querySelectorAll('li[opt]'),function(elem){
// $(elem).ac('shadow1');
// })
if (+index === 4) {//收藏按钮功能
if ($(selElm.elm).find('img').length > 0) {
if ($(selElm.elm).chr(0).attr('opt') == 'save') {
if($(selElm.elm).chr(0).attr('isSelect') == 'yes'){
//判断收藏栏中是否有收藏图标，如果没有隐藏删除弹框
var selElmTag = $(selElm.elm).pn(2).getElementsByTagName('tr');
if (selElmTag.length<=1) {
ChartListTools.r();
$('canvas_chartTools_content').r();
}
$(selElm.elm).pn(0).r();
//删除收藏中取消选中的元素
var argsYes = chartLineStyle;
var _selVal = selElm.val;
for(var i=0; i<argsYes[+index].length; i++){
if(argsYes[+index][i].val == _selVal){
var _imgFrom = _selVal.substring(1,2);
var _imgFromIndex = _selVal.substring(3,_selVal.length);
(argsYes[+_imgFrom])[_imgFromIndex].isSelect = 'no';
(argsYes[+_imgFrom])[_imgFromIndex].save = 'imgs/rtdream/uncollected_min.png';
argsYes[+index].splice(i, 1);
}
}
chartSaveArr = argsYes[4];
settingsSet('UserSettingsTemplates.Userlayouttemplates.chartLineItems',chartSaveArr,null,false);
}
}else{
var get_i = chartLineStyle[+index];
selectDrawType(get_i[selElm.idx].dia);
ChartListTools.r();
$('canvas_chartTools_content').r();
}
}else{
var get_i = chartLineStyle[+index];
selectDrawType(get_i[selElm.idx].dia);
ChartListTools.r();
$('canvas_chartTools_content').r();
}
}else{//选择画图工具功能
if ($(selElm.elm).find('img').length > 0) {
if ($(selElm.elm).chr(0).attr('opt') == 'save') {
if($(selElm.elm).chr(0).attr('isSelect') == 'yes'){
$(selElm.elm).chr(0).attr('src','imgs/rtdream/uncollected_min.png');
$(selElm.elm).chr(0).attr('isSelect','no');
var argsYes = chartLineStyle;
(argsYes[+index])[selElm.idx].isSelect = 'no';
(argsYes[+index])[selElm.idx].save = 'imgs/rtdream/uncollected_min.png';
//删除收藏中取消选中的元素
var _selVal = (argsYes[+index])[selElm.idx].val;
for(var i=0; i<argsYes[4].length; i++){
if(argsYes[4][i].val == _selVal){
argsYes[4].splice(i, 1);
}
}
chartSaveArr = argsYes[4];
settingsSet('UserSettingsTemplates.Userlayouttemplates.chartLineItems',chartSaveArr,null,false);
}else{
$(selElm.elm).chr(0).attr('src','imgs/rtdream/collected_min.png');
$(selElm.elm).chr(0).attr('isSelect','yes');
var argsNO = chartLineStyle;
(argsNO[+index])[selElm.idx].isSelect = 'yes';
(argsNO[+index])[selElm.idx].save = 'imgs/rtdream/collected_min.png';
//添加收藏中选中的元素
var _add = {
idx:argsNO[4].length,
txt:(argsNO[+index])[selElm.idx].txt,
val:(argsNO[+index])[selElm.idx].val,
isSelect:(argsNO[+index])[selElm.idx].isSelect,
selImg:(argsNO[+index])[selElm.idx].selImg,
imgSrc:(argsNO[+index])[selElm.idx].imgSrc,
save:(argsNO[+index])[selElm.idx].save,
dia:(argsNO[+index])[selElm.idx].dia
};
argsNO[4].push(_add);
chartSaveArr = argsNO[4];
settingsSet('UserSettingsTemplates.Userlayouttemplates.chartLineItems',chartSaveArr,null,false);
}
}else{
var get_i = chartLineStyle[+index];
if (showImg) {
showImg.chr(0).attr('src',get_i[selElm.idx].selImg);
showImg.chr(0).attr('dia',get_i[selElm.idx].dia);
}
selectDrawType(get_i[selElm.idx].dia);
ChartListTools.r();
$('canvas_chartTools_content').r();
}
}else{
var get_f = chartLineStyle[+index];
if (showImg) {
showImg.chr(0).attr('src',get_f[selElm.idx].selImg);
showImg.chr(0).attr('dia',get_f[selElm.idx].dia);
}
selectDrawType(get_f[selElm.idx].dia);
ChartListTools.r();
$('canvas_chartTools_content').r();
}
}
}
};
ChartListTools = new WT.UI.List_bs(items);
ChartListTools.render();
ChartListTools.show();
}
2 在点击事件触发时调用函数
$('canvas_chartGroupTools').evt('click',function(){ var e=WT.e.fix(e),_e=e.t; if ($('canvas_chartTools_content')) { $('canvas_chartTools_content').r(); [].forEach.call($('canvas_chartGroupTools').querySelectorAll('li[opt]'),function(elem){ $(elem).ac('shadow1'); }); } [].forEach.call($('canvas_chartGroupTools').querySelectorAll('[src]'),function(elem){//点击其他元素图像设置为未选中状态 if ($(elem).attr('src').indexOf('Sel.png')>-1) { var _elemSrc = $(elem).attr('src'); _elemSrc = _elemSrc.slice(0,_elemSrc.length-7)+'.png'; $(elem).attr('src',_elemSrc); } }); while (_e.tagName != 'UL') {//统一操作 if (_e.tagName === 'LI' && !_e.attr('isdel')) { var _o = _e.pos(); if (+_e.attr('opt') <= 3) { $DB.adElm('canvas_chartTools_content', 'div').css(WT.box(Number(_o.x)+","+Number(_o.y+20)+",150,200")).cn('pa').css('z-index:10;'); createChartListTools($('canvas_chartTools_content'),_e,+_e.attr('opt')); }else if (+_e.attr('opt') === 4) { if(chartLineStyle[4].length>0){ $DB.adElm('canvas_chartTools_content', 'div').css(WT.box(Number(_o.x)+","+Number(_o.y+20)+",150,200")).cn('pa').css('z-index:10;'); createChartListTools($('canvas_chartTools_content'),false,+_e.attr('opt')); }else{ var save = $DB.adElm('canvas_chartTools_content', 'div').css(WT.box(Number(_o.x)+","+Number(_o.y+20)+",150,200")).cn('pa').css('z-index:10; background-color: white; border: 1px #ccc solid; text-align: center; padding-top: 10px;'); $(save).adElm('','div').cn('w150 h200 b_65 bc_68 tac pt10').ht('没有收藏内容'); } }else if(+_e.attr('opt') === 5){ ChartWidget.showCanvasTrade(); } if(menuChatSelect&&menuChatSelect.attr('opt')==5){ menuChatSelect.chr(0).attr('src','imgs/rtdream/canvas_font.png'); } if(_e.attr('opt')==5){ _e.chr(0).attr('src','imgs/rtdream/canvas_font_act.png'); } if (_e == menuChatSelect) { return; }else{ if (menuChatSelect) { menuChatSelect.ac('shadow1'); } } _e.dc('shadow1'); menuChatSelect = _e; }else if(+_e.attr('opt') === 6){ delPiccbFn(); } _e = _e.pn(); } });