使用幻灯片组件,实现空间计算,并选择商品进购物车。
视频中全部源码如下:
/*第一步:初始化图文数据*/
new _.层([["chofo",{左:300,上:48,下:1}]],{背景图:"image/logon/ktv.jpg",中间色:"-"});
new _.工具条(["虚拟场景","商品信息","订单信息","报表查询","退出系统"],
{代号:"tb",输出:"chofo_top",背景色:"#1B1B1B,#1F1F1F",选中颜色:"#438778,#4F8F7F",路径:"sico/",数字名称:true,样式:"color:#FFF"});
var t_goods_grid=[["序列","名称","价格","单位","图","备注","所属小类","所属大类"],
["1","北京烤鸭","168","只","1.jpg","","热菜","中餐"],
["2","重庆火锅","98","份","2.jpg","","热菜","中餐"],
["3","阿根廷牛扒","68","份","3.jpg","","热菜","中餐"],
["4","青岛啤酒","10","瓶","4.jpg","","酒水","中餐"],
["5","贵州茅台","1688","瓶","5.jpg","","酒水","中餐"],
["6","法国葡萄酒","688","瓶","6.jpg","","酒水","中餐"],
["7","北极冰虾","78","份","7.jpg","","水产","料理"],
["8","阳澄湖大闸蟹","98","只","8.jpg","","水产","料理"],
["9","日本刺参","66","个","9.jpg","","水产","料理"],
["10","德国汉堡","26","份","10.jpg","","主食","料理"],
["11","意大利披萨","28","盘","11.jpg","","主食","料理"],
["12","英国三明治","16","个","12.jpg","","主食","料理"]];
/*第二步:调用列表组件平面化显示数据*/
$.商品列表=new _.列表(t_goods_grid,{图:4,列数:6,行高:150,输出:"chofo_center",全屏:true,图片路径:"image/goods/"});
/*第三步:调用幻灯片组件进行空间计算展示旋转木马动画*/
$.商品属性={代号:"pps",图:4,列数:2,行高:300,每页:2,图层:6,宽:1100,时间:30,输出:"chofo_center",全屏:true,路径:"image/goods/"};
$.商品列表=new _.幻灯片(t_goods_grid,$.商品属性);
/*第四步:设置幻灯片画中画*/
t_goods_grid[1][4]="1.jpg;1-1.jpg;1-2.jpg;1-3.jpg;1-4.jpg;1-5.jpg;1-6.jpg;1-7.jpg;1-8.jpg;1-9.jpg;1-10.jpg;1-11.jpg";
t_goods_grid[3][4]="3.jpg;3-1.jpg;3-2.jpg";
t_goods_grid[5][4]="5.jpg;5-1.jpg;5-2.jpg";
t_goods_grid[7][4]="7.jpg;7-1.jpg;7-2.jpg";
t_goods_grid[9][4]="9.jpg;9-1.jpg;9-2.jpg";
t_goods_grid[11][4]="11.jpg;11-1.jpg;11-2.jpg";
$.商品列表=new _.幻灯片(t_goods_grid,$.商品属性);
/*第五步:定义点击事件*/
$.购物车数组=[["id",["name","名称"],["price","价格",{类型:"hidden"}],["number","数量"],["total","小计"]]];
$.购物=function(i,B){
if(!$.购物车)$.购物车=new _.选择器($.购物车数组,{输出:"chofo_left"});
$.购物车.add(B[i][0],B[i][1],B[i][2],1);
};
$.商品点击事件=function(i,src,hide,B){$.购物(i,B);};
$.商品列表=new _.幻灯片(t_goods_grid,$.商品属性,$.商品点击事件);
/*第六步:设置单元格样式*/
$.商品点击事件=function(i,src,hide,B){if(B[i][0]*1==3)return false;$.购物(i,B);};
$.商品属性.设置单元格=function(i,tw,th,B){
if(B[i][0]*1==3)return "<textarea style='height:80%;width:80%'></textarea>";else return false;
};
$.商品列表=new _.幻灯片(t_goods_grid,$.商品属性,$.商品点击事件);