js模拟淘宝网的多级选择菜单实现方法


Posted in Javascript onAugust 18, 2015

本文实例讲述了js模拟淘宝网的多级选择菜单实现方法。分享给大家供大家参考。具体如下:

这是一款基于js模拟淘宝网的多级选择菜单代码,这款菜单是模拟淘宝网的,是很早时候的淘宝网,现在已经没有了,本款菜单可以像级联菜单那样一级一级的选择数据,最后确定出数据。

运行效果截图如下:

js模拟淘宝网的多级选择菜单实现方法

在线演示地址如下:

具体代码如下:

<!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(//img.jbzj.com/file_images/article/201508/201581893903737.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>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
利用js获取服务器时间的两个简单方法
Jan 08 Javascript
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
ajax请求+vue.js渲染+页面加载的示例
Feb 11 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
Jul 18 Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 Javascript
Vue实现星级评价效果实例详解
Dec 30 Javascript
微信小程序如何实现radio单选框单击打勾和取消
Jan 21 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
JavaScript实现贪吃蛇游戏
Jun 16 Javascript
js实现Select头像选择实时预览代码
Aug 17 #Javascript
基于jquery实现放大镜效果
Aug 17 #Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 #Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 #Javascript
js实现匹配时换色的输入提示特效代码
Aug 17 #Javascript
js实现表单Radio切换效果的方法
Aug 17 #Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 #Javascript
You might like
利用php来自动调用不同服务器上的flash
2006/10/09 PHP
PHP面向对象编程快速入门
2006/12/14 PHP
php实现在服务器上创建目录的方法
2015/03/16 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
vue地址栏直接输入路由无效问题的解决
2018/11/15 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
python如何读写json数据
2018/03/21 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
python实现列表的排序方法分享
2019/07/01 Python
Python爬虫:将headers请求头字符串转为字典的方法
2019/08/21 Python
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
关于Assembly命名空间的三个面试题
2015/07/23 面试题
升职自荐信范文
2013/10/05 职场文书
职称评定自我鉴定
2014/03/18 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
付款委托书范本
2014/10/05 职场文书
保险公司2016开门红口号集锦
2015/12/24 职场文书
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android
MySQL 逻辑备份 into outfile
2022/05/15 MySQL