JavaScript程序設計基礎教程實訓指導-10-5 實訓案例名稱：制作淘寶式多級選擇菜單_第1頁
JavaScript程序設計基礎教程實訓指導-10-5 實訓案例名稱：制作淘寶式多級選擇菜單_第2頁
JavaScript程序設計基礎教程實訓指導-10-5 實訓案例名稱：制作淘寶式多級選擇菜單_第3頁
JavaScript程序設計基礎教程實訓指導-10-5 實訓案例名稱：制作淘寶式多級選擇菜單_第4頁
JavaScript程序設計基礎教程實訓指導-10-5 實訓案例名稱：制作淘寶式多級選擇菜單_第5頁
已閱讀5頁，還剩1頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

實訓案例名稱：制作淘寶式多級選擇菜單本實例使用JavaScript實現類似淘寶網的多級選擇菜單。涉及的JavaScript語法如下。1．fromCharCode()方法fromCharCode()方法可接受一個指定的Unicode值，然后返回一個字符串。該方法是String的靜態方法，字符串中的每個字符都由單獨的數字Unicode編碼指定。2．event.srcElementevent.srcElement用于設置或獲取觸發事件的對象。引用對象以后，該對象的任何屬性都可以使用。示例代碼如腳本10-5所示。腳本10-5.html<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/

DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><title>JS實現淘寶式多級選擇菜單</title><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><styletype="text/css"media="all">body*{font-size:14px;margin:0;padding:0;}#wrapper{clear:both;width:778px;height:220px;background-color:#FFF;margin-bottom:8px;}#wrapperul{margin:03px00;padding:0;border:1pxsolid#CCC;float:left;width:189px;height:218px;overflow:auto;}#wrapperul.Blank{background-color:#F6F6F6;}#wrapperli{list-style-type:none;width:auto;height:20px;margin:01px!important;margin/**/:01px0-15px;padding:0;border:1pxsolid#FFF;line-height:20px;color:#444;text-indent:3px;cursor:default;}#wrapperli.Selected{background-color:#CAFFC0;border:1pxsolid#0A9800;color:#006623;}#wrapperli.IsParent{background-image:url(/uploads/allimg/1110/publishitem_subcate_arrow.gif);background-position:99%50%;background-repeat:no-repeat;}#wrapperli.RecentUsed{color:#170;}#titleType{clear:both;width:778px;background-color:#FFF;}#titleTypeul{float:left;}#titleTypeli{margin:03px00;float:left;border:1pxsolid#CCC;width:189px;color:#0063C8;font-weight:bold;border-bottom:0px;height:23px;line-height:23px;}</style></head><body><divid="titleType"><ulid="title"><li>請選擇品牌</li><li>請選擇折扣和服務</li><li>請選擇價格區間</li><li>請選擇材質</li></ul></div><divid="wrapper"><ulid="brandType"class="Blank"></ul><ulid="serviceType"class="Blank"></ul><ulid="rangeType"class="Blank"></ul><ulid="quanlityType"class="Blank"></ul></div></body><scriptlanguage="javascript"type="text/javascript"id="commonjs">Atotype.S=String.fromCharCode(2);Atotype.in_array=function(e){varre=newRegExp(this.S+e+this.S);returnre.test(this.S+this.join(this.S)+this.S);}functiongetTriggerNode(e){return(document.all)?event.srcElement:e.target;}functiongetObj(id){returndocument.getElementById(id);}//初始化數據varbrandTypeData=newDataInfo();//品牌數據brandTypeData.addData("與狼共舞",1,'','');brandTypeData.addData("花花公子",2,'','');varserviceTypeData=newDataInfo();//折扣和服務數據serviceTypeData.addData("全球購",1,'','');serviceTypeData.addData("天貓",2,'','');varrangeTypeData=newDataInfo();//價格區間數據rangeTypeData.addData("全球購",1,["0-50","50-120"],[1,2]);rangeTypeData.addData("天貓",2,["0-100","100-200"],[3,4]);varquanlityTypeData=newDataInfo();//材質數據quanlityTypeData.addData("0-50",1,["棉","麻","蠶絲"],[1,2,3]);quanlityTypeData.addData("50-120",2,["薄紗","棉布"],[4,5]);quanlityTypeData.addData("0-100",3,["棉","麻","蠶絲"],[6,7]);quanlityTypeData.addData("100-200",4,["薄紗","棉布"],[8,9]);functionDataNode(){this.parent; this.parentId;this.Children; this.childrenId;}functionDataInfo(){this.mList=newArray();this.ListCount=function(){returnthis.mList.length;}this.GetListObj=function(n){if(n<this.ListCount())returnthis.mList[n];returnnull;}this.addData=function(sParent,sParentId,sChildren,sChildrenID){obj=newDataNode();obj.parent =sParent;obj.parentId=sParentId;obj.children=sChildren;obj.childrenId=sChildrenID;this.mList[this.ListCount()]=obj;}}//構建菜單列表functionbuildMenuList(objName,objData,objSelected){console.log(objName);console.log(objData);console.log(objSelected);//buildMenuList(["rangeType",quanlityTypeData],rangeTypeData,[parentId,0]);varmenuType=getObj(objName[0]);//單擊的當前菜單if(!menuType)return;varstrOutput="";varliClass="";varid=0;varop_txt=newArray();varop_val=newArray();varsub_val=newArray();//子節點數組if(objSelected[0]){//父節點for(i=0;i<objData.ListCount();i++){if(objData.GetListObj(i).parentId==objSelected[0]){//判斷子節點的父級console.log('objSelected[0]='+objSelected[0]);id=i;break;}if(i==objData.ListCount()){menuType.innerHTML="";menuType.className="Blank";returnfalse;}}}if(objName[1]){//說明有子節點,存放子節點的父級idfor(i=0;i<objName[1].ListCount();sub_val.push(objName[1].GetListObj(i++).parentId));}console.log(id);tmpobj=objData.GetListObj(id);//取出當前節點console.log(tmpobj);if(tmpobj.children.length==0){//子節點長度為0for(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;//孩子id}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+='<liid="'+objName[0]+'__'+op_val[i]+'"class="'+liClass+'">'+op_txt[i]+'</li>';liClass='';}menuType.innerHTML=strOutput;strOutput="";menuType.className="";}//菜單切換聯動效果varmenuSelect=[];functionchangeMenu(evnt){varobj=getTriggerNode(evnt);varobjSource=obj;//獲取父節點while(objSource.nodeName!="UL"){objSource=objSource.parentNode;}//切換菜單選中樣式varulId=objSource.id;if(menuSelect[ulId]){menuSelect[ulId].classNa

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論