模拟淘宝网菜单选择

转载 2012年03月26日 09:14:43
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>模拟淘宝网菜单选择</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css" media="all">
body *{
font-size:14px;
margin:0;
padding:0;
}
#CategorySelector{
clear:both;
width:778px;
height:220px;
background-color:#FFF;
margin-bottom:8px;
}
#CategorySelector ul{
margin:0 3px 0 0;
padding:0;
border:1px solid #CCC;
float:left;
width:189px;
height:218px;
overflow:auto;
}
#CategorySelector ul.Blank{
background-color:#F6F6F6;
}
#CategorySelector li{
list-style-type:none;
width:auto;
height:20px;
margin:0 1px !important;
margin /**/:0 1px 0 -15px;
padding:0;
border:1px solid #FFF;
line-height:20px;
color:#444;
text-indent:3px;
cursor:default;
}
#CategorySelector li.Selected{
background-color:#CAFFC0;
border:1px solid #0A9800;
color:#006623;
}
#CategorySelector li.IsParent{
background-image:url(/uploads/allimg/1110/publishitem_subcate_arrow.gif);
background-position:99% 50%;
background-repeat:no-repeat;
}
#CategorySelector li.RecentUsed{
color:#170;
}
#CategoryTitle{
clear:both;
width:778px;
background-color:#FFF;
}
#CategoryTitle ul{
float:left;
}
#CategoryTitle li{
margin:0 3px 0 0;
float:left;
border:1px solid #CCC;
width:189px;
color:#0063C8;
font-weight:bold;
border-bottom:0px;
height:23px;
line-height:23px;
}
</style>
</head>
<body>
<div id="CategoryTitle">
<ul id="TitleContent">
<li>  选择宝贝类别</li>
<li>  选择游戏</li>
<li>  选择游戏区域</li>
<li>  选择服务器</li>
</ul>
</div>
<div id="CategorySelector">
<ul id="Category_ItemType" class="Blank">
</ul>
<ul id="Category_GameType" class="Blank">
</ul>
<ul id="Category_GameArea" class="Blank">
</ul>
<ul id="Category_GameServer" class="Blank">
</ul>
</div>
<script language="javascript" type="text/javascript" id="commonjs">
Array.prototype.S = String.fromCharCode(2);
Array.prototype.in_array = function(e)
{
var re = new RegExp(this.S+e+this.S);
return re.test(this.S+this.join(this.S)+this.S);
}
function DataContent()
{
this.Parent; // Parent Tags
this.ParentID;
this.Children; // Children Tags
this.ChildrenID;
}
function DataServer()
{
this.mList = new Array();
this.ListCount = function(){return this.mList.length;}
this.GetListObj = function(n)
{
if (n<this.ListCount()) return this.mList[n];
return null;
}
this.Add = function(sParent,sParentID,sChildren,sChildrenID)
{
obj = new DataContent();
obj.Parent = sParent;
obj.ParentID = sParentID;
obj.Children = sChildren;
obj.ChildrenID = sChildrenID;
this.mList[this.ListCount()] = obj;
}
}
function getTriggerNode(e) {
return (document.all)?event.srcElement:e.target;
}
function getObject(objID)
{
return document.getElementById(objID);
}
function CreateList(objName,objData,objSelected)
{
var listBox = getObject(objName[0]);
if(!listBox) return;
var strOutput = "";
var liClass = "";
var id = 0;
var op_txt = new Array();
var op_val = new Array();
var sub_val = new Array();
if (objSelected[0])
{
for(i=0;i<objData.ListCount();i++)
if(objData.GetListObj(i).ParentID==objSelected[0])
{
id = i;
break;
}
if(i==objData.ListCount()){
listBox.innerHTML="";
listBox.className="Blank";
return false;
}
}
if(objName[1])
for(i=0;i<objName[1].ListCount();sub_val.push(objName[1].GetListObj(i++).ParentID));
tmpobj = objData.GetListObj(id);
if (tmpobj.Children.length==0)
{
for(i=0;i<objData.ListCount();op_txt.push(objData.GetListObj(i).Parent),op_val.push(objData.GetListObj(i++).ParentID));
}
else
{
op_txt = tmpobj.Children;
op_val = tmpobj.ChildrenID;
}
for(i=0;i<op_txt.length;i++)
{
if(sub_val.in_array(op_val[i]))
liClass = "IsParent";
if(op_val[i] == objSelected[1]){
liClass += " Selected";
}
strOutput += '<li id="'+objName[0]+'__'+op_val[i]+'" class="'+liClass+'">'+op_txt[i]+'</li>';
liClass = '';
}
listBox.innerHTML = strOutput;
strOutput = "";
listBox.className="";
}
function changeCategoryStyle(ulID,liCurr){
if(lastSelectItem[ulID]){
lastSelectItem[ulID].className=lastSelectItem[ulID].className.replace("Selected","").replace(/\s+$/,"");
}
liCurr.className += " Selected";
lastSelectItem[ulID] = liCurr;
}
function changeCategory(evnt)
{
var obj = getTriggerNode(evnt);
var obj2 = obj;
if(obj2.nodeName=="DIV") return (0);
if(obj.nodeName != "LI")
obj = obj.parentNode;
while(obj2.nodeName != "UL")
obj2 = obj2.parentNode;
if(obj.nodeName != "LI") return;
changeCategoryStyle(obj2.id,obj);
var parentID = (obj.id).split("__")[1];
switch(obj2.id)
{
case itemtype:
break;
case gametype:
CreateList([gamearea,gameserverData],gameareaData,[parentID,0]);
break;
case gamearea:
CreateList([gameserver,],gameserverData,[parentID,0]);
break;
}
}
var cselect = "CategorySelector";
var itemtype = "Category_ItemType";
var gametype = "Category_GameType";
var gamearea = "Category_GameArea";
var gameserver = "Category_GameServer";
var lastSelectItem = {itemtype:new Object(),gametype:new Object(),gamearea:new Object(),gameserver:new Object()};
var itemtypeData = new DataServer();
itemtypeData.Add("武器",1,[],[]);
itemtypeData.Add("防具",2,[],[]);
var gametypeData = new DataServer();
gametypeData.Add("魔力宝贝",1,[],[]);
gametypeData.Add("仙境传说",2,[],[]);
var gameareaData = new DataServer();
gameareaData.Add("魔力宝贝",1,["天歇","牧羊"],[1,2]);
gameareaData.Add("仙境传说",2,["上海","北京"],[3,4]);
var gameserverData = new DataServer();
gameserverData.Add("天歇",1,["平顶","山顶"],[1,2]);
gameserverData.Add("牧羊",2,["平顶2","山顶2"],[3,4]);
//gameserverData.Add("上海",3,["sfdsadfas","sdf"],[5,6]);
gameserverData.Add("北京",4,["asdf","asdff"],[7,8]);
CreateList([itemtype,],itemtypeData,[0,0]);
CreateList([gametype,gameareaData],gametypeData,[0,0]);
getObject(cselect).onclick = changeCategory;
</script>
</body>
</html><br /><hr style="color:#999;height:1px;width:98%">如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a>
文章源自:烈火网,原文:http://www.veryhuo.com/a/view/41075.html

