标签：
前端的小玩意（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网址：
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": {
"ImgPosition": {
"x": "-100px",
"y": "0px"
}
}
},</span>
前两个属性看值就知道了；
bingImg和commonImg属性中的ImgPosition中的两个属性，主要是描述这个图标在图片中的位置；
CommonImg结构类似：
{
"title": "手游模拟器",
"description": "电脑玩手游，挂机辅助神器",
"type": "title",
"commonImg": {
"ImgPosition": {
"x": "-100px",
"y": "-100px"
}
}
},
只不过少了一个bigImg属性（因为他不需要）；
但多了一个type属性，用于描述其将放置于哪个分类下面。
下面上JSON的全部内容：（共计661行）
[
{
"BigImg": [
{
"title": "微信清理",
"description": "定期清理微信，节省手机空间",
"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": "驱动大师",
"description": "驱动安装一键解决",
"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": "人工服务",
"description": "7*24小时为您解决电脑问题",
"type": "safe",
"commonImg": {
"ImgPosition": {
"x": "-500px",
"y": "0px"
}
}
},
{
"title": "手机助手",
"description": "免费手机应用，资源下载平台",
"type": "safe",
"commonImg": {
"ImgPosition": {
"x": "-700px",
"y": "-100px"
}
}
},
{
"title": "弹窗拦截",
"description": "拦弹窗，去广告，就是给力",
"type": "safe",
"commonImg": {
"ImgPosition": {
"x": "-800px",
"y": "-100px"
}
}
},
{
"title": "隔离沙箱",
"description": "隔离系统真实环境运行软件",
"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": "主页修复",
"description": "一键解决浏览器主页相关问题",
"type": "safe",
"commonImg": {
"ImgPosition": {
"x": "-200px",
"y": "-200px"
}
}
},
{
"title": "文件解密",
"description": "免费还原被木马加密的文件",
"type": "safe",
"commonImg": {
"ImgPosition": {
"x": "-300px",
"y": "-200px"
}
}
},
{
"title": "网络优化",
"description": "全新家庭网络管理，秒踢蹭网",
"type": "network",
"commonImg": {
"ImgPosition": {
"x": "-400px",
"y": "-200px"
}
}
},
{
"title": "断网急救箱",
"description": "上不了网？就用断网急救箱",
"type": "network",
"commonImg": {
"ImgPosition": {
"x": "-600px",
"y": "0px"
}
}
},
{
"title": "免费WiFi",
"description": "电脑变热点，免费无线上网",
"type": "network",
"commonImg": {
"ImgPosition": {
"x": "-700px",
"y": "0px"
}
}
},
{
"title": "宽带测速器",
"description": "获取网络带宽和上网速度数值",
"type": "network",
"commonImg": {
"ImgPosition": {
"x": "-800px",
"y": "0px"
}
}
},
{
"title": "WiFi体检",
"description": "检测并修复路由器安全隐患",
"type": "network",
"commonImg": {
"ImgPosition": {
"x": "-500px",
"y": "-200px"
}
}
},
{
"title": "流量防火墙",
"description": "发现并阻止偷偷占流量的程序",
"type": "network",
"commonImg": {
"ImgPosition": {
"x": "0px",
"y": "-100px"
}
}
},
{
"title": "LSP修复",
"description": "修复网络异常和不能上网",
"type": "network",
"commonImg": {
"ImgPosition": {
"x": "-600px",
"y": "-200px"
}
}
},
{
"title": "DNS优选",
"description": "杜绝网络差，启用更优DNS",
"type": "network",
"commonImg": {
"ImgPosition": {
"x": "-700px",
"y": "-200px"
}
}
},
{
"title": "寝室必备",
"description": "看看哪个室友在占网速",
"type": "network",
"commonImg": {
"ImgPosition": {
"x": "-800px",
"y": "-200px"
}
}
},
{
"title": "360壁纸",
"description": "海量高清壁纸，美化电脑桌面",
"type": "system",
"commonImg": {
"ImgPosition": {
"x": "-900px",
"y": "-200px"
}
}
},
{
"title": "急救盘",
"description": "一盘在手，系统无忧",
"type": "system",
"commonImg": {
"ImgPosition": {
"x": "0px",
"y": "-300px"
}
}
},
{
"title": "任务管理器",
"description": "找出当前占用资源的程序",
"type": "system",
"commonImg": {
"ImgPosition": {
"x": "-300px",
"y": "0px"
}
}
},
{
"title": "鲁大师",
"description": "辨别硬件真伪，实时监测温度",
"type": "system",
"commonImg": {
"ImgPosition": {
"x": "-100px",
"y": "-300px"
}
}
},
{
"title": "默认软件",
"description": "帮您设置常用的默认软件",
"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": "系统盘瘦身",
"description": "通过瘦身解决系统盘空间不足",
"type": "system",
"commonImg": {
"ImgPosition": {
"x": "-500px",
"y": "-300px"
}
}
},
{
"title": "文件恢复",
"description": "快速帮您恢复被误删的文件",
"type": "system",
"commonImg": {
"ImgPosition": {
"x": "-600px",
"y": "-300px"
}
}
},
{
"title": "系统急救箱",
"description": "查杀顽固木马，修复系统异常",
"type": "system",
"commonImg": {
"ImgPosition": {
"x": "-600px",
"y": "0px"
}
}
},
{
"title": "磁盘擦除",
"description": "彻底清除磁盘数据，保护隐私",
"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": "系统重装",
"description": "无需光盘，恢复系统初始状态",
"type": "system",
"commonImg": {
"ImgPosition": {
"x": "0px",
"y": "-400px"
}
}
},
{
"title": "网游加速器",
"description": "解决游戏卡机掉线，永久免费",
"type": "game",
"commonImg": {
"ImgPosition": {
"x": "-100px",
"y": "-400px"
}
}
},
{
"title": "游戏大厅",
"description": "小号多开不串号，键鼠回放爽",
"type": "game",
"commonImg": {
"ImgPosition": {
"x": "-200px",
"y": "-400px"
}
}
},
{
"title": "游戏保险箱",
"description": "保护游戏网银账号安全",
"type": "game",
"commonImg": {
"ImgPosition": {
"x": "-300px",
"y": "-400px"
}
}
},
{
"title": "游戏优化器",
"description": "一键解决玩游戏卡、慢问题",
"type": "game",
"commonImg": {
"ImgPosition": {
"x": "-400px",
"y": "-400px"
}
}
},
{
"title": "360理财",
"description": "360互联网金融服务平台",
"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": "转移系统盘重要资料和文件",
"type": "smalltools",
"commonImg": {
"ImgPosition": {
"x": "-800px",
"y": "-400px"
}
}
},
{
"title": "360问答",
"description": "提出你的问题，分分钟有答案",
"type": "smalltools",
"commonImg": {
"ImgPosition": {
"x": "-900px",
"y": "-400px"
}
}
},
{
"title": "苹果设备清理",
"description": "清理App垃圾，节省手机空间",
"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": "查询天气、农历和节假日",
"type": "smalltools",
"commonImg": {
"ImgPosition": {
"x": "0px",
"y": "0px"
}
}
},
{
"title": "安全浏览器",
"description": "恶意网站拦截，下载保护",
"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"
}
}
}
]
}
]
为了适应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
div.titleRow
span.titleRow-left
span.titleRow-text 网络优化
div.commonRow.network
div.titleRow
span.titleRow-left
span.titleRow-text 系统工具
div.commonRow.system
div.titleRow
span.titleRow-left
span.titleRow-text 游戏优化
div.commonRow.game
div.titleRow
span.titleRow-left
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%);
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，然后将其添加入页面之中；
首先，创建一个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 self = this;
var obj = this.obj
var 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.obj
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>' +
'</div>';
var node = $(str);
node.click(function () {
if (self.state) {
callback();
}
})
return node;
};
}
他有三个方法，两个属性；
①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 () {
var self = this;
$.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);
}
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();
};
// 这个目的是当某一行只有两个图标时，创造一个占位的图标
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，具体修改后内容如下；
{
"title": "微信清理",
"ID":"No0",
"description": "定期清理微信，节省手机空间",
"bigImg": {
"ImgPosition": {
"x": "0px",
"y": "0px"
}
},
"commonImg": {
"ImgPosition": {
"x": "-100px",
"y": "0px"
}
}
},这里的ID的值，就是利用该元素生成Tool实例时，我们写在MixinTool类里，该元素预期拿取的点击事件处理函数。
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实例没有对应的方法，他会执行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上时，才会移动
if (!($(this.children[0]).hasClass("select"))) {
var self = this;
var node = $(".tool .hover");
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;
}
}
//停止之前的动画
if ('stop' in node) {
node.stop();
}
//现在开始动画效果
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"})
}
})
}
}
而调用到目前为止的类和函数，十分简单，如代码：
$(document).ready(function () {
//这里是点击切换显示页面
var toolboxTab = new Tab();
toolboxTab.tabClick();
toolboxTab.tabMouseEnter();
toolboxTab.tabMouseLeave();
var jsonLoad = new ToolsConfigJsonLoad();
jsonLoad.load();
})
目前进度：
①自动生成所有工具里的所有工具；
②给工具添加点击响应事件；
目前还欠缺的内容：
①将所有工具里的工具，添加进我的工具；
②我的工具页面的各种逻辑；
③视情况，让工具可以被添加、或不能被添加（添加按钮在已添加后禁止显示）。
前端的小玩意（9.4）——做一个仿360工具箱的web页面（自动生成所有图标，对图标添加响应逻辑）
标签：
原文地址：http://blog.csdn.net/qq20004604/article/details/52246586
