Taobao의 다단계 선택 메뉴 구현 방법_javascript 기술의 js 시뮬레이션
이 기사의 예에서는 Taobao의 다단계 선택 메뉴를 시뮬레이션하는 js의 구현 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
Taobao를 시뮬레이션하는 js 기반의 다단계 선택 메뉴 코드입니다. 이 메뉴는 초기 Taobao에서 제공되었으나 더 이상 계단식 메뉴와 비슷할 수 있습니다. 레벨별로 최종적으로 데이터를 결정합니다.
런닝 효과 스크린샷은 다음과 같습니다.
온라인 데모 주소는 다음과 같습니다.
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)?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 프로그래밍 설계에 도움이 되기를 바랍니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
타오바오 배송지 주소는 어떻게 확인하나요? 타오바오 앱에서 주문한 상품의 배송지 주소를 확인하는 방법은 무엇인가요?
Mar 12, 2024 pm 04:00 PM
Taobao 앱은 귀하의 모든 쇼핑 문제를 해결할 수 있습니다. 여기에는 수많은 판매자가 있으며 귀하가 선택하기를 기다리는 제품이 무엇이든 상관없이 여기에서 검색하고 찾을 수 있습니다. 주문하고 구매하며 모든 기능을 자유롭게 사용할 수 있습니다. 주문을 성공적으로 하면 판매자가 상품을 배송하고 물류 배송을 수행할 때까지 기다리면 됩니다. 매우 편리하고 많은 사람들이 볼 수 있습니다. 이러한 제품의 배송 위치를 확인하고 해당 제품이 배송되는 위치를 알아보세요. 특히 일부 전자 제품을 구매할 때 일부 관련 배송 위치를 확인하여 일부 리퍼브 기계를 구매할 때 발생할 수 있는 문제를 피할 수 있습니다.
타오바오에서 낯선 사람이 보낸 메시지를 거부하는 방법
Mar 02, 2024 am 08:40 AM
타오바오를 사용하는 과정에서 일부 이상한 사용자로부터 메시지를 받게 됩니다. 낯선 사람이 보낸 메시지를 거부하도록 설정하는 방법은 다음과 같습니다. 1. 휴대폰에서 타오바오를 열어 인터페이스에 들어간 후 하단의 '메시지' 항목을 클릭하여 전환한 다음 오른쪽 상단의 '+' 아이콘을 클릭하여 엽니다. 2. 아이콘 아래에 창이 나타나면 "메시지 설정" 항목을 클릭하여 선택하세요. 3. 메시지 설정 페이지에 "낯선 사람 채팅 설정"이 있습니다. 이를 클릭하여 들어갑니다. 4. 마지막으로 입력한 인터페이스에 "낯선 사람의 메시지 거부" 기능이 표시됩니다. 그 뒤에 있는 해당 스위치 버튼을 클릭하세요. 버튼이 컬러로 설정되면 활성화됩니다. 타오바오 이용 시 알 수 없는 사용자로부터 더 이상 메시지를 받지 않습니다.
Taobao 무료 빨간 봉투 2024를 얻는 방법
May 09, 2024 pm 03:22 PM
2024년 타오바오 무료주문 이벤트는 하루 3번 진행됩니다. 모든 사람은 해당 시간에 해당 상품을 주문하고 결제해야 합니다. 무료 주문 금액은 동일한 금액의 빨간 봉투 형태로 배포됩니다. 다음으로 2024년 타오바오 무료 주문 빨간 봉투 받는 방법을 알려드리겠습니다. 무료 사용자의 경우 활성화 상태에 있는 카드와 쿠폰 패키지에 빨간 봉투 자격이 발급됩니다. 현재 타오바오 웹 버전에는 카드와 쿠폰 패키지가 없으며, 무료 주문 이벤트 당첨 기록만 표시됩니다. 카드와 쿠폰 패키지는 [타오바오 앱-내 타오바오]-나의 권리-빨간 봉투]에 있습니다. 타오바오 빨간 봉투 무료로 받는 방법 20241. 무료 주문을 받은 사용자에게 빨간 봉투 자격은 활성화 대기 중인 카드와 쿠폰 패키지에 배포됩니다. 카드와 쿠폰 패키지가 있으며, 무료 주문 활동의 당첨 기록만 표시됩니다. ;3. 카드 쿠폰 패키지는 [타오바오 앱-나의 권리-빨간 봉투]에 있습니다.
Taobao에서 빨간 봉투 알림을 끄는 방법
Apr 01, 2024 pm 06:25 PM
Taobao는 많은 친구들이 일반적으로 사용하는 온라인 쇼핑 소프트웨어입니다. 일반적으로 Taobao에서 많은 물건을 주문하고 구매하는 경우가 있습니다. 일부 친구는 이 기능을 끄고 싶어하므로 서둘러 PHP 중국어를 확인하세요. 웹사이트를 살펴보세요. 타오바오 빨간 봉투 알림을 끄는 단계 목록 1. 타오바오 앱 개인 센터를 열고 [설정] 버튼을 선택하여 페이지로 들어갑니다. 2. [메시지 알림] 옵션을 찾으세요. 여기에서 빨간 봉투 메시지를 찾아 스위치를 끌 수 있습니다. 3. 또는 휴대폰 설정 페이지를 통해 타오바오 앱의 알림 권한을 꺼서 타오바오에서 보내는 모든 메시지가 푸시에 들어가지 않고 켜진 후에만 볼 수 있도록 할 수 있습니다. 4. 사용자는 어떤 유형의 메시지를 받고 싶은지 설정할 수 있으므로 사용이 더 쉽습니다.
타오바오에서 비밀번호 없는 결제를 끄는 방법 비밀번호 없는 결제 설정 방법을 취소하는 방법입니다.
Mar 12, 2024 pm 12:07 PM
Taobao 앱에는 모든 사람이 더 나은 쇼핑 경험을 할 수 있도록 많은 기능이 있습니다. 다양한 제품 유형은 모두가 원하는 것을 구매할 수 있습니다. 카테고리별로 검색하실 수도 있고, 직접 검색하실 수도 있습니다. 누구나 안심하고 온라인 쇼핑을 하실 수 있습니다. 물론, 원하시는 모든 것을 제공해 드립니다. 여기에서 쇼핑하시면 선택 가능한 다양한 쇼핑 방법을 찾으실 수 있습니다. 비밀번호 없는 결제 기능을 좋아하는 사람도 있고 그렇지 않은 사람도 있지만 보안 수준은 그다지 높지 않은 것 같아요. 물론 누구나 언제든지 취소할 수 있습니다.
타오바오 이름 바꾸는 방법
Mar 24, 2024 pm 03:31 PM
이름 변경 기능을 사용하면 타오바오에서 이름과 닉네임을 자유롭게 변경할 수 있습니다. 일부 사용자는 타오바오에서 이름을 변경하는 방법을 모릅니다. 내 타오바오 설정에서 아바타의 타오바오 계정을 클릭하면 됩니다. 편집자가 알려드릴 것입니다. 이름과 닉네임을 변경하는 방법을 소개합니다. 아직 모르신다면 다운로드하여 사용해 보세요. 타오바오 사용 튜토리얼: 타오바오에서 이름을 변경하는 방법 답변: 내 타오바오 설정에서 아바타의 타오바오 계정을 클릭하여 수정하세요. 자세한 소개: 1. 타오바오에 들어가서 오른쪽 하단의 [내 타오바오]를 클릭하세요. . 2. 우측 상단의 [설정] 아이콘을 클릭하세요. 3. 아바타를 클릭하세요. 4. [타오바오 계정]을 다시 클릭하세요. 5. [계정 이름 수정]을 클릭하여 입력 후 수정하세요.
'타오바오' 무료 빨간 봉투 환불은 가능한가요?
May 08, 2024 am 08:16 AM
타오바오에서 쇼핑할 때 무료 빨간 봉투를 사용하여 할인 혜택을 누리는 경우가 많습니다. 그런데 환불이 필요한 경우 이 무료 빨간 봉투가 반환됩니까? 이 질문에 대한 답을 살펴보겠습니다. 타오바오 무료 빨간봉투는 환불되나요? 상황에 따라 빨간봉투를 받았을 때, 상품을 교환하기 전에는 활성화하려는 빨간봉투가 활성화되지 않은 상태로 사용할 수 없습니다. 일시적으로 구매하신 상품 수령이 확인될 때까지 기다리시면 활성화가 필요한 빨간 봉투를 이용하실 수 있습니다. 무료 빨간 봉투 사용 후 제품에 문제가 있어 반품이 필요한 경우, 빨간 봉투 반품은 실제 상황에 따라 판단되어야 합니다. 1. 환불 규정 11. 환불이 이후에 발생하는 경우 빨간 봉투를 사용한 경우, 빨간 봉투가 비례하여 반환됩니다. 2. 연체되지 않은 경우, 반송된 빨간봉투의 사용기간은 연체된 경우 7일 이내에 발급됩니다.
권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트
Apr 03, 2024 am 11:55 AM
얼굴 검출 및 인식 기술은 이미 상대적으로 성숙하고 널리 사용되는 기술입니다. 현재 가장 널리 사용되는 인터넷 응용 언어는 JS입니다. 웹 프런트엔드에서 얼굴 감지 및 인식을 구현하는 것은 백엔드 얼굴 인식에 비해 장점과 단점이 있습니다. 장점에는 네트워크 상호 작용 및 실시간 인식이 줄어 사용자 대기 시간이 크게 단축되고 사용자 경험이 향상된다는 단점이 있습니다. 모델 크기에 따라 제한되고 정확도도 제한됩니다. js를 사용하여 웹에서 얼굴 인식을 구현하는 방법은 무엇입니까? 웹에서 얼굴 인식을 구현하려면 JavaScript, HTML, CSS, WebRTC 등 관련 프로그래밍 언어 및 기술에 익숙해야 합니다. 동시에 관련 컴퓨터 비전 및 인공지능 기술도 마스터해야 합니다. 웹 측면의 디자인으로 인해 주목할 가치가 있습니다.