淘宝网技术架构介绍

淘宝网技术架构介绍 学习目标:        1.了解淘宝架构的需求;       2.了解淘宝技术的演变;       3.了解架构的一些基本准则。 淘宝相关的一些...
  • wp1603710463
  • wp1603710463
  • 2015年12月03日 21:48
  • 7519

jquery菜单选择

html页面:
  • curiouslearnerdhh
  • curiouslearnerdhh
  • 2014年07月03日 11:20
  • 514

淘宝网采用什么技术架构来实现网站高负载分析

http://my.oschina.net/004/blog/123210 8月22日珠海 OSC 源创会正在报名,送机械键盘和开源无码内裤   下面就结合淘宝目前的一些底层技术框...
  • onlyForCloud
  • onlyForCloud
  • 2015年08月23日 11:45
  • 774

淘宝网UED官方博客

http://ued.taobao.com/blog  - 淘宝网UED官方博客
  • hwangsyin
  • hwangsyin
  • 2013年09月08日 12:49
  • 1467

淘宝网的设计流程

淘宝面试的最后一个环节,是请应聘者向面试官提问,使面试官有机会解答应聘者对公司、团队以及工作等等方面的疑问。在我面试过的设计师当中,大约有三分之一会问我:“淘宝的设计流程是怎麽样的?”我不是很瞭解问这...
  • alwaysxihe
  • alwaysxihe
  • 2015年05月07日 15:11
  • 522

学生成绩管理

学生成绩管理是学校教务管理的重要组成部分,其处理信息量很大,本实验是对学生的成绩管理作一个简单的模拟,用菜单选择操作方式完成下列功能: (1)学生成绩; (2)查询学生成绩; (3)插入学生成绩; (...
  • tanxiaoguoguo
  • tanxiaoguoguo
  • 2009年03月14日 21:43
  • 802

RTL8192cu无线网卡

开发板:mini2440 内核版本:linux-2.6.32.2 编译器版本:4.3.3 使用无线网卡芯片:rtl8192cu(其他realtek芯片步骤差不多) 步骤: 1、去Rea...
  • imzhujun
  • imzhujun
  • 2015年01月09日 11:29
  • 1043

淘宝网靠什么赚钱?

经常上淘宝逛,也经常向身边的朋友同事推荐,朋友同事们使用后都觉得不错,改变了以往对网上购物的看法,同时也都问我:淘宝网靠什么赚钱?大家都觉得,即然在淘宝开店都是免费的,交易也不收任何的手续费,那么淘宝...
  • Triumph
  • Triumph
  • 2007年11月11日 14:52
  • 8298

win32强化练习4.2_菜单勾选与图标变换

只有进行过充分的练习,才能够真正掌握一门技能!通过进行或单项或综合的知识点强化训练,巩固和提高自己的windows程序设计的技能水平!...
  • baidu_24190413
  • baidu_24190413
  • 2016年11月24日 23:05
  • 405

淘宝网站发展详解

一、引言   光棍节的狂欢   “时间到,开抢!”坐在电脑前早已等待多时的小美一看时间已到 2011 年 11 月 11 日零时,便迫不及待地投身于淘宝商城一年一度的大型网购促销活动 —— “淘宝...
  • kyfg27_niujin
  • kyfg27_niujin
  • 2012年11月20日 15:40
  • 4498
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:模拟淘宝网菜单选择
举报原因:
原因补充:

(最多只允许输入30个字)