search

Home >Web Front-end >JS Tutorial >js simulation of Taobao's multi-level selection menu implementation method_javascript skills

js simulation of Taobao's multi-level selection menu implementation method_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:44:301159browse

The example in this article describes the implementation method of js simulating Taobao's multi-level selection menu. Share it with everyone for your reference. The details are as follows:

This is a multi-level selection menu code based on js that simulates Taobao. This menu simulates Taobao. It was Taobao in the early days. It is no longer available. This menu can be like a cascading menu. Select data level by level, and finally determine the data.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-ftaobao-select-menu-codes/

The specific code is as follows: 

<!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(http://files.jb51.net/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)&#63;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>

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jQuery vertical multi-level navigation menu code sharing_jqueryNext article：jQuery vertical multi-level navigation menu code sharing_jquery

Related articles

See more