タオバオのマルチレベル選択メニュー実装メソッドのjsシミュレーション

ホームページ

ウェブフロントエンド

jsチュートリアル

タオバオのマルチレベル選択メニュー実装メソッドのjsシミュレーション_javascriptスキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:44 PM

js シミュレーションタオバオメニュー

この記事の例では、淘宝網の多段階選択メニューをシミュレートするjsの実装方法を説明します。皆さんの参考に共有してください。詳細は以下の通りです。

これは、淘宝網をシミュレートする js ベースのマルチレベル選択メニューコードです。このメニューは初期の淘宝網をシミュレートしています。このメニューは、カスケードメニューのようになります。レベルごとに決定し、最終的にデータを決定します。

実行中のエフェクトのスクリーンショットは次のとおりです:

オンラインデモのアドレスは次のとおりです:

http://demo.jb51.net/js/2015/js-ftaovao-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ツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7612

CakePHP チュートリアル

1387

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

136

Related knowledge

タオバオの配送先住所を確認する方法タオバオアプリで注文した商品の配送先住所を確認する方法 Mar 12, 2024 pm 04:00 PM

タオバオアプリは、ショッピングに関するすべての問題を解決します。非常に多くの販売業者と非常に多くの商品が選択を待っています。購入したい商品の種類に関係なく、ここで検索して見つけることができます。誰もが直接注文できるようになります。注文から購入まで、すべての機能を自由に操作できます。注文が正常に完了したら、販売者が商品を出荷し、物流配送を実行するのを待つだけで済みます。非常に便利で多くの、誰もが閲覧することを選択できますこれらの製品の出荷場所を確認し、製品の出荷場所を知ることができます。特に電子製品を購入する場合は、関連する出荷場所の情報を確認して、整備済み機械を購入する際の問題を回避できます。

タオバオの無料赤い封筒 2024 を入手する方法 May 09, 2024 pm 03:22 PM

2024年のタオバオ無料注文イベントは1日3回開催され、誰もが対応する時間に対応する量の商品を注文し、支払う必要があります。無料注文金額は同額の赤い封筒の形で配布されます。次に、2024 年に淘宝網の無料注文の赤い封筒を受け取る方法を紹介します。それを入手します。無料のユーザーの場合、赤い封筒の資格は、アクティベーション状態にあるカードとクーポンのパッケージに発行されます。タオバオのウェブ版には現在カードとクーポンのパッケージがなく、無料注文イベントの当選記録のみが表示されます。カードとクーポンのパッケージは [淘宝網 APP - 私の淘宝網 - 私の権利 - 赤い封筒] にあります。淘宝網の無料赤い封筒を入手する方法 20241. 無料の注文を獲得したユーザーには、有効化を待機している状態のカードとクーポンパッケージに赤い封筒の資格が配布されます。 2. 現在、淘宝網の Web バージョンでは、カードとクーポンのパッケージがあり、無料注文アクティビティの当選記録のみが表示されます。 ;3. カードクーポンパッケージは [淘宝網 APP - 私の淘宝網 - 私の権利 - 赤い封筒] にあります。

タオバオで見知らぬ人からのメッセージを拒否する方法 Mar 02, 2024 am 08:40 AM

タオバオを利用する過程で、見知らぬユーザーからメッセージを受け取ることがあります。知らない人からのメッセージを拒否する設定方法をご紹介します。 1. 携帯電話で淘宝網を開いてインターフェースに入った後、下部の「メッセージ」項目をクリックして切り替え、右上の「+」アイコンをクリックして開きます。 2. アイコンの下にウィンドウが表示されるので、「メッセージ設定」項目をクリックして選択します。 3. メッセージ設定ページに「見知らぬ人チャット設定」があるので、クリックして入力します。 4. 最後に、入力したインターフェイスに「見知らぬ人からのメッセージを拒否する」機能が表示されるので、その後ろにある対応するスイッチボタンをクリックします。ボタンが色に設定されている場合、ボタンがオンになり、タオバオを使用する際に、不明なユーザーからのメッセージが受信されなくなります。

タオバオでパスワードフリー決済をオフにする方法パスワードフリー決済の設定方法を解除する方法。 Mar 12, 2024 pm 12:07 PM

