demo網址：
http://jianwangsan.cn/toolbox
（四）制作json，自動将圖示填充進所有工具
首先是json，因為工具很多，是以json内容很長。
具體而言，json是一個數組中的對象（隻有這一個對象），他有兩個屬性：bigimg和commonimg。
這兩個屬性都是數組類型；
bigimg裡面，他用于存放最上面的三個大圖示；
commonimg裡面，存放其他工具圖示。
bigimg單個數組元素的結構如下：
<span style="font-family:simsun;">{
"title": "微信清理",
"description": "定期清理微信，節省手機空間",
"bigimg": {
"imgposition": {
"x": "0px",
"y": "0px"
}
},
"commonimg": {
"x": "-100px",
}
},</span>
前兩個屬性看值就知道了；
bingimg和commonimg屬性中的imgposition中的兩個屬性，主要是描述這個圖示在圖檔中的位置；
commonimg結構類似：
{
"title": "手遊模拟器",
"description": "電腦玩手遊，挂機輔助神器",
"type": "title",
"y": "-100px"
},
隻不過少了一個bigimg屬性（因為他不需要）；
但多了一個type屬性，用于描述其将放置于哪個分類下面。
下面上json的全部内容：（共計661行）
[
{
"bigimg": [
{
"title": "微信清理",
"description": "定期清理微信，節省手機空間",
"bigimg": {
"imgposition": {
"x": "0px",
"y": "0px"
}
},
"commonimg": {
"x": "-100px",
}
},
"title": "雷電os",
"description": "雷電os editor 舊機變新機",
"x": "-350px",
"x": "-600px",
"y": "-500px"
"title": "手機相冊擴容",
"description": "無損處理圖檔，騰出50%空間",
"x": "-700px",
}
],
"commonimg": [
"title": "手遊模拟器",
"description": "電腦玩手遊，挂機輔助神器",
"type": "title",
"y": "-100px"
"title": "360連回家",
"description": "随時随地，清理家中電腦",
"x": "-200px",
"title": "驅動大師",
"description": "驅動安裝一鍵解決",
"x": "-300px",
"title": "安全桌面",
"description": "一鍵整理您的桌面",
"type": "safe",
"x": "-400px",
"title": "隐私保镖",
"description": "五層隐私防護，清理隐私痕迹",
"x": "-500px",
"title": "防黑加強",
"description": "修補可能會被黑客利用的",
"title": "軟體管家",
"description": "安全下載下傳，輕松管理您的軟體",
"title": "人工服務",
"description": "7*24小時為您解決電腦問題",
"title": "手機助手",
"description": "免費手機應用，資源下載下傳平台",
"title": "彈窗攔截",
"description": "攔彈窗，去廣告，就是給力",
"x": "-800px",
"title": "隔離沙箱",
"description": "隔離系統真實環境運作軟體",
"x": "-900px",
"title": "軟體小助手",
"description": "快速啟動您常用軟體",
"y": "-200px"
"title": "首頁防護",
"description": "防止惡意程式篡改浏覽器首頁",
"title": "首頁修複",
"description": "一鍵解決浏覽器首頁相關問題",
"title": "檔案解密",
"description": "免費還原被木馬加密的檔案",
"title": "網絡優化",
"description": "全新家庭網絡管理，秒踢蹭網",
"type": "network",
"title": "斷網急救箱",
"description": "上不了網？就用斷網急救箱",
"title": "免費wifi",
"description": "電腦變熱點，免費無線上網",
"title": "寬帶測速器",
"description": "擷取網絡帶寬和上網速度數值",
"title": "wifi體檢",
"description": "檢測并修複路由器安全隐患",
"title": "流量防火牆",
"description": "發現并阻止偷偷占流量的程式",
"title": "lsp修複",
"description": "修複網絡異常和不能上網",
"title": "dns優選",
"description": "杜絕網絡差，啟用更優dns",
"title": "寝室必備",
"description": "看看哪個室友在占網速",
"title": "360桌面",
"description": "海量高清桌面，美化電腦桌面",
"type": "system",
"title": "急救盤",
"description": "一盤在手，系統無憂",
"y": "-300px"
"title": "任務管理器",
"description": "找出目前占用資源的程式",
"title": "魯大師",
"description": "辨識硬體真僞，實時監測溫度",
"title": "預設軟體",
"description": "幫您設定常用的預設軟體",
"title": "查找大檔案",
"description": "找出占用磁盤空間的大檔案",
"title": "系統資料庫瘦身",
"description": "清理無效、錯誤的系統資料庫鍵值",
"title": "系統盤瘦身",
"description": "通過瘦身解決系統盤空間不足",
"title": "檔案恢複",
"description": "快速幫您恢複被誤删的檔案",
"title": "系統急救箱",
"description": "清除頑固木馬，修複系統異常",
"title": "磁盤擦除",
"description": "徹底清除磁盤資料，保護隐私",
"title": "一鍵裝機",
"description": "裝機必備軟體一鍵搞定",
"title": "右鍵管理",
"description": "管理滑鼠的右鍵菜單",
"title": "系統重裝",
"description": "無需CD光牒，恢複系統初始狀态",
"y": "-400px"
"title": "網遊加速器",
"description": "解決遊戲卡機掉線，永久免費",
"type": "game",
"title": "遊戲大廳",
"description": "小号多開不串号，鍵鼠回放爽",
"title": "遊戲保險箱",
"description": "保護遊戲網銀賬号安全",
"title": "遊戲優化器",
"description": "一鍵解決玩遊戲卡、慢問題",
"title": "360理财",
"description": "360網際網路金融服務平台",
"type": "smalltools",
"title": "360看圖",
"description": "防範圖檔木馬，安全檢視照片",
"title": "魔法攝像頭",
"description": "讓視訊聊天既安全又有趣",
"title": "360雲盤",
"description": "安全免費，超大空間的雲盤",
"title": "c盤搬家",
"description": "轉移系統盤重要資料和檔案",
"title": "360問答",
"description": "提出你的問題，分分鐘有答案",
"title": "蘋果裝置清理",
"description": "清理app垃圾，節省手機空間",
"title": "360壓縮",
"description": "新一代的壓縮軟體，永久免費",
"title": "健康精靈",
"description": "可愛精靈，助您健康使用電腦",
"title": "小清新月曆",
"description": "查詢天氣、農曆和節假日",
"title": "安全浏覽器",
"description": "惡意網站攔截，下載下傳保護",
"title": "檔案粉碎機",
"description": "徹底粉碎無法删除的檔案",
"title": "u盤鑒定器",
"description": "鑒定u盤真實容量",
]
]
為了适應type，接下來我們需要改造html模闆：
将div.toolbox-all的dom結構改裝成如下：
div.toolbox-all
//這個是最上面的大圖示那一行
div.firstrow
//以下是單個按鈕
//橫線那一行，如果是多行app，應考慮使用另外一個
div.dotted
div.commonrow.title
div.titlerow
span.titlerow-left
span.titlerow-text 電腦安全
div.commonrow.safe
span.titlerow-text 網絡優化
div.commonrow.network
span.titlerow-text 系統工具
div.commonrow.system
span.titlerow-text 遊戲優化
div.commonrow.game
span.titlerow-text 實用小工具
div.commonrow.smalltools
這樣通過type來定位該圖示被添加的dom位置即可。
順便，以上訂正了一個之前把commonrow打成commanrow的問題。記得修改樣式表（尴尬）
再順便訂正三個樣式需要被調整的地方：
.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%);
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，然後将其添加入頁面之中；
首先，建立一個tool類，他表示一個圖示；
//單個工具
var tool = function (obj) {
this.obj = obj;
// 0表示未加載到我的工具，1表示加載到我的工具，2表示加載到我的工具的右下小窗處
// 為了友善測試，這裡先預設設定為1
this.state = 1;
//用于在全部工具頁面
this.createbigimgdom = function (callback) {
var self = this;
var obj = this.obj
var 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 str = '<div class="normaltool">' +
'<div class="img" style="background-position: ' + obj.commonimg.imgposition.x + ' ' + obj.commonimg.imgposition.y + '"></div>' +
this.createsmalltool = function (callback) {
var 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>' +
他有三個方法，兩個屬性；
①obj屬性是在建立的時候指派給他的，友善讀取建立執行個體時的初始值。這個初始值就是上面那個json中的一個元素（bigimg或commonimg中的一個元素）；
②state屬性表示該按鈕狀态，具體看注釋
三個方法的作用依次為：
①傳回一個用于所有工具最頂端的大圖示的dom；
②傳回一個用于放置在所有工具、我的工具普通位置的dom；
③傳回一個用于放在我的工具右下角小位置的dom；
④他們都有一個點選事件，會判斷目前狀态來進行。為了友善測試，我這裡并沒有針對性的設定。在之後會進行修改。
我們還缺一些其他的方法，例如将移動用的函數，點選後觸發事件的函數等等；
還缺一些屬性，例如，設定其目前是否可以移動，目前處于什麼位置的東西等等；
等等我們再補全這個tool類。
然後，我們需要建立一個加載json，處理資料的類。
在建立這個類之前，我們建立一個data檔案夾，和img、javascripts、stylesheets檔案夾平級；
将json命名為tools.json，并放于data檔案夾中；
下面是處理這個json的js代碼類：
var toolsconfigjsonload = function (url) {
this.url = url ? url : "data/tools.json";
this.load = function () {
$.ajax({
url: self.url,
datatype: "json",
type: "get",
success: function (data) {
self.addtoolsintoolbox_all(data);
//将内容添加到全部工具頁面中
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);
$(".commonrow." + obj.type).append(tool.createnormaltool(callback));
this.addplaceholderwhenonlytwotoolsintoolbox_all(type);
this.adddottedlineintoolbox_all();
// 這個目的是當某一行隻有兩個圖示時，創造一個占位的圖示
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函數；
①他會發起一個ajax請求，來讀取這個json；
②ajax請求可以使用使用者自己給的url（如果有的話），或者預設url；
③在請求成功後，會對資料進行處理，簡單來說，分别周遊bigimg這個屬性的每個元素以及commonimg這個屬性的每個元素；
④利用這些元素的資料，生成一個tool執行個體，然後又對她做了一些其他事情（具體之後再說），然後生成一個dom對象，插入到指定位置。
在生成工具的時候，顯然每個工具的用途是不同的，是以我們希望這個工具在點選的時候，執行不同的處理方法，具體做法有以下幾種。
①生成tool執行個體的時候，手動給起賦予一個處理函數（缺點：生成代碼虎非常長，而且堆積在一起會很亂）；
②将處理函數放在tool類裡，然後生成dom的時候，點選事件觸發tool了的不同方法（缺點：tool類會非常長，并且可以通過tool類的執行個體來調用本來不希望他調用的方法）；
③将所有的處理方法集中在一個類之中，我們需要編輯的時候隻需要編輯這個類即可，然後将對應的方法，作為回調函數傳遞給這個dom的建立函數，在建立函數裡，調用這個回調函數（我的選擇）。
我這裡選擇的是第三種方法，是以需要生成一個mixintool類，他具備将對應的方法傳回給對應的tool類執行個體的功能。
為了差別不同按鈕，我在json裡每個元素裡新加了一個屬性id，具體修改後内容如下；
"id":"no0",
這裡的id的值，就是利用該元素生成tool執行個體時，我們寫在mixintool類裡，該元素預期拿取的點選事件處理函數。
mixintool類的代碼如下：
var mixintool = function (tool) {
this.mixin = function () {
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執行個體沒有對應的方法，他會執行default這個函數作為點選的響應事件；否則執行對應的。
mixin函數需要顯示調用，作為tool類建立dom結點時的參數使用。
具體如何使用參照上面的例子。
由于我們已經抽象出來多個類了，是以不如将之前頁面切換的邏輯也抽象成一個類，具體代碼如下：
//注意，這些其實都是全局變量
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);
//以下應該是切換頁面的邏輯
//擷取切換到哪一個頁面，
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上時，才會移動
var self = this;
var start = null;
var end = null;
var tools = $(".tooltab")[0].children
for (var i = 0; i < tools.length; i++) {
if (self == tools[i]) {
end = i;
} else if ($(".select")[0].parentnode == tools[i]) {
start = i;
//停止之前的動畫
//現在開始動畫效果
node.animate({"left": (end - start) * 160 + "px"})
this.tabmouseleave = function () {
$(".tool").mouseleave(function () {
node.animate({"left": "0px"})
而調用到目前為止的類和函數，十分簡單，如代碼：
$(document).ready(function () {
//這裡是點選切換顯示頁面
var toolboxtab = new tab();
toolboxtab.tabclick();
toolboxtab.tabmouseenter();
toolboxtab.tabmouseleave();
var jsonload = new toolsconfigjsonload();
jsonload.load();
})
目前進度：
①自動生成所有工具裡的所有工具；
②給工具添加點選響應事件；
目前還欠缺的内容：
①将所有工具裡的工具，添加進我的工具；
②我的工具頁面的各種邏輯；
③視情況，讓工具可以被添加、或不能被添加（添加按鈕在已添加後禁止顯示）。