前端的小玩意（9.1）——做一個仿360工具箱的web頁面（Tab按鈕切換）

http://blog.csdn.net/qq20004604/article/details/52216203

前端的小玩意（9.2）——做一個仿360工具箱的web頁面（全部工具里面的模板）

http://blog.csdn.net/qq20004604/article/details/52226223

前端的小玩意（9.3）——做一個仿360工具箱的web頁面（我的工具里的模板和樣式）

http://blog.csdn.net/qq20004604/article/details/52235854

DEMO網(wǎng)址：

http://jianwangsan.cn/toolbox

（四）制作JSON，自動將圖標填充進所有工具

首先是JSON，因為工具很多，所以JSON內(nèi)容很長。

具體而言，JSON是一個數(shù)組中的對象（只有這一個對象），他有兩個屬性：BigImg和CommonImg。

這兩個屬性都是數(shù)組類型；

BigImg里面，他用于存放最上面的三個大圖標；

CommonImg里面，存放其他工具圖標。

BigImg單個數(shù)組元素的結(jié)構(gòu)如下：

<span style="font-family:SimSun;">{"title": "微信清理","description": "定期清理微信，節(jié)省手機空間","bigImg": {"ImgPosition": {"x": "0px","y": "0px"}},"commonImg": {"ImgPosition": {"x": "-100px","y": "0px"}} },</span>

?

前兩個屬性看值就知道了；

bingImg和commonImg屬性中的ImgPosition中的兩個屬性，主要是描述這個圖標在圖片中的位置；

?

CommonImg結(jié)構(gòu)類似：

{"title": "手游模擬器","description": "電腦玩手游，掛機輔助神器","type": "title","commonImg": {"ImgPosition": {"x": "-100px","y": "-100px"}} },

只不過少了一個bigImg屬性（因為他不需要）；

但多了一個type屬性，用于描述其將放置于哪個分類下面。

下面上JSON的全部內(nèi)容：（共計661行）

[{"BigImg": [{"title": "微信清理","description": "定期清理微信，節(jié)省手機空間","bigImg": {"ImgPosition": {"x": "0px","y": "0px"}},"commonImg": {"ImgPosition": {"x": "-100px","y": "0px"}}},{"title": "雷電OS","description": "雷電OS Editor 舊機變新機","bigImg": {"ImgPosition": {"x": "-350px","y": "0px"}},"commonImg": {"ImgPosition": {"x": "-600px","y": "-500px"}}},{"title": "手機相冊擴容","description": "無損處理圖片，騰出50%空間","bigImg": {"ImgPosition": {"x": "-700px","y": "0px"}},"commonImg": {"ImgPosition": {"x": "-700px","y": "-500px"}}}],"CommonImg": [{"title": "手游模擬器","description": "電腦玩手游，掛機輔助神器","type": "title","commonImg": {"ImgPosition": {"x": "-100px","y": "-100px"}}},{"title": "360連回家","description": "隨時隨地，清理家中電腦","type": "title","commonImg": {"ImgPosition": {"x": "-200px","y": "-100px"}}},{"title": "驅(qū)動大師","description": "驅(qū)動安裝一鍵解決","type": "title","commonImg": {"ImgPosition": {"x": "-300px","y": "-100px"}}},{"title": "安全桌面","description": "一鍵整理您的桌面","type": "safe","commonImg": {"ImgPosition": {"x": "-400px","y": "-100px"}}},{"title": "隱私保鏢","description": "五層隱私防護，清理隱私痕跡","type": "safe","commonImg": {"ImgPosition": {"x": "-500px","y": "-100px"}}},{"title": "防黑加固","description": "修補可能會被黑客利用的","type": "safe","commonImg": {"ImgPosition": {"x": "-600px","y": "-100px"}}},{"title": "軟件管家","description": "安全下載，輕松管理您的軟件","type": "safe","commonImg": {"ImgPosition": {"x": "-400px","y": "0px"}}},{"title": "人工服務(wù)","description": "7*24小時為您解決電腦問題","type": "safe","commonImg": {"ImgPosition": {"x": "-500px","y": "0px"}}},{"title": "手機助手","description": "免費手機應(yīng)用，資源下載平臺","type": "safe","commonImg": {"ImgPosition": {"x": "-700px","y": "-100px"}}},{"title": "彈窗攔截","description": "攔彈窗，去廣告，就是給力","type": "safe","commonImg": {"ImgPosition": {"x": "-800px","y": "-100px"}}},{"title": "隔離沙箱","description": "隔離系統(tǒng)真實環(huán)境運行軟件","type": "safe","commonImg": {"ImgPosition": {"x": "-900px","y": "-100px"}}},{"title": "軟件小助手","description": "快速啟動您常用軟件","type": "safe","commonImg": {"ImgPosition": {"x": "0px","y": "-200px"}}},{"title": "主頁防護","description": "防止惡意程序篡改瀏覽器主頁","type": "safe","commonImg": {"ImgPosition": {"x": "-100px","y": "-200px"}}},{"title": "主頁修復(fù)","description": "一鍵解決瀏覽器主頁相關(guān)問題","type": "safe","commonImg": {"ImgPosition": {"x": "-200px","y": "-200px"}}},{"title": "文件解密","description": "免費還原被木馬加密的文件","type": "safe","commonImg": {"ImgPosition": {"x": "-300px","y": "-200px"}}},{"title": "網(wǎng)絡(luò)優(yōu)化","description": "全新家庭網(wǎng)絡(luò)管理，秒踢蹭網(wǎng)","type": "network","commonImg": {"ImgPosition": {"x": "-400px","y": "-200px"}}},{"title": "斷網(wǎng)急救箱","description": "上不了網(wǎng)？就用斷網(wǎng)急救箱","type": "network","commonImg": {"ImgPosition": {"x": "-600px","y": "0px"}}},{"title": "免費WiFi","description": "電腦變熱點，免費無線上網(wǎng)","type": "network","commonImg": {"ImgPosition": {"x": "-700px","y": "0px"}}},{"title": "寬帶測速器","description": "獲取網(wǎng)絡(luò)帶寬和上網(wǎng)速度數(shù)值","type": "network","commonImg": {"ImgPosition": {"x": "-800px","y": "0px"}}},{"title": "WiFi體檢","description": "檢測并修復(fù)路由器安全隱患","type": "network","commonImg": {"ImgPosition": {"x": "-500px","y": "-200px"}}},{"title": "流量防火墻","description": "發(fā)現(xiàn)并阻止偷偷占流量的程序","type": "network","commonImg": {"ImgPosition": {"x": "0px","y": "-100px"}}},{"title": "LSP修復(fù)","description": "修復(fù)網(wǎng)絡(luò)異常和不能上網(wǎng)","type": "network","commonImg": {"ImgPosition": {"x": "-600px","y": "-200px"}}},{"title": "DNS優(yōu)選","description": "杜絕網(wǎng)絡(luò)差，啟用更優(yōu)DNS","type": "network","commonImg": {"ImgPosition": {"x": "-700px","y": "-200px"}}},{"title": "寢室必備","description": "看看哪個室友在占網(wǎng)速","type": "network","commonImg": {"ImgPosition": {"x": "-800px","y": "-200px"}}},{"title": "360壁紙","description": "海量高清壁紙，美化電腦桌面","type": "system","commonImg": {"ImgPosition": {"x": "-900px","y": "-200px"}}},{"title": "急救盤","description": "一盤在手，系統(tǒng)無憂","type": "system","commonImg": {"ImgPosition": {"x": "0px","y": "-300px"}}},{"title": "任務(wù)管理器","description": "找出當前占用資源的程序","type": "system","commonImg": {"ImgPosition": {"x": "-300px","y": "0px"}}},{"title": "魯大師","description": "辨別硬件真?zhèn)?#xff0c;實時監(jiān)測溫度","type": "system","commonImg": {"ImgPosition": {"x": "-100px","y": "-300px"}}},{"title": "默認軟件","description": "幫您設(shè)置常用的默認軟件","type": "system","commonImg": {"ImgPosition": {"x": "-200px","y": "-300px"}}},{"title": "查找大文件","description": "找出占用磁盤空間的大文件","type": "system","commonImg": {"ImgPosition": {"x": "-300px","y": "-300px"}}},{"title": "注冊表瘦身","description": "清理無效、錯誤的注冊表鍵值","type": "system","commonImg": {"ImgPosition": {"x": "-400px","y": "-300px"}}},{"title": "系統(tǒng)盤瘦身","description": "通過瘦身解決系統(tǒng)盤空間不足","type": "system","commonImg": {"ImgPosition": {"x": "-500px","y": "-300px"}}},{"title": "文件恢復(fù)","description": "快速幫您恢復(fù)被誤刪的文件","type": "system","commonImg": {"ImgPosition": {"x": "-600px","y": "-300px"}}},{"title": "系統(tǒng)急救箱","description": "查殺頑固木馬，修復(fù)系統(tǒng)異常","type": "system","commonImg": {"ImgPosition": {"x": "-600px","y": "0px"}}},{"title": "磁盤擦除","description": "徹底清除磁盤數(shù)據(jù)，保護隱私","type": "system","commonImg": {"ImgPosition": {"x": "-700px","y": "-300px"}}},{"title": "一鍵裝機","description": "裝機必備軟件一鍵搞定","type": "system","commonImg": {"ImgPosition": {"x": "-800px","y": "-300px"}}},{"title": "右鍵管理","description": "管理鼠標的右鍵菜單","type": "system","commonImg": {"ImgPosition": {"x": "-900px","y": "-300px"}}},{"title": "系統(tǒng)重裝","description": "無需光盤，恢復(fù)系統(tǒng)初始狀態(tài)","type": "system","commonImg": {"ImgPosition": {"x": "0px","y": "-400px"}}},{"title": "網(wǎng)游加速器","description": "解決游戲卡機掉線，永久免費","type": "game","commonImg": {"ImgPosition": {"x": "-100px","y": "-400px"}}},{"title": "游戲大廳","description": "小號多開不串號，鍵鼠回放爽","type": "game","commonImg": {"ImgPosition": {"x": "-200px","y": "-400px"}}},{"title": "游戲保險箱","description": "保護游戲網(wǎng)銀賬號安全","type": "game","commonImg": {"ImgPosition": {"x": "-300px","y": "-400px"}}},{"title": "游戲優(yōu)化器","description": "一鍵解決玩游戲卡、慢問題","type": "game","commonImg": {"ImgPosition": {"x": "-400px","y": "-400px"}}},{"title": "360理財","description": "360互聯(lián)網(wǎng)金融服務(wù)平臺","type": "smalltools","commonImg": {"ImgPosition": {"x": "-500px","y": "-400px"}}},{"title": "360看圖","description": "防范圖片木馬，安全查看照片","type": "smalltools","commonImg": {"ImgPosition": {"x": "-600px","y": "-400px"}}},{"title": "魔法攝像頭","description": "讓視頻聊天既安全又有趣","type": "smalltools","commonImg": {"ImgPosition": {"x": "-700px","y": "-400px"}}},{"title": "360云盤","description": "安全免費，超大空間的云盤","type": "smalltools","commonImg": {"ImgPosition": {"x": "-200px","y": "0px"}}},{"title": "C盤搬家","description": "轉(zhuǎn)移系統(tǒng)盤重要資料和文件","type": "smalltools","commonImg": {"ImgPosition": {"x": "-800px","y": "-400px"}}},{"title": "360問答","description": "提出你的問題，分分鐘有答案","type": "smalltools","commonImg": {"ImgPosition": {"x": "-900px","y": "-400px"}}},{"title": "蘋果設(shè)備清理","description": "清理App垃圾，節(jié)省手機空間","type": "smalltools","commonImg": {"ImgPosition": {"x": "0px","y": "-500px"}}},{"title": "360壓縮","description": "新一代的壓縮軟件，永久免費","type": "smalltools","commonImg": {"ImgPosition": {"x": "-100px","y": "-500px"}}},{"title": "健康精靈","description": "可愛精靈，助您健康使用電腦","type": "smalltools","commonImg": {"ImgPosition": {"x": "-200px","y": "-500px"}}},{"title": "小清新日歷","description": "查詢天氣、農(nóng)歷和節(jié)假日","type": "smalltools","commonImg": {"ImgPosition": {"x": "0px","y": "0px"}}},{"title": "安全瀏覽器","description": "惡意網(wǎng)站攔截，下載保護","type": "smalltools","commonImg": {"ImgPosition": {"x": "-300px","y": "-500px"}}},{"title": "文件粉碎機","description": "徹底粉碎無法刪除的文件","type": "smalltools","commonImg": {"ImgPosition": {"x": "-400px","y": "-500px"}}},{"title": "U盤鑒定器","description": "鑒定U盤真實容量","type": "smalltools","commonImg": {"ImgPosition": {"x": "-500px","y": "-500px"}}}]} ]

