js模擬淘寶網的多層選擇選單實作方法_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

js模擬淘寶網的多層選擇選單實作方法_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:44 PM

js 模擬淘寶選單

本文實例講述了js模擬淘寶網的多層選擇選單實作方法。分享給大家供大家參考。具體如下：

這是一款基於js模擬淘寶網的多級選擇菜單代碼，這款菜單是模擬淘寶網的，是很早時候的淘寶網，現在已經沒有了，本款菜單可以像級聯菜單那樣一級一級的選擇數據，最後確定出數據。

運作效果截圖如下：

線上示範網址如下：

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>模拟淘宝网菜单选择</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>

登入後複製

希望本文所述對大家的javascript程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7699

Java教學

1640

CakePHP 教程

1393

Laravel 教程

1287

PHP教程

1230

Related knowledge

怎麼看淘寶的出貨地在哪裡查看淘寶app下單出貨地址的方法 Mar 12, 2024 pm 04:00 PM

淘寶app上都能夠滿足大家的一切購物方面的問題，這裡超多的商家，超多的一些寶貝，都能夠等著大家進行選擇，無論大家想要買一些什麼樣的商品，都能夠在這裡搜索找到，讓大家直接的下單購買，全方面的一些功能，都能夠自由的進行操作哦，當大家下單成功的話，大家只需要等待商家發貨，進行物流的配送即可，非常的方便，很多的時候，大家都能夠選擇查看到這一些商品的發貨地，知道自己的這一些商品到底是哪裡進行發貨，尤其是對於大家購買一些電子產品的時候，都能查詢一些相關的發貨地的訊息，避免自己買到的是一些翻新機的問題，相

淘寶如何拒收陌生人訊息 Mar 02, 2024 am 08:40 AM

在使用淘寶的過程中我們會收到一些陌生用戶傳來的訊息。以下為大家介紹設定拒收陌生人訊息的方法。 1.開啟手機中的淘寶進入介面後，在底部點選「訊息」這項切換進入，再在右上方點選「+」圖示開啟。 2.這時圖示下方會彈出一個窗口，在裡面點選選擇「訊息設定」這一項。 3.在訊息設定頁面裡有一個“陌生人聊天設定”，在它的上面點擊進入。 4.最後在進入的介面裡會看到「拒收陌生人訊息」的功能，在它的後面點選對應的開關按鈕。當按鈕設定為彩色即為開啟，使用淘寶時就不會再接收到陌生用戶發送的訊息。

淘寶免單紅包領取方式2024 May 09, 2024 pm 03:22 PM

2024淘寶免單活動每日三場，大家需要在對應時間下單付款對應金額的商品，免單金額是以等額紅包形式發放，接下來給大家帶來了淘寶免單紅包領取方法2024：搶到免單的用戶，紅包資格將發放至卡券包，為待激活狀態；網頁版淘寶暫無卡券包，僅做免單活動的中獎記錄的展示；卡券包在【淘寶APP-我的淘寶-我的權益-紅包】。淘寶免單紅包領取方式20241、搶到免單的用戶，紅包資格將發放至卡券包，為待激活狀態；2、網頁版淘寶暫無卡券包，僅做免單活動的中獎記錄的展示;3、卡券包在【淘寶APP-我的淘寶-我的權益-紅包】

淘寶怎麼關閉免機密付款取消免機密付款的設定方法 Mar 12, 2024 pm 12:07 PM

淘寶APP上的功能超多，這些功能的存在，都是為了大家可以獲得更好的購物體驗，超多的一些商品種類，都是可以很好的滿足不同用戶們的購物需求，大家真的想買啥，就買啥，大家按類查找或直接的搜尋查看這些商品，都是沒有任何問題的存在，大家都能夠放心的進行網購，給大家帶來物超所值的購物服務，絕對給你們想要的一切哦，當然大家在這裡購物的話，都能夠發現這裡多種的一些購物方式，是可以讓大家進行選擇，對於這裡的一些免密支付的這一功能，有人喜歡，也有人不是那麼的喜歡，覺得安全性沒有那麼的高，當然大家都能隨時取消

淘寶怎麼改名字 Mar 24, 2024 pm 03:31 PM

改名功能在淘寶中可以讓用戶自由改名字暱稱，有些用戶並不知道淘寶怎麼改名字，在我的淘寶中的設定裡點擊頭像的淘寶帳號進行修改即可，接下來小編就為大家帶來了改名字暱稱方法的介紹，還不知道的用戶快來下載試試看。淘寶使用教學淘寶怎麼改名字答：在我的淘寶中的設定裡點擊頭像的淘寶帳號進行修改即可詳情介紹：1、進入淘寶，點擊右下【我的淘寶】。 2.點選右上的【設定】圖示。 3.點擊頭像。 4、再點【淘寶帳號】。 5.點選【修改帳號名】，輸入修改即可。

淘寶怎麼關掉紅包提醒 Apr 01, 2024 pm 06:25 PM

淘寶是許多小夥伴們常用的網購軟體，平常很多東西各位都會從裡面下單購買，裡面給用戶們提供了紅包提醒功能，有的朋友們想要來關掉，那麼就趕快來PHP中文網看看吧。淘寶關閉紅包提醒步驟一覽1、開啟淘寶APP的個人中心，選擇【設定】按鈕進入頁面。 2.找到【訊息通知】選項，在這裡可以選擇訊息推播開關，找到紅包訊息將開關關閉就可以了。 3.或也可以透過手機的設定頁面，將淘寶APP的通知權限關閉，這樣所有來自淘寶的訊息都不會進入推播，只有開啟後才能看到。 4.使用者可以自己設定想要接收哪些類型的訊息，這樣使用起來也

淘寶怎麼查消費總金額看消費總額的方法 Mar 12, 2024 pm 03:07 PM

我們平常需要進行網購的話，大家都是會選擇淘寶這一平台，完全都能夠滿足大家一切的購物方面的需求，擁有著超多的一些商品的資源，真的各種各樣的一些商品，都是匯聚了在這一個平台上，大家發現這裡的一些商品的類別超多，完全都能夠根據自己的需求進行挑選，想買啥，就能買啥的，所以大家肯定都是會在這裡購買到超多的一些商品，這些商品的價格，都是有著很大的一些不同，所有的這一些購物記錄都能保存下來，能夠方便大家隨時的進行查詢，那麼你們知道自己在這裡購物的話，到底是花了多少的錢呢，想必大家非常的好奇，下面小編都

《淘寶》免單紅包退款會退嗎 May 08, 2024 am 08:16 AM

在淘寶購物時，我們經常會使用免單紅包來享受優惠。但是，如果我們需要退款，這些免單紅包會被退回嗎？讓我們來看看這個問題的答案。淘寶免單紅包退款會退回嗎分情況而論獲得紅包時，紅包是待激活狀態，在兌換商品之前，這個待激活的紅包是沒有激活的，暫時無法使用，等購買的商品確認收貨之後，待啟動狀態的紅包才可使用。免單紅包使用後商品有問題需要退貨，那麼紅包的退貨需要按照實際情況來判斷：一、退款規則11、紅包使用後發生退款，則紅包按比例退回。 2.在未逾期的情況下，退回紅包的使用期限為原定使用期限，若逾期7天內發

See all articles

js模擬淘寶網的多層選擇選單實作方法_javascript技巧

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題