来自 关于计算机 2019-09-04 19:49 的文章
当前位置: 六合联盟网 > 关于计算机 > 正文

js完毕网页多级级联菜单代码,js模拟Tmall网的三

正文实例陈说了js完成网页多级级联菜单。分享给我们供咱们参谋。具体如下:

本文实例呈报了js模拟天猫网的家家户户选择菜单达成格局。分享给我们供大家参谋。具体如下:

这是我们在网页上时不经常会看到的级联菜单特效,可是这几个代码是由JS来达成,将级联菜单中的内容保留在了JS数组中,为了页面雅观,这次还美化了一下报表边框,全部看起来更和煦实用了,多级的下拉菜单对网页设计来讲相比实用。

这是一款基于js模拟Taobao网的多重采取菜单代码,那款菜单是效仿天猫商城网的,是很早时候的天猫商城网,今后早就远非了,本款菜单可以像级联菜单那样一级超级的精选数据,最后明确出多少。

运作效果如下图所示:

运行效果截图如下:

图片 1

图片 2

在线演示地址如下:

在线演示地址如下:

现实代码如下:

切切实实代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>多级级联菜单</title>
<script type="text/javascript">
var arr2 = new Array(4);
arr2["数码设备"] = new Array("数码相机","打印机");
arr2["家用电器"] = new Array("电视机","电冰箱");
arr2["礼品工艺"] = new Array("鲜花","彩带");
function removeinfo(classMenu){//将下拉框各选项清空
 for (var i=0; i < classMenu.options.length; i++){
 classMenu.options[i]=null;
 }
}
function changeMenu(classList,classMenu){
 removeinfo(classMenu)
 for (var i=0; i < classList.length; i++){
 classMenu[i]=new Option(classList[i],classList[i]);
 }
}
</script>
</head>
<body style="font-size:12px">
<table width="487" height="333" border="0" align="center" cellpadding="0" cellspacing="0">
 <tr>
 <td align="center" valign="top"><br>
 <br>
 <br>
 <br> <br> <table width="86%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#6699CC">
 <form name="form1">
 <tr bgcolor="#FFFFFF">
  <td height="22" align="right">所属类别:</td>
  <td height="22" align="left"><select name="类别" id="类别" onChange="changeMenu(arr2[document.form1.类别.options[document.form1.类别.selectedIndex].text],document.form1.分类);">
  <option selected>数码设备</option>
  <option>家用电器</option>
  <option>礼品工艺</option>
  </select>
  <select name="分类" id="分类">
  <option>数码相机</option>
  <option>打印机</option>
  </select></td>
 </tr>
 <tr bgcolor="#FFFFFF">
  <td height="22" align="right">商品名称:</td>
  <td height="22" align="left"><input name="商品名称" type="text" id="商品名称" size="30" maxlength="50"></td>
 </tr>
 <tr bgcolor="#FFFFFF">
  <td height="22" align="right">会员价:</td>
  <td height="22" align="left"><input name="会员价" type="text" id="会员价" size="10"></td>
 </tr>
 <tr bgcolor="#FFFFFF">
  <td height="22" align="right">提供厂商:</td>
  <td height="22" align="left"><input name="提供厂商" type="text" id="提供厂商" size="30" maxlength="50"></td>
 </tr>
 <tr bgcolor="#FFFFFF">
  <td height="22" align="right">商品简介:</td>
  <td height="22" align="left"><textarea name="商品简介" cols="35" rows="4" id="商品简介"></textarea></td>
 </tr>
 <tr bgcolor="#FFFFFF">
  <td height="22" align="right">商品数量:</td>
  <td height="22" align="left"><input name="商品数量" type="text" id="商品数量" size="10"></td>
 </tr>
 <tr bgcolor="#FFFFFF">
  <td height="22" colspan="2" align="center"><input name="add" type="submit" id="add2" value="添 加">
 
 <input type="reset" name="Submit2" value="重 置"></td>
 </tr>
 </form>
 </table></td>
 </tr>
</table>
</body>
</html>
<!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(//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程序设计有着扶助。

梦想本文所述对我们的javascript程序设计具备帮忙。

您恐怕感兴趣的稿子:

  • JS实多级联合浮动下拉菜单类,轻便完毕省市区联合浮动菜单!
  • js左侧多级菜单动态的缓慢解决方案
  • JS简单落实多元Select联合浮动菜单功能代码
  • JavaScript多级下拉菜单代码(简单实用)
  • JS+CSS实现的简要折叠展开多级菜单功能
  • javascript落到实处在下拉列表中彰显多级树形菜单的秘诀
  • JS多级连动菜单
  • JS模拟的QQ面板上的多元可开展的菜谱
  • js模拟Taobao网的一连串接纳菜单达成情势
  • 基于JavaScript实现多元菜单功用

您恐怕感兴趣的篇章:

  • JS实多级联合浮动下拉菜单类,轻易实现省市区联合浮动菜单!
  • js左边多级菜单动态的施工方案
  • JS简单落到实处多元Select联动菜单成效代码
  • JavaScript多级下拉菜单代码(轻巧实用)
  • JS+CSS落成的简便折叠展开多级菜单功效
  • javascript落实在下拉列表中显得多级树形菜单的方法
  • JS多级连动菜单
  • js落成网页多级级联菜单代码
  • JS模拟的QQ面板上的多元可开展的菜单
  • 基于JavaScript落成多种菜单作用

本文由六合联盟网发布于关于计算机,转载请注明出处:js完毕网页多级级联菜单代码,js模拟Tmall网的三

关键词: