前端的小玩意(9.4)——做一个仿360工具箱的web页面(自动生成所有图标,对图标添加响应逻辑)
前端的小玩意(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)題。
- 上一篇: WPF/E CTP Quick Star
- 下一篇: 安装ie浏览器的js脚本调试工具