前端的小玩意(9.4)——做一个仿360工具箱的web页面(自动生成所有图标,对图标添加响应逻辑)

简介:

DEMO网址:

http://jianwangsan.cn/toolbox


(四)制作JSON,自动将图标填充进所有工具

首先是JSON,因为工具很多,所以JSON内容很长。

具体而言,JSON是一个数组中的对象(只有这一个对象),他有两个属性:BigImg和CommonImg。

这两个属性都是数组类型;

BigImg里面,他用于存放最上面的三个大图标;

CommonImg里面,存放其他工具图标。

BigImg单个数组元素的结构如下:

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <span style="font-family:SimSun;">{  
  2.   "title""微信清理",  
  3.   "description""定期清理微信,节省手机空间",  
  4.   "bigImg": {  
  5.     "ImgPosition": {  
  6.       "x""0px",  
  7.       "y""0px"  
  8.     }  
  9.   },  
  10.   "commonImg": {  
  11.     "ImgPosition": {  
  12.       "x""-100px",  
  13.       "y""0px"  
  14.     }  
  15.   }  
  16. },</span>  

 

前两个属性看值就知道了;

bingImg和commonImg属性中的ImgPosition中的两个属性,主要是描述这个图标在图片中的位置;

 

CommonImg结构类似:

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. {  
  2.   "title""手游模拟器",  
  3.   "description""电脑玩手游,挂机辅助神器",  
  4.   "type""title",  
  5.   "commonImg": {  
  6.     "ImgPosition": {  
  7.       "x""-100px",  
  8.       "y""-100px"  
  9.     }  
  10.   }  
  11. },  

只不过少了一个bigImg属性(因为他不需要);

但多了一个type属性,用于描述其将放置于哪个分类下面。

下面上JSON的全部内容:(共计661行)

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. [  
  2.   {  
  3.     "BigImg": [  
  4.       {  
  5.         "title""微信清理",  
  6.         "description""定期清理微信,节省手机空间",  
  7.         "bigImg": {  
  8.           "ImgPosition": {  
  9.             "x""0px",  
  10.             "y""0px"  
  11.           }  
  12.         },  
  13.         "commonImg": {  
  14.           "ImgPosition": {  
  15.             "x""-100px",  
  16.             "y""0px"  
  17.           }  
  18.         }  
  19.       },  
  20.       {  
  21.         "title""雷电OS",  
  22.         "description""雷电OS Editor 旧机变新机",  
  23.         "bigImg": {  
  24.           "ImgPosition": {  
  25.             "x""-350px",  
  26.             "y""0px"  
  27.           }  
  28.         },  
  29.         "commonImg": {  
  30.           "ImgPosition": {  
  31.             "x""-600px",  
  32.             "y""-500px"  
  33.           }  
  34.         }  
  35.       },  
  36.       {  
  37.         "title""手机相册扩容",  
  38.         "description""无损处理图片,腾出50%空间",  
  39.         "bigImg": {  
  40.           "ImgPosition": {  
  41.             "x""-700px",  
  42.             "y""0px"  
  43.           }  
  44.         },  
  45.         "commonImg": {  
  46.           "ImgPosition": {  
  47.             "x""-700px",  
  48.             "y""-500px"  
  49.           }  
  50.         }  
  51.       }  
  52.     ],  
  53.     "CommonImg": [  
  54.       {  
  55.         "title""手游模拟器",  
  56.         "description""电脑玩手游,挂机辅助神器",  
  57.         "type""title",  
  58.         "commonImg": {  
  59.           "ImgPosition": {  
  60.             "x""-100px",  
  61.             "y""-100px"  
  62.           }  
  63.         }  
  64.       },  
  65.       {  
  66.         "title""360连回家",  
  67.         "description""随时随地,清理家中电脑",  
  68.         "type""title",  
  69.         "commonImg": {  
  70.           "ImgPosition": {  
  71.             "x""-200px",  
  72.             "y""-100px"  
  73.           }  
  74.         }  
  75.       },  
  76.       {  
  77.         "title""驱动大师",  
  78.         "description""驱动安装一键解决",  
  79.         "type""title",  
  80.         "commonImg": {  
  81.           "ImgPosition": {  
  82.             "x""-300px",  
  83.             "y""-100px"  
  84.           }  
  85.         }  
  86.       },  
  87.       {  
  88.         "title""安全桌面",  
  89.         "description""一键整理您的桌面",  
  90.         "type""safe",  
  91.         "commonImg": {  
  92.           "ImgPosition": {  
  93.             "x""-400px",  
  94.             "y""-100px"  
  95.           }  
  96.         }  
  97.       },  
  98.       {  
  99.         "title""隐私保镖",  
  100.         "description""五层隐私防护,清理隐私痕迹",  
  101.         "type""safe",  
  102.         "commonImg": {  
  103.           "ImgPosition": {  
  104.             "x""-500px",  
  105.             "y""-100px"  
  106.           }  
  107.         }  
  108.       },  
  109.       {  
  110.         "title""防黑加固",  
  111.         "description""修补可能会被黑客利用的",  
  112.         "type""safe",  
  113.         "commonImg": {  
  114.           "ImgPosition": {  
  115.             "x""-600px",  
  116.             "y""-100px"  
  117.           }  
  118.         }  
  119.       },  
  120.       {  
  121.         "title""软件管家",  
  122.         "description""安全下载,轻松管理您的软件",  
  123.         "type""safe",  
  124.         "commonImg": {  
  125.           "ImgPosition": {  
  126.             "x""-400px",  
  127.             "y""0px"  
  128.           }  
  129.         }  
  130.       },  
  131.       {  
  132.         "title""人工服务",  
  133.         "description""7*24小时为您解决电脑问题",  
  134.         "type""safe",  
  135.         "commonImg": {  
  136.           "ImgPosition": {  
  137.             "x""-500px",  
  138.             "y""0px"  
  139.           }  
  140.         }  
  141.       },  
  142.       {  
  143.         "title""手机助手",  
  144.         "description""免费手机应用,资源下载平台",  
  145.         "type""safe",  
  146.         "commonImg": {  
  147.           "ImgPosition": {  
  148.             "x""-700px",  
  149.             "y""-100px"  
  150.           }  
  151.         }  
  152.       },  
  153.       {  
  154.         "title""弹窗拦截",  
  155.         "description""拦弹窗,去广告,就是给力",  
  156.         "type""safe",  
  157.         "commonImg": {  
  158.           "ImgPosition": {  
  159.             "x""-800px",  
  160.             "y""-100px"  
  161.           }  
  162.         }  
  163.       },  
  164.       {  
  165.         "title""隔离沙箱",  
  166.         "description""隔离系统真实环境运行软件",  
  167.         "type""safe",  
  168.         "commonImg": {  
  169.           "ImgPosition": {  
  170.             "x""-900px",  
  171.             "y""-100px"  
  172.           }  
  173.         }  
  174.       },  
  175.       {  
  176.         "title""软件小助手",  
  177.         "description""快速启动您常用软件",  
  178.         "type""safe",  
  179.         "commonImg": {  
  180.           "ImgPosition": {  
  181.             "x""0px",  
  182.             "y""-200px"  
  183.           }  
  184.         }  
  185.       },  
  186.       {  
  187.         "title""主页防护",  
  188.         "description""防止恶意程序篡改浏览器主页",  
  189.         "type""safe",  
  190.         "commonImg": {  
  191.           "ImgPosition": {  
  192.             "x""-100px",  
  193.             "y""-200px"  
  194.           }  
  195.         }  
  196.       },  
  197.       {  
  198.         "title""主页修复",  
  199.         "description""一键解决浏览器主页相关问题",  
  200.         "type""safe",  
  201.         "commonImg": {  
  202.           "ImgPosition": {  
  203.             "x""-200px",  
  204.             "y""-200px"  
  205.           }  
  206.         }  
  207.       },  
  208.       {  
  209.         "title""文件解密",  
  210.         "description""免费还原被木马加密的文件",  
  211.         "type""safe",  
  212.         "commonImg": {  
  213.           "ImgPosition": {  
  214.             "x""-300px",  
  215.             "y""-200px"  
  216.           }  
  217.         }  
  218.       },  
  219.       {  
  220.         "title""网络优化",  
  221.         "description""全新家庭网络管理,秒踢蹭网",  
  222.         "type""network",  
  223.         "commonImg": {  
  224.           "ImgPosition": {  
  225.             "x""-400px",  
  226.             "y""-200px"  
  227.           }  
  228.         }  
  229.       },  
  230.       {  
  231.         "title""断网急救箱",  
  232.         "description""上不了网?就用断网急救箱",  
  233.         "type""network",  
  234.         "commonImg": {  
  235.           "ImgPosition": {  
  236.             "x""-600px",  
  237.             "y""0px"  
  238.           }  
  239.         }  
  240.       },  
  241.       {  
  242.         "title""免费WiFi",  
  243.         "description""电脑变热点,免费无线上网",  
  244.         "type""network",  
  245.         "commonImg": {  
  246.           "ImgPosition": {  
  247.             "x""-700px",  
  248.             "y""0px"  
  249.           }  
  250.         }  
  251.       },  
  252.       {  
  253.         "title""宽带测速器",  
  254.         "description""获取网络带宽和上网速度数值",  
  255.         "type""network",  
  256.         "commonImg": {  
  257.           "ImgPosition": {  
  258.             "x""-800px",  
  259.             "y""0px"  
  260.           }  
  261.         }  
  262.       },  
  263.       {  
  264.         "title""WiFi体检",  
  265.         "description""检测并修复路由器安全隐患",  
  266.         "type""network",  
  267.         "commonImg": {  
  268.           "ImgPosition": {  
  269.             "x""-500px",  
  270.             "y""-200px"  
  271.           }  
  272.         }  
  273.       },  
  274.       {  
  275.         "title""流量防火墙",  
  276.         "description""发现并阻止偷偷占流量的程序",  
  277.         "type""network",  
  278.         "commonImg": {  
  279.           "ImgPosition": {  
  280.             "x""0px",  
  281.             "y""-100px"  
  282.           }  
  283.         }  
  284.       },  
  285.       {  
  286.         "title""LSP修复",  
  287.         "description""修复网络异常和不能上网",  
  288.         "type""network",  
  289.         "commonImg": {  
  290.           "ImgPosition": {  
  291.             "x""-600px",  
  292.             "y""-200px"  
  293.           }  
  294.         }  
  295.       },  
  296.       {  
  297.         "title""DNS优选",  
  298.         "description""杜绝网络差,启用更优DNS",  
  299.         "type""network",  
  300.         "commonImg": {  
  301.           "ImgPosition": {  
  302.             "x""-700px",  
  303.             "y""-200px"  
  304.           }  
  305.         }  
  306.       },  
  307.       {  
  308.         "title""寝室必备",  
  309.         "description""看看哪个室友在占网速",  
  310.         "type""network",  
  311.         "commonImg": {  
  312.           "ImgPosition": {  
  313.             "x""-800px",  
  314.             "y""-200px"  
  315.           }  
  316.         }  
  317.       },  
  318.       {  
  319.         "title""360壁纸",  
  320.         "description""海量高清壁纸,美化电脑桌面",  
  321.         "type""system",  
  322.         "commonImg": {  
  323.           "ImgPosition": {  
  324.             "x""-900px",  
  325.             "y""-200px"  
  326.           }  
  327.         }  
  328.       },  
  329.       {  
  330.         "title""急救盘",  
  331.         "description""一盘在手,系统无忧",  
  332.         "type""system",  
  333.         "commonImg": {  
  334.           "ImgPosition": {  
  335.             "x""0px",  
  336.             "y""-300px"  
  337.           }  
  338.         }  
  339.       },  
  340.       {  
  341.         "title""任务管理器",  
  342.         "description""找出当前占用资源的程序",  
  343.         "type""system",  
  344.         "commonImg": {  
  345.           "ImgPosition": {  
  346.             "x""-300px",  
  347.             "y""0px"  
  348.           }  
  349.         }  
  350.       },  
  351.       {  
  352.         "title""鲁大师",  
  353.         "description""辨别硬件真伪,实时监测温度",  
  354.         "type""system",  
  355.         "commonImg": {  
  356.           "ImgPosition": {  
  357.             "x""-100px",  
  358.             "y""-300px"  
  359.           }  
  360.         }  
  361.       },  
  362.       {  
  363.         "title""默认软件",  
  364.         "description""帮您设置常用的默认软件",  
  365.         "type""system",  
  366.         "commonImg": {  
  367.           "ImgPosition": {  
  368.             "x""-200px",  
  369.             "y""-300px"  
  370.           }  
  371.         }  
  372.       },  
  373.       {  
  374.         "title""查找大文件",  
  375.         "description""找出占用磁盘空间的大文件",  
  376.         "type""system",  
  377.         "commonImg": {  
  378.           "ImgPosition": {  
  379.             "x""-300px",  
  380.             "y""-300px"  
  381.           }  
  382.         }  
  383.       },  
  384.       {  
  385.         "title""注册表瘦身",  
  386.         "description""清理无效、错误的注册表键值",  
  387.         "type""system",  
  388.         "commonImg": {  
  389.           "ImgPosition": {  
  390.             "x""-400px",  
  391.             "y""-300px"  
  392.           }  
  393.         }  
  394.       },  
  395.       {  
  396.         "title""系统盘瘦身",  
  397.         "description""通过瘦身解决系统盘空间不足",  
  398.         "type""system",  
  399.         "commonImg": {  
  400.           "ImgPosition": {  
  401.             "x""-500px",  
  402.             "y""-300px"  
  403.           }  
  404.         }  
  405.       },  
  406.       {  
  407.         "title""文件恢复",  
  408.         "description""快速帮您恢复被误删的文件",  
  409.         "type""system",  
  410.         "commonImg": {  
  411.           "ImgPosition": {  
  412.             "x""-600px",  
  413.             "y""-300px"  
  414.           }  
  415.         }  
  416.       },  
  417.       {  
  418.         "title""系统急救箱",  
  419.         "description""查杀顽固木马,修复系统异常",  
  420.         "type""system",  
  421.         "commonImg": {  
  422.           "ImgPosition": {  
  423.             "x""-600px",  
  424.             "y""0px"  
  425.           }  
  426.         }  
  427.       },  
  428.       {  
  429.         "title""磁盘擦除",  
  430.         "description""彻底清除磁盘数据,保护隐私",  
  431.         "type""system",  
  432.         "commonImg": {  
  433.           "ImgPosition": {  
  434.             "x""-700px",  
  435.             "y""-300px"  
  436.           }  
  437.         }  
  438.       },  
  439.       {  
  440.         "title""一键装机",  
  441.         "description""装机必备软件一键搞定",  
  442.         "type""system",  
  443.         "commonImg": {  
  444.           "ImgPosition": {  
  445.             "x""-800px",  
  446.             "y""-300px"  
  447.           }  
  448.         }  
  449.       },  
  450.       {  
  451.         "title""右键管理",  
  452.         "description""管理鼠标的右键菜单",  
  453.         "type""system",  
  454.         "commonImg": {  
  455.           "ImgPosition": {  
  456.             "x""-900px",  
  457.             "y""-300px"  
  458.           }  
  459.         }  
  460.       },  
  461.       {  
  462.         "title""系统重装",  
  463.         "description""无需光盘,恢复系统初始状态",  
  464.         "type""system",  
  465.         "commonImg": {  
  466.           "ImgPosition": {  
  467.             "x""0px",  
  468.             "y""-400px"  
  469.           }  
  470.         }  
  471.       },  
  472.       {  
  473.         "title""网游加速器",  
  474.         "description""解决游戏卡机掉线,永久免费",  
  475.         "type""game",  
  476.         "commonImg": {  
  477.           "ImgPosition": {  
  478.             "x""-100px",  
  479.             "y""-400px"  
  480.           }  
  481.         }  
  482.       },  
  483.       {  
  484.         "title""游戏大厅",  
  485.         "description""小号多开不串号,键鼠回放爽",  
  486.         "type""game",  
  487.         "commonImg": {  
  488.           "ImgPosition": {  
  489.             "x""-200px",  
  490.             "y""-400px"  
  491.           }  
  492.         }  
  493.       },  
  494.       {  
  495.         "title""游戏保险箱",  
  496.         "description""保护游戏网银账号安全",  
  497.         "type""game",  
  498.         "commonImg": {  
  499.           "ImgPosition": {  
  500.             "x""-300px",  
  501.             "y""-400px"  
  502.           }  
  503.         }  
  504.       },  
  505.       {  
  506.         "title""游戏优化器",  
  507.         "description""一键解决玩游戏卡、慢问题",  
  508.         "type""game",  
  509.         "commonImg": {  
  510.           "ImgPosition": {  
  511.             "x""-400px",  
  512.             "y""-400px"  
  513.           }  
  514.         }  
  515.       },  
  516.       {  
  517.         "title""360理财",  
  518.         "description""360互联网金融服务平台",  
  519.         "type""smalltools",  
  520.         "commonImg": {  
  521.           "ImgPosition": {  
  522.             "x""-500px",  
  523.             "y""-400px"  
  524.           }  
  525.         }  
  526.       },  
  527.       {  
  528.         "title""360看图",  
  529.         "description""防范图片木马,安全查看照片",  
  530.         "type""smalltools",  
  531.         "commonImg": {  
  532.           "ImgPosition": {  
  533.             "x""-600px",  
  534.             "y""-400px"  
  535.           }  
  536.         }  
  537.       },  
  538.       {  
  539.         "title""魔法摄像头",  
  540.         "description""让视频聊天既安全又有趣",  
  541.         "type""smalltools",  
  542.         "commonImg": {  
  543.           "ImgPosition": {  
  544.             "x""-700px",  
  545.             "y""-400px"  
  546.           }  
  547.         }  
  548.       },  
  549.       {  
  550.         "title""360云盘",  
  551.         "description""安全免费,超大空间的云盘",  
  552.         "type""smalltools",  
  553.         "commonImg": {  
  554.           "ImgPosition": {  
  555.             "x""-200px",  
  556.             "y""0px"  
  557.           }  
  558.         }  
  559.       },  
  560.       {  
  561.         "title""C盘搬家",  
  562.         "description""转移系统盘重要资料和文件",  
  563.         "type""smalltools",  
  564.         "commonImg": {  
  565.           "ImgPosition": {  
  566.             "x""-800px",  
  567.             "y""-400px"  
  568.           }  
  569.         }  
  570.       },  
  571.       {  
  572.         "title""360问答",  
  573.         "description""提出你的问题,分分钟有答案",  
  574.         "type""smalltools",  
  575.         "commonImg": {  
  576.           "ImgPosition": {  
  577.             "x""-900px",  
  578.             "y""-400px"  
  579.           }  
  580.         }  
  581.       },  
  582.       {  
  583.         "title""苹果设备清理",  
  584.         "description""清理App垃圾,节省手机空间",  
  585.         "type""smalltools",  
  586.         "commonImg": {  
  587.           "ImgPosition": {  
  588.             "x""0px",  
  589.             "y""-500px"  
  590.           }  
  591.         }  
  592.       },  
  593.       {  
  594.         "title""360压缩",  
  595.         "description""新一代的压缩软件,永久免费",  
  596.         "type""smalltools",  
  597.         "commonImg": {  
  598.           "ImgPosition": {  
  599.             "x""-100px",  
  600.             "y""-500px"  
  601.           }  
  602.         }  
  603.       },  
  604.       {  
  605.         "title""健康精灵",  
  606.         "description""可爱精灵,助您健康使用电脑",  
  607.         "type""smalltools",  
  608.         "commonImg": {  
  609.           "ImgPosition": {  
  610.             "x""-200px",  
  611.             "y""-500px"  
  612.           }  
  613.         }  
  614.       },  
  615.       {  
  616.         "title""小清新日历",  
  617.         "description""查询天气、农历和节假日",  
  618.         "type""smalltools",  
  619.         "commonImg": {  
  620.           "ImgPosition": {  
  621.             "x""0px",  
  622.             "y""0px"  
  623.           }  
  624.         }  
  625.       },  
  626.       {  
  627.         "title""安全浏览器",  
  628.         "description""恶意网站拦截,下载保护",  
  629.         "type""smalltools",  
  630.         "commonImg": {  
  631.           "ImgPosition": {  
  632.             "x""-300px",  
  633.             "y""-500px"  
  634.           }  
  635.         }  
  636.       },  
  637.       {  
  638.         "title""文件粉碎机",  
  639.         "description""彻底粉碎无法删除的文件",  
  640.         "type""smalltools",  
  641.         "commonImg": {  
  642.           "ImgPosition": {  
  643.             "x""-400px",  
  644.             "y""-500px"  
  645.           }  
  646.         }  
  647.       },  
  648.       {  
  649.         "title""U盘鉴定器",  
  650.         "description""鉴定U盘真实容量",  
  651.         "type""smalltools",  
  652.         "commonImg": {  
  653.           "ImgPosition": {  
  654.             "x""-500px",  
  655.             "y""-500px"  
  656.           }  
  657.         }  
  658.       }  
  659.     ]  
  660.   }  
  661. ]  

 

为了适应type,接下来我们需要改造html模板:

div.toolbox-alldom结构改装成如下:

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. div.toolbox-all  
  2.     //这个是最上面的大图标那一行  
  3.     div.firstRow  
  4.         //以下是单个按钮  
  5.     //横线那一行,如果是多行app,应考虑使用另外一个  
  6.     div.dotted  
  7.     div.commonRow.title  
  8.     div.titleRow  
  9.         span.titleRow-left  
  10.         span.titleRow-text  电脑安全  
  11.     div.commonRow.safe  
  12.     div.titleRow  
  13.         span.titleRow-left  
  14.         span.titleRow-text  网络优化  
  15.     div.commonRow.network  
  16.     div.titleRow  
  17.         span.titleRow-left  
  18.         span.titleRow-text  系统工具  
  19.     div.commonRow.system  
  20.     div.titleRow  
  21.         span.titleRow-left  
  22.         span.titleRow-text  游戏优化  
  23.     div.commonRow.game  
  24.     div.titleRow  
  25.         span.titleRow-left  
  26.         span.titleRow-text  实用小工具  
  27.     div.commonRow.smalltools  

 

这样通过type来定位该图标被添加的dom位置即可。

 

顺便,以上订正了一个之前把commonRow打成commanRow的问题。记得修改样式表(尴尬)

 

再顺便订正三个样式需要被调整的地方:

[css]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. .back .contentbox .commonRow .normalTool .text .title {  
  2.     line-height25px;  
  3.     font-size16px;  
  4. }  
  5.   
  6. .back .contentbox .commonRow .normalTool .text .description {  
  7.     line-height30px;  
  8.     font-size12px;  
  9.     color#aaa;  
  10. }  
  11.   
  12. .back .contentbox .commonRow .normalTool .addButton {  
  13.     displaynone;  
  14.     positionabsolute;  
  15.     top: 7px;  
  16.     right: 15px;  
  17.     width60px;  
  18.     height22px;  
  19.     background-image: linear-gradient(rgb(98227250%rgb(6820827100%);  
  20.     font-size12px;  
  21.     colorwhite;  
  22.     text-aligncenter;  
  23.     line-height20px;  
  24.     border1px solid rgb(6519936);  
  25.     -webkit-border-radius: 1px;  
  26.     -moz-border-radius: 1px;  
  27.     border-radius: 1px;  
  28. }  

 

下来呢,我们需要读取JSON,然后将其添加入页面之中;

 

首先,创建一个Tool类,他表示一个图标;

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. //单个工具  
  2. var Tool = function (obj) {  
  3.     this.obj = obj;  
  4.   
  5.     // 0表示未加载到我的工具,1表示加载到我的工具,2表示加载到我的工具的右下小窗处  
  6.     // 为了方便测试,这里先默认设置为1  
  7.     this.state = 1;  
  8.   
  9.     //用于在全部工具页面  
  10.     this.createBigImgDom = function (callback) {  
  11.         var self = this;  
  12.         var obj = this.obj  
  13.         var str = '<div class="BigTool">' +  
  14.             '<span class="img" style="background-position: ' + obj.bigImg.ImgPosition.x + ' ' + obj.bigImg.ImgPosition.y + '"></span>' +  
  15.             '<span class="mask"></span>' +  
  16.             '<div class="text">' +  
  17.             '<div class="title">' + obj.title + '</div>' +  
  18.             '<div class="description">' + obj.description + '</div>' +  
  19.             '</div>' +  
  20.             '<div class="addButton">添加</div>' +  
  21.             '</div>';  
  22.         var node = $(str);  
  23.         node.click(function () {  
  24.             if (self.state) {  
  25.                 callback();  
  26.             }  
  27.         })  
  28.         return node;  
  29.     };  
  30.     this.createNormalTool = function (callback) {  
  31.         var self = this;  
  32.         var obj = this.obj  
  33.         var str = '<div class="normalTool">' +  
  34.             '<div class="img" style="background-position: ' + obj.commonImg.ImgPosition.x + ' ' + obj.commonImg.ImgPosition.y + '"></div>' +  
  35.             '<div class="text">' +  
  36.             '<div class="title">' + obj.title + '</div>' +  
  37.             '<div class="description">' + obj.description + '</div>' +  
  38.             '</div>' +  
  39.             '<div class="addButton">添加</div>' +  
  40.             '</div>';  
  41.         var node = $(str);  
  42.         node.click(function () {  
  43.             if (self.state) {  
  44.                 callback();  
  45.             }  
  46.         })  
  47.         return node;  
  48.     };  
  49.     this.createSmallTool = function (callback) {  
  50.         var obj = this.obj  
  51.         var position_x = parseInt(obj.commonImg.ImgPosition.x) * 0.615 + "px";  
  52.         var position_y = parseInt(obj.commonImg.ImgPosition.y) * 0.615 + "px";  
  53.         var str = '<div class="tool-foot">' +  
  54.             '<div class="img"  style="background-position: ' + position_x + ' ' + position_y + '"></div>' +  
  55.             '<div class="text"></div>' +  
  56.             '</div>';  
  57.         var node = $(str);  
  58.         node.click(function () {  
  59.             if (self.state) {  
  60.                 callback();  
  61.             }  
  62.         })  
  63.         return node;  
  64.     };  
  65. }  

 

他有三个方法,两个属性;

obj属性是在创建的时候赋值给他的,方便读取创建实例时的初始值。这个初始值就是上面那个JSON中的一个元素(BigImgCommonImg中的一个元素);

state属性表示该按钮状态,具体看注释

 

 

三个方法的作用依次为:

①返回一个用于所有工具最顶端的大图标的dom

②返回一个用于放置在所有工具、我的工具普通位置的dom

③返回一个用于放在我的工具右下角小位置的dom

④他们都有一个点击事件,会判断当前状态来进行。为了方便测试,我这里并没有针对性的设置。在之后会进行修改。

 

我们还缺一些其他的方法,例如将移动用的函数,点击后触发事件的函数等等;

 

还缺一些属性,例如,设置其目前是否可以移动,目前处于什么位置的东西等等;

 

等等我们再补全这个Tool类。

 

 

然后,我们需要创建一个加载JSON,处理数据的类。

在创建这个类之前,我们建立一个data文件夹,和imgjavascriptsstylesheets文件夹平级;

JSON命名为tools.json,并放于data文件夹中;

 

下面是处理这个JSONJS代码类:

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. var ToolsConfigJsonLoad = function (url) {  
  2.     this.url = url ? url : "data/tools.json";  
  3.     this.load = function () {  
  4.         var self = this;  
  5.         $.ajax({  
  6.             url: self.url,  
  7.             dataType: "json",  
  8.             type: "GET",  
  9.             success: function (data) {  
  10.                 self.addToolsInToolbox_all(data);  
  11.   
  12.             }  
  13.         })  
  14.     };  
  15.   
  16.     //将内容添加到全部工具页面中  
  17.     this.addToolsInToolbox_all = function (data) {  
  18.         var type = [];  
  19.         data[0].BigImg.forEach(function (obj) {  
  20.             var tool = new Tool(obj);  
  21.             var mixin = new MixinTool(tool);  
  22.             var callback = mixin.mixin()  
  23.             $(".firstRow").append(tool.createBigImgDom(callback));  
  24.         })  
  25.         data[0].CommonImg.forEach(function (obj) {  
  26.             if (type.indexOf(obj.type) < 0) {  
  27.                 type.push(obj.type);  
  28.             }  
  29.             var tool = new Tool(obj);  
  30.             var mixin = new MixinTool(tool);  
  31.             var callback = mixin.mixin()  
  32.   
  33.             $(".commonRow." + obj.type).append(tool.createNormalTool(callback));  
  34.         })  
  35.           
  36.         this.addPlaceHolderWhenOnlyTwoToolsInToolbox_All(type);  
  37.         this.addDottedLineInToolbox_All();  
  38.   
  39.     };  
  40.     // 这个目的是当某一行只有两个图标时,创造一个占位的图标  
  41.     this.addPlaceHolderWhenOnlyTwoToolsInToolbox_All = function (type) {  
  42.         type.forEach(function (obj) {  
  43.             var length = $(".commonRow." + obj + " > *").length;  
  44.             if (length % 3 == 2) {  
  45.                 $(".commonRow." + obj).append($('<div class="normalToolHolder"></div>'));  
  46.             }  
  47.         })  
  48.     };  
  49.   
  50.     // 这个目的是为了给全部工具中的多行工具之间添加分割线  
  51.     this.addDottedLineInToolbox_All = function () {  
  52.         $(".commonRow .normalTool:nth-child(3n+4)").before('<div class="dotted"></div>');  
  53.     }  
  54. }  

这部分代码最重要的是load函数;

①他会发起一个ajax请求,来读取这个json

ajax请求可以使用用户自己给的url(如果有的话),或者默认url

③在请求成功后,会对数据进行处理,简单来说,分别遍历BigImg这个属性的每个元素以及CommonImg这个属性的每个元素;

④利用这些元素的数据,生成一个Tool实例,然后又对她做了一些其他事情(具体之后再说),然后生成一个dom对象,插入到指定位置。

 

 

在生成工具的时候,显然每个工具的用途是不同的,因此我们希望这个工具在点击的时候,执行不同的处理方法,具体做法有以下几种。

①生成Tool实例的时候,手动给起赋予一个处理函数(缺点:生成代码虎非常长,而且堆积在一起会很乱);

②将处理函数放在Tool类里,然后生成dom的时候,点击事件触发Tool了的不同方法(缺点:Tool类会非常长,并且可以通过Tool类的实例来调用本来不希望他调用的方法);

③将所有的处理方法集中在一个类之中,我们需要编辑的时候只需要编辑这个类即可,然后将对应的方法,作为回调函数传递给这个dom的创建函数,在创建函数里,调用这个回调函数(我的选择)。

 

我这里选择的是第三种方法,因此需要生成一个MixinTool类,他具备将对应的方法返回给对应的Tool类实例的功能。

为了区别不同按钮,我在JSON里每个元素里新加了一个属性ID,具体修改后内容如下;

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. {  
  2.   "title""微信清理",  
  3.   "ID":"No0",  
  4.   "description""定期清理微信,节省手机空间",  
  5.   "bigImg": {  
  6.     "ImgPosition": {  
  7.       "x""0px",  
  8.       "y""0px"  
  9.     }  
  10.   },  
  11.   "commonImg": {  
  12.     "ImgPosition": {  
  13.       "x""-100px",  
  14.       "y""0px"  
  15.     }  
  16.   }  
  17. },  

这里的ID的值,就是利用该元素生成Tool实例时,我们写在MixinTool类里,该元素预期拿取的点击事件处理函数。

 

MixinTool类的代码如下:

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. var MixinTool = function (tool) {  
  2.     this.mixin = function () {  
  3.         var self = this;  
  4.         if ("ID" in tool.obj & tool.obj.ID in this) {  
  5.             //console.log(self[tool.obj.ID])  
  6.             return self[tool.obj.ID];  
  7.         } else {  
  8.             return self.default;  
  9.         }  
  10.     };  
  11.   
  12.     this.default = function () {  
  13.         console.log("No thing will happen");  
  14.     }  
  15.   
  16.     this.No0 = function () {  
  17.         console.log("No 0 you click it");  
  18.     };  
  19.   
  20.     this.No1 = function () {  
  21.         console.log("No 1 you click it");  
  22.     };  
  23.   
  24.     this.No2 = function () {  
  25.         console.log("No 2 you click it");  
  26.     };  
  27.   
  28.     this.No3 = function () {  
  29.         console.log("No 3 you click it");  
  30.     };  
  31.   
  32.     this.No4 = function () {  
  33.         console.log("No 4 you click it");  
  34.     };  
  35.   
  36.     this.No5 = function () {  
  37.         console.log("No 5 you click it");  
  38.     };  
  39. }  

他有一些方法,假如某个Tool实例没有对应的方法,他会执行default这个函数作为点击的响应事件;否则执行对应的。

mixin函数需要显示调用,作为Tool类创建dom结点时的参数使用。

具体如何使用参照上面的例子。

 

由于我们已经抽象出来多个类了,因此不如将之前页面切换的逻辑也抽象成一个类,具体代码如下:

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. //注意,这些其实都是全局变量  
  2. var Tab = function () {  
  3.     //以下代码大量考虑到扩展性,例如,可以新增一个tab和content页面  
  4.     this.tabClick = function () {  
  5.         $(".tool").click(function () {  
  6.             //这里是上面的图标的逻辑变换  
  7.             if (!($(this.children[0]).hasClass("select"))) {  
  8.                 $(".select").removeClass("select");  
  9.                 $(this.children[0]).addClass("select");  
  10.   
  11.                 //这里是hover的横线的位置变化  
  12.                 var node = $(".tool .hover");  
  13.                 node.remove();  
  14.                 //当动画需要停止的时候,让他停止  
  15.                 if ('stop' in node) {  
  16.                     node.stop();  
  17.                 }  
  18.                 node.css("left""0px");  
  19.                 $(this).append(node);  
  20.   
  21.                 //以下应该是切换页面的逻辑  
  22.                 //获取切换到哪一个页面,  
  23.                 var index = null;  
  24.                 for (var i = 0; i < this.parentNode.children.length; i++) {  
  25.                     if (this == this.parentNode.children[i]) {  
  26.                         index = i;  
  27.                     }  
  28.                 }  
  29.                 $(".contentbox > div").addClass("displayNONE");  
  30.                 $(".contentbox > div:nth-child(" + (index + 1) + ")").removeClass("displayNONE");  
  31.   
  32.             }  
  33.         })  
  34.     };  
  35.   
  36.     this.tabMouseEnter = function () {  
  37.         $(".tool").mouseenter(function (evt) {  
  38.             //只有当鼠标移动到非当前选中的tab上时,才会移动  
  39.             if (!($(this.children[0]).hasClass("select"))) {  
  40.   
  41.                 var self = this;  
  42.                 var node = $(".tool .hover");  
  43.                 var start = null;  
  44.                 var end = null;  
  45.   
  46.                 var tools = $(".toolTab")[0].children  
  47.                 for (var i = 0; i < tools.length; i++) {  
  48.                     if (self == tools[i]) {  
  49.                         end = i;  
  50.                     } else if ($(".select")[0].parentNode == tools[i]) {  
  51.                         start = i;  
  52.                     }  
  53.                 }  
  54.   
  55.                 //停止之前的动画  
  56.                 if ('stop' in node) {  
  57.                     node.stop();  
  58.                 }  
  59.                 //现在开始动画效果  
  60.                 node.animate({"left": (end - start) * 160 + "px"})  
  61.             }  
  62.         })  
  63.     };  
  64.     this.tabMouseLeave = function () {  
  65.         $(".tool").mouseleave(function () {  
  66.             //只有当鼠标移动到非当前选中的tab上时,才会移动  
  67.             if (!($(this.children[0]).hasClass("select"))) {  
  68.                 var node = $(".tool .hover");  
  69.                 //停止之前的动画  
  70.                 if ('stop' in node) {  
  71.                     node.stop();  
  72.                 }  
  73.                 node.animate({"left""0px"})  
  74.             }  
  75.         })  
  76.     }  
  77. }  

 

而调用到目前为止的类和函数,十分简单,如代码:

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. $(document).ready(function () {  
  2.     //这里是点击切换显示页面  
  3.     var toolboxTab = new Tab();  
  4.     toolboxTab.tabClick();  
  5.     toolboxTab.tabMouseEnter();  
  6.     toolboxTab.tabMouseLeave();  
  7.   
  8.     var jsonLoad = new ToolsConfigJsonLoad();  
  9.     jsonLoad.load();  
  10. })  

 

目前进度:

①自动生成所有工具里的所有工具;

②给工具添加点击响应事件;

 

目前还欠缺的内容:

①将所有工具里的工具,添加进我的工具;

②我的工具页面的各种逻辑;

③视情况,让工具可以被添加、或不能被添加(添加按钮在已添加后禁止显示)。

目录
相关文章
|
5天前
|
缓存 移动开发 安全
Web安全-HTTP响应拆分(CRLF注入)漏洞
Web安全-HTTP响应拆分(CRLF注入)漏洞
24 1
|
6天前
|
JSON 前端开发 Java
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
文章介绍了Java后端如何使用Spring Boot框架响应不同格式的数据给前端,包括返回静态页面、数据、HTML代码片段、JSON对象、设置状态码和响应的Header。
46 1
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
|
21天前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
19 2
前端JS读取文件内容并展示到页面上
|
3天前
|
前端开发 数据安全/隐私保护
angular前端基本页面验证
angular前端基本页面验证
13 1
|
7天前
|
前端开发
搭建个人博客--1、前端页面
搭建个人博客--1、前端页面
10 1
|
17天前
|
缓存 移动开发 安全
Web安全-HTTP响应拆分(CRLF注入)漏洞
Web安全-HTTP响应拆分(CRLF注入)漏洞
59 8
|
1月前
|
安全 JavaScript 前端开发
Web安全-逻辑错误漏洞
Web安全-逻辑错误漏洞
15 1
|
2月前
|
开发框架 前端开发 Java
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01
【8月更文挑战第12天】SpringBootWeb极速入门-实现一个简单的web页面01
56 3
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01
|
19天前
|
前端开发 JavaScript
前端基础(一)_前端页面构成
本文介绍了前端页面的基本构成,包括HTML(负责页面的结构和语义)、CSS(负责页面的样式和表现)和JavaScript(负责页面的行为和动态效果)。文章通过示例代码展示了如何使用这三种技术来创建一个简单的网页,并解释了HTML文档的结构和语法。
25 0
|
2月前
|
前端开发
如何在前端项目中单独引入 ElementUI 图标以及使用
这篇文章介绍了如何在前端项目中单独引入Element UI的图标文件以及如何使用这些图标。
181 0
如何在前端项目中单独引入 ElementUI 图标以及使用