?

為了適應(yīng)type，接下來我們需要改造html模板：

將div.toolbox-all的dom結(jié)構(gòu)改裝成如下：

div.toolbox-all//這個是最上面的大圖標那一行div.firstRow//以下是單個按鈕//橫線那一行，如果是多行app，應(yīng)考慮使用另外一個div.dotteddiv.commonRow.titlediv.titleRowspan.titleRow-leftspan.titleRow-text 電腦安全div.commonRow.safediv.titleRowspan.titleRow-leftspan.titleRow-text 網(wǎng)絡(luò)優(yōu)化div.commonRow.networkdiv.titleRowspan.titleRow-leftspan.titleRow-text 系統(tǒng)工具div.commonRow.systemdiv.titleRowspan.titleRow-leftspan.titleRow-text 游戲優(yōu)化div.commonRow.gamediv.titleRowspan.titleRow-leftspan.titleRow-text 實用小工具div.commonRow.smalltools

?

這樣通過type來定位該圖標被添加的dom位置即可。

?

順便，以上訂正了一個之前把commonRow打成commanRow的問題。記得修改樣式表（尷尬）

?

再順便訂正三個樣式需要被調(diào)整的地方：

.back .contentbox .commonRow .normalTool .text .title {line-height: 25px;font-size: 16px; }.back .contentbox .commonRow .normalTool .text .description {line-height: 30px;font-size: 12px;color: #aaa; }.back .contentbox .commonRow .normalTool .addButton {display: none;position: absolute;top: 7px;right: 15px;width: 60px;height: 22px;background-image: linear-gradient(rgb(98, 227, 25) 0%, rgb(68, 208, 27) 100%);font-size: 12px;color: white;text-align: center;line-height: 20px;border: 1px solid rgb(65, 199, 36);-webkit-border-radius: 1px;-moz-border-radius: 1px;border-radius: 1px; }

?

下來呢，我們需要讀取JSON，然后將其添加入頁面之中；

?

首先，創(chuàng)建一個Tool類，他表示一個圖標；

//單個工具 var Tool = function (obj) {this.obj = obj;// 0表示未加載到我的工具，1表示加載到我的工具，2表示加載到我的工具的右下小窗處// 為了方便測試，這里先默認設(shè)置為1this.state = 1;//用于在全部工具頁面this.createBigImgDom = function (callback) {var self = this;var obj = this.objvar str = '<div class="BigTool">' +'<span class="img" style="background-position: ' + obj.bigImg.ImgPosition.x + ' ' + obj.bigImg.ImgPosition.y + '"></span>' +'<span class="mask"></span>' +'<div class="text">' +'<div class="title">' + obj.title + '</div>' +'<div class="description">' + obj.description + '</div>' +'</div>' +'<div class="addButton">添加</div>' +'</div>';var node = $(str);node.click(function () {if (self.state) {callback();}})return node;};this.createNormalTool = function (callback) {var self = this;var obj = this.objvar str = '<div class="normalTool">' +'<div class="img" style="background-position: ' + obj.commonImg.ImgPosition.x + ' ' + obj.commonImg.ImgPosition.y + '"></div>' +'<div class="text">' +'<div class="title">' + obj.title + '</div>' +'<div class="description">' + obj.description + '</div>' +'</div>' +'<div class="addButton">添加</div>' +'</div>';var node = $(str);node.click(function () {if (self.state) {callback();}})return node;};this.createSmallTool = function (callback) {var obj = this.objvar position_x = parseInt(obj.commonImg.ImgPosition.x) * 0.615 + "px";var position_y = parseInt(obj.commonImg.ImgPosition.y) * 0.615 + "px";var str = '<div class="tool-foot">' +'<div class="img" style="background-position: ' + position_x + ' ' + position_y + '"></div>' +'<div class="text"></div>' +'</div>';var node = $(str);node.click(function () {if (self.state) {callback();}})return node;}; }

?

他有三個方法，兩個屬性；

①obj屬性是在創(chuàng)建的時候賦值給他的，方便讀取創(chuàng)建實例時的初始值。這個初始值就是上面那個JSON中的一個元素（BigImg或CommonImg中的一個元素）；

②state屬性表示該按鈕狀態(tài)，具體看注釋

?

?

三個方法的作用依次為：

①返回一個用于所有工具最頂端的大圖標的dom；

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

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

④他們都有一個點擊事件，會判斷當前狀態(tài)來進行。為了方便測試，我這里并沒有針對性的設(shè)置。在之后會進行修改。

?

我們還缺一些其他的方法，例如將移動用的函數(shù)，點擊后觸發(fā)事件的函數(shù)等等；

?

還缺一些屬性，例如，設(shè)置其目前是否可以移動，目前處于什么位置的東西等等；

?

等等我們再補全這個Tool類。

?

?

然后，我們需要創(chuàng)建一個加載JSON，處理數(shù)據(jù)的類。

在創(chuàng)建這個類之前，我們建立一個data文件夾，和img、javascripts、stylesheets文件夾平級；

將JSON命名為tools.json，并放于data文件夾中；

?

下面是處理這個JSON的JS代碼類：

var ToolsConfigJsonLoad = function (url) {this.url = url ? url : "data/tools.json";this.load = function () {var self = this;$.ajax({url: self.url,dataType: "json",type: "GET",success: function (data) {self.addToolsInToolbox_all(data);}})};//將內(nèi)容添加到全部工具頁面中this.addToolsInToolbox_all = function (data) {var type = [];data[0].BigImg.forEach(function (obj) {var tool = new Tool(obj);var mixin = new MixinTool(tool);var callback = mixin.mixin()$(".firstRow").append(tool.createBigImgDom(callback));})data[0].CommonImg.forEach(function (obj) {if (type.indexOf(obj.type) < 0) {type.push(obj.type);}var tool = new Tool(obj);var mixin = new MixinTool(tool);var callback = mixin.mixin()$(".commonRow." + obj.type).append(tool.createNormalTool(callback));})this.addPlaceHolderWhenOnlyTwoToolsInToolbox_All(type);this.addDottedLineInToolbox_All();};// 這個目的是當某一行只有兩個圖標時，創(chuàng)造一個占位的圖標this.addPlaceHolderWhenOnlyTwoToolsInToolbox_All = function (type) {type.forEach(function (obj) {var length = $(".commonRow." + obj + " > *").length;if (length % 3 == 2) {$(".commonRow." + obj).append($('<div class="normalToolHolder"></div>'));}})};// 這個目的是為了給全部工具中的多行工具之間添加分割線this.addDottedLineInToolbox_All = function () {$(".commonRow .normalTool:nth-child(3n+4)").before('<div class="dotted"></div>');} }

這部分代碼最重要的是load函數(shù)；

①他會發(fā)起一個ajax請求，來讀取這個json；

②ajax請求可以使用用戶自己給的url（如果有的話），或者默認url；

③在請求成功后，會對數(shù)據(jù)進行處理，簡單來說，分別遍歷BigImg這個屬性的每個元素以及CommonImg這個屬性的每個元素；

④利用這些元素的數(shù)據(jù)，生成一個Tool實例，然后又對她做了一些其他事情（具體之后再說），然后生成一個dom對象，插入到指定位置。

?

?

在生成工具的時候，顯然每個工具的用途是不同的，因此我們希望這個工具在點擊的時候，執(zhí)行不同的處理方法，具體做法有以下幾種。

①生成Tool實例的時候，手動給起賦予一個處理函數(shù)（缺點：生成代碼虎非常長，而且堆積在一起會很亂）；

②將處理函數(shù)放在Tool類里，然后生成dom的時候，點擊事件觸發(fā)Tool了的不同方法（缺點：Tool類會非常長，并且可以通過Tool類的實例來調(diào)用本來不希望他調(diào)用的方法）；

③將所有的處理方法集中在一個類之中，我們需要編輯的時候只需要編輯這個類即可，然后將對應(yīng)的方法，作為回調(diào)函數(shù)傳遞給這個dom的創(chuàng)建函數(shù)，在創(chuàng)建函數(shù)里，調(diào)用這個回調(diào)函數(shù)（我的選擇）。

?

我這里選擇的是第三種方法，因此需要生成一個MixinTool類，他具備將對應(yīng)的方法返回給對應(yīng)的Tool類實例的功能。

為了區(qū)別不同按鈕，我在JSON里每個元素里新加了一個屬性ID，具體修改后內(nèi)容如下；

{"title": "微信清理","ID":"No0","description": "定期清理微信，節(jié)省手機空間","bigImg": {"ImgPosition": {"x": "0px","y": "0px"}},"commonImg": {"ImgPosition": {"x": "-100px","y": "0px"}} },

這里的ID的值，就是利用該元素生成Tool實例時，我們寫在MixinTool類里，該元素預(yù)期拿取的點擊事件處理函數(shù)。

?

MixinTool類的代碼如下：

var MixinTool = function (tool) {this.mixin = function () {var self = this;if ("ID" in tool.obj & tool.obj.ID in this) {//console.log(self[tool.obj.ID])return self[tool.obj.ID];} else {return self.default;}};this.default = function () {console.log("No thing will happen");}this.No0 = function () {console.log("No 0 you click it");};this.No1 = function () {console.log("No 1 you click it");};this.No2 = function () {console.log("No 2 you click it");};this.No3 = function () {console.log("No 3 you click it");};this.No4 = function () {console.log("No 4 you click it");};this.No5 = function () {console.log("No 5 you click it");}; }

他有一些方法，假如某個Tool實例沒有對應(yīng)的方法，他會執(zhí)行default這個函數(shù)作為點擊的響應(yīng)事件；否則執(zhí)行對應(yīng)的。

mixin函數(shù)需要顯示調(diào)用，作為Tool類創(chuàng)建dom結(jié)點時的參數(shù)使用。

具體如何使用參照上面的例子。

?

由于我們已經(jīng)抽象出來多個類了，因此不如將之前頁面切換的邏輯也抽象成一個類，具體代碼如下：

//注意，這些其實都是全局變量 var Tab = function () {//以下代碼大量考慮到擴展性，例如，可以新增一個tab和content頁面this.tabClick = function () {$(".tool").click(function () {//這里是上面的圖標的邏輯變換if (!($(this.children[0]).hasClass("select"))) {$(".select").removeClass("select");$(this.children[0]).addClass("select");//這里是hover的橫線的位置變化var node = $(".tool .hover");node.remove();//當動畫需要停止的時候，讓他停止if ('stop' in node) {node.stop();}node.css("left", "0px");$(this).append(node);//以下應(yīng)該是切換頁面的邏輯//獲取切換到哪一個頁面，var index = null;for (var i = 0; i < this.parentNode.children.length; i++) {if (this == this.parentNode.children[i]) {index = i;}}$(".contentbox > div").addClass("displayNONE");$(".contentbox > div:nth-child(" + (index + 1) + ")").removeClass("displayNONE");}})};this.tabMouseEnter = function () {$(".tool").mouseenter(function (evt) {//只有當鼠標移動到非當前選中的tab上時，才會移動if (!($(this.children[0]).hasClass("select"))) {var self = this;var node = $(".tool .hover");var start = null;var end = null;var tools = $(".toolTab")[0].childrenfor (var i = 0; i < tools.length; i++) {if (self == tools[i]) {end = i;} else if ($(".select")[0].parentNode == tools[i]) {start = i;}}//停止之前的動畫if ('stop' in node) {node.stop();}//現(xiàn)在開始動畫效果node.animate({"left": (end - start) * 160 + "px"})}})};this.tabMouseLeave = function () {$(".tool").mouseleave(function () {//只有當鼠標移動到非當前選中的tab上時，才會移動if (!($(this.children[0]).hasClass("select"))) {var node = $(".tool .hover");//停止之前的動畫if ('stop' in node) {node.stop();}node.animate({"left": "0px"})}})} }

?

而調(diào)用到目前為止的類和函數(shù)，十分簡單，如代碼：

$(document).ready(function () {//這里是點擊切換顯示頁面var toolboxTab = new Tab();toolboxTab.tabClick();toolboxTab.tabMouseEnter();toolboxTab.tabMouseLeave();var jsonLoad = new ToolsConfigJsonLoad();jsonLoad.load(); })

?

目前進度：

①自動生成所有工具里的所有工具；

②給工具添加點擊響應(yīng)事件；

?

目前還欠缺的內(nèi)容：

①將所有工具里的工具，添加進我的工具；

②我的工具頁面的各種邏輯；

③視情況，讓工具可以被添加、或不能被添加（添加按鈕在已添加后禁止顯示）。

總結(jié)

以上是生活随笔為你收集整理的前端的小玩意（9.4）——做一个仿360工具箱的web页面（自动生成所有图标，对图标添加响应逻辑）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。