js模擬淘寶網(wǎng)的多級(jí)選擇菜單實(shí)現(xiàn)方法
更新時(shí)間：2015年08月18日 09:33:00 作者：企鵝
這篇文章主要介紹了js模擬淘寶網(wǎng)的多級(jí)選擇菜單實(shí)現(xiàn)方法,涉及javascript針對(duì)頁(yè)面元素結(jié)點(diǎn)的遍歷與設(shè)置等操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了js模擬淘寶網(wǎng)的多級(jí)選擇菜單實(shí)現(xiàn)方法。分享給大家供大家參考。具體如下：
這是一款基于js模擬淘寶網(wǎng)的多級(jí)選擇菜單代碼，這款菜單是模擬淘寶網(wǎng)的，是很早時(shí)候的淘寶網(wǎng)，現(xiàn)在已經(jīng)沒有了，本款菜單可以像級(jí)聯(lián)菜單那樣一級(jí)一級(jí)的選擇數(shù)據(jù)，最后確定出數(shù)據(jù)。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-ftaobao-select-menu-codes/
具體代碼如下：
<!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>模擬淘寶網(wǎng)菜單選擇</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> 選擇游戲區(qū)域</li>
<li> 選擇服務(wù)器</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>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- vuejs實(shí)現(xiàn)下拉框菜單選擇
- JS實(shí)現(xiàn)點(diǎn)擊下拉菜單把選擇的內(nèi)容同步到input輸入框內(nèi)的實(shí)例
- javascript實(shí)現(xiàn)日期三級(jí)聯(lián)動(dòng)下拉框選擇菜單
- 使用Javascript實(shí)現(xiàn)選擇下拉菜單互移并排序
- 基于javascript實(shí)現(xiàn)全國(guó)省市二級(jí)聯(lián)動(dòng)下拉選擇菜單
- js實(shí)現(xiàn)的全國(guó)省市二級(jí)聯(lián)動(dòng)下拉選擇菜單完整實(shí)例
- js選擇并轉(zhuǎn)移導(dǎo)航菜單示例代碼
- 純JSP+DWR實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)下拉選擇菜單實(shí)現(xiàn)技巧
- javascript 三級(jí)下拉選擇菜單Levels對(duì)象
- js實(shí)現(xiàn)圓形菜單選擇器
相關(guān)文章
JavaScript數(shù)據(jù)推送Comet技術(shù)詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript數(shù)據(jù)推送Comet技術(shù)，感興趣的小伙伴們可以參考一下2016-04-04
刪除表格的第一個(gè)tbody2008-11-11
創(chuàng)建一個(gè)類Person的簡(jiǎn)單實(shí)例
如何創(chuàng)建一個(gè)類Person？下面小編就為大家?guī)硪黄獎(jiǎng)?chuàng)建一個(gè)類Person的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過來看看吧2016-05-05
ts依賴引入報(bào)錯(cuò):無法找到模塊“xxxxxx”的聲明文件問題解決
這篇文章主要給大家介紹了關(guān)于ts依賴引入報(bào)錯(cuò):無法找到模塊“xxxxxx”的聲明文件問題的解決辦法,文中通過示例帶將解決辦法介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
js自動(dòng)閉合html標(biāo)簽(自動(dòng)補(bǔ)全html標(biāo)記)
假如我有一個(gè)DIV，如果沒有閉合后面的樣式都會(huì)亂了，這樣的代碼可能會(huì)影響后面的樣式，我希望用ＪＳ去自動(dòng)閉合這種沒有閉合的標(biāo)簽2012-10-10
今天是相當(dāng)?shù)睦?，所以就點(diǎn)比較容易點(diǎn)的東西吧，講關(guān)于鼠標(biāo)移動(dòng)后出現(xiàn)提示信息的js代碼。能力有限，寫得不好盡管提出來。2010-01-01
使用javascript實(shí)現(xiàn)有效時(shí)間的控制,并顯示將要過期的時(shí)間
本篇文章主要介紹了使用javascript實(shí)現(xiàn)有效時(shí)間的控制,并顯示將要過期的時(shí)間示例代碼。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
這篇文章主要介紹了微信小程序 TLS 版本必須大于等于1.2問題解決的相關(guān)資料,需要的朋友可以參考下2017-02-02
JS實(shí)現(xiàn)側(cè)懸浮浮動(dòng)實(shí)例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)側(cè)懸浮浮動(dòng)實(shí)例代碼，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了開源一個(gè)微信小程序儀表盤組件過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07