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

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

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

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

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

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

DEMO網(wǎng)址：

http://jianwangsan.cn/toolbox

（四）制作JSON，自動(dòng)將圖標(biāo)填充進(jìn)所有工具

首先是JSON，因?yàn)楣ぞ吆芏?#xff0c;所以JSON內(nèi)容很長(zhǎng)。

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

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

BigImg里面，他用于存放最上面的三個(gè)大圖標(biāo)；

CommonImg里面，存放其他工具圖標(biāo)。

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

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

?

前兩個(gè)屬性看值就知道了；

bingImg和commonImg屬性中的ImgPosition中的兩個(gè)屬性，主要是描述這個(gè)圖標(biāo)在圖片中的位置；

?

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

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

只不過(guò)少了一個(gè)bigImg屬性（因?yàn)樗恍枰?#xff09;；

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

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

[{"BigImg": [{"title": "微信清理","description": "定期清理微信，節(jié)省手機(jī)空間","bigImg": {"ImgPosition": {"x": "0px","y": "0px"}},"commonImg": {"ImgPosition": {"x": "-100px","y": "0px"}}},{"title": "雷電OS","description": "雷電OS Editor 舊機(jī)變新機(jī)","bigImg": {"ImgPosition": {"x": "-350px","y": "0px"}},"commonImg": {"ImgPosition": {"x": "-600px","y": "-500px"}}},{"title": "手機(jī)相冊(cè)擴(kuò)容","description": "無(wú)損處理圖片，騰出50%空間","bigImg": {"ImgPosition": {"x": "-700px","y": "0px"}},"commonImg": {"ImgPosition": {"x": "-700px","y": "-500px"}}}],"CommonImg": [{"title": "手游模擬器","description": "電腦玩手游，掛機(jī)輔助神器","type": "title","commonImg": {"ImgPosition": {"x": "-100px","y": "-100px"}}},{"title": "360連回家","description": "隨時(shí)隨地，清理家中電腦","type": "title","commonImg": {"ImgPosition": {"x": "-200px","y": "-100px"}}},{"title": "驅(qū)動(dòng)大師","description": "驅(qū)動(dòng)安裝一鍵解決","type": "title","commonImg": {"ImgPosition": {"x": "-300px","y": "-100px"}}},{"title": "安全桌面","description": "一鍵整理您的桌面","type": "safe","commonImg": {"ImgPosition": {"x": "-400px","y": "-100px"}}},{"title": "隱私保鏢","description": "五層隱私防護(hù)，清理隱私痕跡","type": "safe","commonImg": {"ImgPosition": {"x": "-500px","y": "-100px"}}},{"title": "防黑加固","description": "修補(bǔ)可能會(huì)被黑客利用的","type": "safe","commonImg": {"ImgPosition": {"x": "-600px","y": "-100px"}}},{"title": "軟件管家","description": "安全下載，輕松管理您的軟件","type": "safe","commonImg": {"ImgPosition": {"x": "-400px","y": "0px"}}},{"title": "人工服務(wù)","description": "7*24小時(shí)為您解決電腦問(wèn)題","type": "safe","commonImg": {"ImgPosition": {"x": "-500px","y": "0px"}}},{"title": "手機(jī)助手","description": "免費(fèi)手機(jī)應(yīng)用，資源下載平臺(tái)","type": "safe","commonImg": {"ImgPosition": {"x": "-700px","y": "-100px"}}},{"title": "彈窗攔截","description": "攔彈窗，去廣告，就是給力","type": "safe","commonImg": {"ImgPosition": {"x": "-800px","y": "-100px"}}},{"title": "隔離沙箱","description": "隔離系統(tǒng)真實(shí)環(huán)境運(yùn)行軟件","type": "safe","commonImg": {"ImgPosition": {"x": "-900px","y": "-100px"}}},{"title": "軟件小助手","description": "快速啟動(dòng)您常用軟件","type": "safe","commonImg": {"ImgPosition": {"x": "0px","y": "-200px"}}},{"title": "主頁(yè)防護(hù)","description": "防止惡意程序篡改瀏覽器主頁(yè)","type": "safe","commonImg": {"ImgPosition": {"x": "-100px","y": "-200px"}}},{"title": "主頁(yè)修復(fù)","description": "一鍵解決瀏覽器主頁(yè)相關(guān)問(wèn)題","type": "safe","commonImg": {"ImgPosition": {"x": "-200px","y": "-200px"}}},{"title": "文件解密","description": "免費(fèi)還原被木馬加密的文件","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": "免費(fèi)WiFi","description": "電腦變熱點(diǎn)，免費(fèi)無(wú)線上網(wǎng)","type": "network","commonImg": {"ImgPosition": {"x": "-700px","y": "0px"}}},{"title": "寬帶測(cè)速器","description": "獲取網(wǎng)絡(luò)帶寬和上網(wǎng)速度數(shù)值","type": "network","commonImg": {"ImgPosition": {"x": "-800px","y": "0px"}}},{"title": "WiFi體檢","description": "檢測(cè)并修復(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": "看看哪個(gè)室友在占網(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)無(wú)憂","type": "system","commonImg": {"ImgPosition": {"x": "0px","y": "-300px"}}},{"title": "任務(wù)管理器","description": "找出當(dāng)前占用資源的程序","type": "system","commonImg": {"ImgPosition": {"x": "-300px","y": "0px"}}},{"title": "魯大師","description": "辨別硬件真?zhèn)?#xff0c;實(shí)時(shí)監(jiān)測(cè)溫度","type": "system","commonImg": {"ImgPosition": {"x": "-100px","y": "-300px"}}},{"title": "默認(rèn)軟件","description": "幫您設(shè)置常用的默認(rèn)軟件","type": "system","commonImg": {"ImgPosition": {"x": "-200px","y": "-300px"}}},{"title": "查找大文件","description": "找出占用磁盤空間的大文件","type": "system","commonImg": {"ImgPosition": {"x": "-300px","y": "-300px"}}},{"title": "注冊(cè)表瘦身","description": "清理無(wú)效、錯(cuò)誤的注冊(cè)表鍵值","type": "system","commonImg": {"ImgPosition": {"x": "-400px","y": "-300px"}}},{"title": "系統(tǒng)盤瘦身","description": "通過(guò)瘦身解決系統(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ù)，保護(hù)隱私","type": "system","commonImg": {"ImgPosition": {"x": "-700px","y": "-300px"}}},{"title": "一鍵裝機(jī)","description": "裝機(jī)必備軟件一鍵搞定","type": "system","commonImg": {"ImgPosition": {"x": "-800px","y": "-300px"}}},{"title": "右鍵管理","description": "管理鼠標(biāo)的右鍵菜單","type": "system","commonImg": {"ImgPosition": {"x": "-900px","y": "-300px"}}},{"title": "系統(tǒng)重裝","description": "無(wú)需光盤，恢復(fù)系統(tǒng)初始狀態(tài)","type": "system","commonImg": {"ImgPosition": {"x": "0px","y": "-400px"}}},{"title": "網(wǎng)游加速器","description": "解決游戲卡機(jī)掉線，永久免費(fèi)","type": "game","commonImg": {"ImgPosition": {"x": "-100px","y": "-400px"}}},{"title": "游戲大廳","description": "小號(hào)多開不串號(hào)，鍵鼠回放爽","type": "game","commonImg": {"ImgPosition": {"x": "-200px","y": "-400px"}}},{"title": "游戲保險(xiǎn)箱","description": "保護(hù)游戲網(wǎng)銀賬號(hào)安全","type": "game","commonImg": {"ImgPosition": {"x": "-300px","y": "-400px"}}},{"title": "游戲優(yōu)化器","description": "一鍵解決玩游戲卡、慢問(wèn)題","type": "game","commonImg": {"ImgPosition": {"x": "-400px","y": "-400px"}}},{"title": "360理財(cái)","description": "360互聯(lián)網(wǎng)金融服務(wù)平臺(tái)","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": "安全免費(fèi)，超大空間的云盤","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問(wèn)答","description": "提出你的問(wèn)題，分分鐘有答案","type": "smalltools","commonImg": {"ImgPosition": {"x": "-900px","y": "-400px"}}},{"title": "蘋果設(shè)備清理","description": "清理App垃圾，節(jié)省手機(jī)空間","type": "smalltools","commonImg": {"ImgPosition": {"x": "0px","y": "-500px"}}},{"title": "360壓縮","description": "新一代的壓縮軟件，永久免費(fèi)","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)站攔截，下載保護(hù)","type": "smalltools","commonImg": {"ImgPosition": {"x": "-300px","y": "-500px"}}},{"title": "文件粉碎機(jī)","description": "徹底粉碎無(wú)法刪除的文件","type": "smalltools","commonImg": {"ImgPosition": {"x": "-400px","y": "-500px"}}},{"title": "U盤鑒定器","description": "鑒定U盤真實(shí)容量","type": "smalltools","commonImg": {"ImgPosition": {"x": "-500px","y": "-500px"}}}]} ]

?

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

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

div.toolbox-all//這個(gè)是最上面的大圖標(biāo)那一行div.firstRow//以下是單個(gè)按鈕//橫線那一行，如果是多行app，應(yīng)考慮使用另外一個(gè)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 實(shí)用小工具div.commonRow.smalltools

?

這樣通過(guò)type來(lái)定位該圖標(biāo)被添加的dom位置即可。

?

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

?

再順便訂正三個(gè)樣式需要被調(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; }

?

下來(lái)呢，我們需要讀取JSON，然后將其添加入頁(yè)面之中；

?

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

//單個(gè)工具 var Tool = function (obj) {this.obj = obj;// 0表示未加載到我的工具，1表示加載到我的工具，2表示加載到我的工具的右下小窗處// 為了方便測(cè)試，這里先默認(rèn)設(shè)置為1this.state = 1;//用于在全部工具頁(yè)面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;}; }

?

他有三個(gè)方法，兩個(gè)屬性；

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

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

?

?

三個(gè)方法的作用依次為：

①返回一個(gè)用于所有工具最頂端的大圖標(biāo)的dom；

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

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

④他們都有一個(gè)點(diǎn)擊事件，會(huì)判斷當(dāng)前狀態(tài)來(lái)進(jìn)行。為了方便測(cè)試，我這里并沒有針對(duì)性的設(shè)置。在之后會(huì)進(jìn)行修改。

?

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

?

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

?

等等我們?cè)傺a(bǔ)全這個(gè)Tool類。

?

?

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

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

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

?

下面是處理這個(gè)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)容添加到全部工具頁(yè)面中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();};// 這個(gè)目的是當(dāng)某一行只有兩個(gè)圖標(biāo)時(shí)，創(chuàng)造一個(gè)占位的圖標(biāo)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>'));}})};// 這個(gè)目的是為了給全部工具中的多行工具之間添加分割線this.addDottedLineInToolbox_All = function () {$(".commonRow .normalTool:nth-child(3n+4)").before('<div class="dotted"></div>');} }

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

①他會(huì)發(fā)起一個(gè)ajax請(qǐng)求，來(lái)讀取這個(gè)json；

②ajax請(qǐng)求可以使用用戶自己給的url（如果有的話），或者默認(rèn)url；

③在請(qǐng)求成功后，會(huì)對(duì)數(shù)據(jù)進(jìn)行處理，簡(jiǎn)單來(lái)說(shuō)，分別遍歷BigImg這個(gè)屬性的每個(gè)元素以及CommonImg這個(gè)屬性的每個(gè)元素；

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

?

?

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

①生成Tool實(shí)例的時(shí)候，手動(dòng)給起賦予一個(gè)處理函數(shù)（缺點(diǎn)：生成代碼虎非常長(zhǎng)，而且堆積在一起會(huì)很亂）；

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

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

?

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

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

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

這里的ID的值，就是利用該元素生成Tool實(shí)例時(shí)，我們寫在MixinTool類里，該元素預(yù)期拿取的點(diǎn)擊事件處理函數(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");}; }

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

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

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

?

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

//注意，這些其實(shí)都是全局變量 var Tab = function () {//以下代碼大量考慮到擴(kuò)展性，例如，可以新增一個(gè)tab和content頁(yè)面this.tabClick = function () {$(".tool").click(function () {//這里是上面的圖標(biāo)的邏輯變換if (!($(this.children[0]).hasClass("select"))) {$(".select").removeClass("select");$(this.children[0]).addClass("select");//這里是hover的橫線的位置變化var node = $(".tool .hover");node.remove();//當(dāng)動(dòng)畫需要停止的時(shí)候，讓他停止if ('stop' in node) {node.stop();}node.css("left", "0px");$(this).append(node);//以下應(yīng)該是切換頁(yè)面的邏輯//獲取切換到哪一個(gè)頁(yè)面，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) {//只有當(dāng)鼠標(biāo)移動(dòng)到非當(dāng)前選中的tab上時(shí)，才會(huì)移動(dòng)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;}}//停止之前的動(dòng)畫if ('stop' in node) {node.stop();}//現(xiàn)在開始動(dòng)畫效果node.animate({"left": (end - start) * 160 + "px"})}})};this.tabMouseLeave = function () {$(".tool").mouseleave(function () {//只有當(dāng)鼠標(biāo)移動(dòng)到非當(dāng)前選中的tab上時(shí)，才會(huì)移動(dòng)if (!($(this.children[0]).hasClass("select"))) {var node = $(".tool .hover");//停止之前的動(dòng)畫if ('stop' in node) {node.stop();}node.animate({"left": "0px"})}})} }

?

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

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

?

目前進(jìn)度：

①自動(dòng)生成所有工具里的所有工具；

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

?

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

①將所有工具里的工具，添加進(jìn)我的工具；

②我的工具頁(yè)面的各種邏輯；

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

總結(jié)

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

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