タオバオアプリには非常に多くの機能があります。これらの機能は、誰もがより良いショッピング体験を得ることができるようにするために存在します。多数の製品タイプは、さまざまなユーザーのショッピングニーズを十分に満たすことができます。誰もが本当に望んでいます。あなたは欲しいものを何でも買うことができます。「カテゴリー検索」「直接検索」でも問題ありません。どなたでも安心してネットショッピングをお楽しみいただけます。お得なショッピングサービスをご提供いたします。欲しいものはすべて必ず手に入ります。もちろん、ここで買い物をすると、さまざまな買い物方法が表示され、選択できるようになります。ここでのパスワード不要の支払い機能を好む人もいますし、そうでない人もいます。私はとても気に入っていますが、セキュリティはそれほど高くないと思います. もちろん、誰でもいつでもキャンセルできます。

タオバオで名前を変更する方法 Mar 24, 2024 pm 03:31 PM

名前変更機能を使用すると、ユーザーはタオバオで自分の名前とニックネームを自由に変更できます。一部のユーザーはタオバオで名前を変更する方法がわかりません。マイタオバオの設定でアバターのタオバオアカウントをクリックするだけで変更できます。次に、編集者がお届けします名前とニックネームの変更方法を紹介しますので、まだご存じない方はぜひダウンロードして試してみてください。タオバオの使い方チュートリアルタオバオの名前変更方法答え: マイタオバオの設定でアバターのタオバオアカウントをクリックして変更します詳細: 1. タオバオに入り、右下の[マイタオバオ]をクリックします。 2. 右上の[設定]アイコンをクリックします。 3. アバターをクリックします。 4. もう一度[タオバオアカウント]をクリックします。 5. [アカウント名の変更]をクリックし、入力・変更します。

タオバオで赤い封筒のリマインダーをオフにする方法 Apr 01, 2024 pm 06:25 PM

タオバオは、多くの友人がよく使用するオンラインショッピングソフトウェアです。あなたは通常、タオバオで注文したり、さまざまなものを購入したりします。ユーザーに赤い封筒のリマインダー機能を提供します。これをオフにしたいという友人もいます。急いで PHP 中国語をチェックしてください。ウェブサイトをご覧ください。タオバオで赤い封筒のリマインダーをオフにする手順のリスト 1. タオバオ APP のパーソナルセンターを開き、[設定] ボタンを選択してページに入ります。 2. [メッセージ通知] オプションを見つけて、メッセージプッシュスイッチを選択し、赤い封筒のメッセージを見つけてスイッチをオフにします。 3. または、携帯電話の設定ページから淘宝アプリの通知許可をオフにすることもできます。これにより、淘宝網からのすべてのメッセージはプッシュされず、通知許可をオンにした後にのみ表示されます。 4. 受信するメッセージの種類をユーザーが設定できるため、使いやすくなります。

タオバオでの総消費額の確認方法総消費額の確認方法 Mar 12, 2024 pm 03:07 PM

通常オンラインショッピングをする必要がある場合、私たちは皆、すべてのショッピングニーズを完全に満たすことができるプラットフォームとしてタオバオを選択するでしょう、タオバオにはさまざまな商品のためのリソースが豊富にあり、本当にあらゆる種類の商品が集まっています。このプラットフォームには、多くのカテゴリの製品があり、自分のニーズに合わせて選択できることに誰もが気づきました。欲しいものは何でも購入できるので、誰もが間違いなくここで購入します。多くの製品があり、これらの商品の価格は大きく異なります。これらの買い物記録はすべて保存できるので、誰でもいつでも確認することができて便利です。そこで、ここで何を買い物しているかがわかっている場合は、具体的には何ですか? いくらお金を使いましたか?とても興味があるはずです。以下にお話します。

「タオバオ」の無料紅包の返金は返ってくるのでしょうか？ May 08, 2024 am 08:16 AM

タオバオで買い物をするとき、割引を受けるために無料の赤い封筒をよく使います。しかし、返金が必要な場合、この無料の赤い封筒は返却されるのでしょうか?この質問に対する答えを見てみましょう。タオバオの無料の赤い封筒は返金されますか? 状況によっては、赤い封筒を受け取ったときに、製品を引き換える前に赤い封筒がアクティブ化保留状態になっているため、アクティブ化される赤い封筒は使用できません。購入した製品の受領が確認されるまで一時的に待機し、アクティベートする必要がある赤い封筒を使用できます。無料の赤い封筒を使用した後に製品に問題があり、返品する必要がある場合、赤い封筒の返却は実際の状況に応じて判断する必要があります。 1. 返金ルール 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

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック