开发者社区> 零零水> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

前端的小玩意(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. })  

 

目前进度:

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

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

 

目前还欠缺的内容:

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

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

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
判断ABAP代码是否处于update模式下运行的工具类
判断ABAP代码是否处于update模式下运行的工具类
42 0
来认识一下venus-init——一个让你仅需一个命令开始Java开发的命令行工具
源代码地址: Github仓库地址 个人网站:个人网站地址 前言 不知道你是否有过这样的经历。不管你是什么岗位,前端也好,后端也罢,想去了解一下Java开发到底是什么样的,它是不是真的跟传说中的一样。
1152 0
SAP WM LP10 创建TO单据的时候,系统根据目的地100下的库存自动扣减TO里的数量?
SAP WM LP10 创建TO单据的时候,系统根据目的地Storage Type 100下的库存自动扣减TO里的数量   LP10将TR转成TO单据的时候,我们常常发现,生成的TO单据里的数量并不是等于TR里的数量,而是系统自动根据目的地storage type 100下的库存数量自动扣减之后的数量作为生成的TO的数量。
1321 0
创建响应式布局的优秀网格工具集锦《系列五》
  在这篇文章中,我们为您呈现了一组优秀的网格工具清单。如果网页设计和开人员采用了正确的工具集,并基于一个灵活的网格架构,以及能够把响应图像应用到到设计之中,那么创建一个具备响应式的网站并不一定是一项艰巨的任务。
961 0
创建响应式布局的优秀网格工具集锦《系列四》
  如果网页设计和开人员采用了正确的工具集,并基于一个灵活的网格架构,以及能够把响应图像应用到到设计之中,那么创建一个具备响应式的网站并不一定是一项艰巨的任务。在这篇文章中,我们为您呈现了一组优秀的网格工具清单。
1024 0
At.js – 用于 Web 应用程序的自动完成库
  At.js 是一个自动完成库,用来实现自动完成提示,表情等,就像你在 Github 或 Twitter 上看到的一样。它支持 HTML5 contentEditable 元素。你可以听任何字符,而不仅仅是 '@' 符号,可为不同的字符设置多个监听器以实现不同的行为和数据。
550 0
+关注
零零水
主攻JS
234
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载