码迷,mamicode.com
首页 > 其他好文 > 详细

list组件应用

时间:2016-06-30 21:48:23      阅读:256      评论:0      收藏:0      [点我收藏+]

标签:

画线工具,功能需求:五个列表,前四列每一行都存放着不同的画线工具。第五列用于保存自己收藏的图形。其中每列都具有收藏和取消收藏的功能。

数据结构

第五列数组内容为空,在页面初始化时向服务器动态获取用户收藏的工具。

技术分享
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"}
            ],
        []
    ];
View Code

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();
    }
View Code

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();
            }
        });
View Code

 

list组件应用

标签:

原文地址:http://www.cnblogs.com/lv-sally/p/5631210.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!