回旧版

我爱导航网_我爱网址导航_网站酷站免费导航,尽在我爱导航!

仿京东导航(双向绑定数据knockout)

双向绑定数据将导航所需数据平铺在架构中,并且循环生成导航列表。
简介:双向绑定数据将导航所需数据平铺在架构中,并且循环生成导航列表。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>仿京东左侧导航(三角函数导航)</title>

<link rel="stylesheet" href="http://7vzt86.com1.z0.glb.clouddn.com/ui.css">

<link rel="stylesheet" href="http://7vzt86.com1.z0.glb.clouddn.com/style.css">

<script src="http://7vzt86.com1.z0.glb.clouddn.com/jquery-1.9.1.min.js"></script>

<script src="http://7vzt86.com1.z0.glb.clouddn.com/jquery.aimmenu.js"></script>

<script src="http://7vzt86.com1.z0.glb.clouddn.com/knockout.js"></script>

<script>

$(function(){

var navData=[

{

title:['家用电器'],

id:'speedMenu'+parseInt(Math.random()*1000),

content:[

{

title:'大家电',

content:['平板电视', '空调', '销售总监', '区域总监', '销售副总', '店长', '招商经理']

},

{

title:'生活电器',

content:["电话销售", "渠道销售", "促销员", "二手房销售", "4S店销售", "会议营销", "奢侈品销售", "营业员"]

},

{

title:'厨房电器',

content:["电商销售","大客户销售","销售工程师","地产销售","金融销售","医药代表","业务员"]

},

{

title:'个护健康',

content:["市场经理","市场专员","品牌推广","市场企划","市场文案","市场活动","网络推广"]

}

]

},

{

title:['家用电器2'],

id:'speedMenu'+parseInt(Math.random()*1000),

content:[

{

title:'大家电2',

content:['平板电视', '空调', '销售总监', '区域总监', '销售副总', '店长', '招商经理']

},

{

title:'生活电器2',

content:["电话销售", "渠道销售", "促销员", "二手房销售", "4S店销售", "会议营销", "奢侈品销售", "营业员"]

},

{

title:'厨房电器2',

content:["电商销售","大客户销售","销售工程师","地产销售","金融销售","医药代表","业务员"]

},

{

title:'个护健康2',

content:["市场经理","市场专员","品牌推广","市场企划","市场文案","市场活动","网络推广"]

}

]

},

{

title:['计算机','互联网','通信/电子'],

id:'speedMenu'+parseInt(Math.random()*1000),

content:[

{

title:'网络运营',

content:['网店客服','SEO','网站推广','网络安全','网络架构','网站维护','网站策划','网站编辑']

},{

title:'程序员',

content:['Web前端','Java','C++','PHP','C','C#','.NET','Node.js','HTML5/CSS3','Android','iOS','Flash']

},{

title:'设计师',

content:['网店美工','UI设计师','VI设计师','网页设计','游戏界面设计','APP设计']

},{

title:'IT管理',

content:['技术总监', '技术经理', '项目总监', '项目经理']

},{

title:'质量检测',

content:['品质经理','系统测试','软件测试','硬件测试']

},{

title:'通信技术',

content:['通信技术','有线传输','无线通信','电信交换','数据通信','移动通信','电信网络','通信电源']

},{

title:'电子电器',

content:['集成电路', 'IC验证', '电子', '电气', '电路/(模拟/数字)', '电声/音响', '半导体技术', '自动控制', '电子软件开发', '嵌入式软件开发', '电池/电源开发', 'FAE 现场应用', '家用电器/数码产品研发', '分析师', '测试', '电子技术研发']

}

]

},

{

title:'销售/客服/技术支持',

id:'speedMenu'+parseInt(Math.random()*1000),

content:[

{

title:'销售管理',

content:['销售主管', '销售经理', '销售总监', '区域总监', '销售副总', '店长', '招商经理']

},

{

title:'坐家等客',

content:["电话销售", "渠道销售", "促销员", "二手房销售", "4S店销售", "会议营销", "奢侈品销售", "营业员"]

},

{

title:'往外跑的',

content:["电商销售","大客户销售","销售工程师","地产销售","金融销售","医药代表","业务员"]

},

{

title:'客服',

content:["售前服务","售后服务","技术支持","呼叫中心"]

}

]

},

{

title:'财务/审计/税务',

id:'speedMenu'+parseInt(Math.random()*1000),

content:[

{

title:'财务',

   content:['首席财务官 CFO','财务总监', '财务经理', '财务/总帐主管','成本会计','固定资产会计','出纳','财务/会计助理','会计文员','财务分析经理/主管','财务分析员']

},

{

},

{

title:'审计税务',

   content:['审计经理/主管','审计专员/助理', '税务经理/税务主管', '税务专员/助理', '统计员']

}

]

},

{

title:'金融/银行/保险',

id:'speedMenu'+parseInt(Math.random()*1000),

content:[

{

title:'金融',

   content:['证券/期货/外汇经纪人','证券分析师', '股票/期货操盘手', '金融/经济研究员','投资/基金项目经理','投资/理财顾问','投资银行业务','融资经理/融资主管','融资专员','拍卖/担保/典当业务','金融产品经理','投资银行财务分析','风险管理/控制']

},

{

},

{

title:'银行',

   content:['行长/副行长','资产评估/分析','风险控制','进出口/信用证结算','清算人员','外汇交易','高级客户经理/客户经理','客户主管/专员','信贷管理','银行柜员','银行卡、电子银行业务推广','个人业务部门经理/主管','个人业务客户经理','公司业务部门经理/主管','公司业务客户经理','综合业务经理/主管','综合业务专员','信审核查','营业部大堂经理','银行客户总监']

},

{

title:'保险',

   content:['保险精算师','保险产品开发/项目策划','保险业务经理/主管','保险代理/经纪人/客户经理','理财顾问/财务规划师','储备经理人','保险核保','保险理赔','保险客户服务/续期管理','保险培训师','保险内勤','契约管理']

}

]

},

{

title:'生产/营运/采购/物流',

id:'speedMenu'+parseInt(Math.random()*1000),

content:[

{

title:'生产营运',

content:['']

},

{

title:'质量安全',

content:['']

},

{

title:'机械能源',

content:['' ]

},

{

title:'汽车制造',

content:['']

},

{

title:'汽车销售',

content:['']

},

{

title:'服装纺织',

content:['']

},

{

title:'贸易',

content:['']

}

]

},

{

title:'生物/制药/医疗/护理',

id:'speedMenu'+parseInt(Math.random()*1000),

content:[

{

title:'制药医疗器械',

content:['']

},

{

title:'化工',

content:['']

},

{

title:'医疗护理',

content:['']

}

]

},

{

title:'广告/市场/媒体/艺术',

id:'speedMenu'+parseInt(Math.random()*1000),

content:[

{

title:'广告',

content:['']

},

{

title:'公关媒介',

content:['']

},

{

title:'市场营销',

content:['']

},

{

title:'影视媒体',

content:['']

},

{

title:'写作出版',

content:['']

},

{

title:'艺术设计',

content:['']

}

]

},

{

title:'建筑/房地产',

id:'speedMenu'+parseInt(Math.random()*1000),

content:[

{

title:'建筑装潢/市政建设',

content:['']

},

{

title:'房地产开发/销售',

content:['']

},

{

title:'房地产中介',

content:['']

},

{

title:'物业管理',

content:['']

}

]

},

{

title:'人事/行政/高级管理',

id:'speedMenu'+parseInt(Math.random()*1000),

content:[

{

title:'人力资源',

content:['']

},

{

title:'高级管理',

content:['']

},

{

title:'行政/后勤',

content:['']

}

]

},

{

title:'咨询/法律/教育/科研',

id:'speedMenu'+parseInt(Math.random()*1000),

content:[

{

title:'咨询/顾问',

content:['']

},

{

title:'律师/法务/合规',

content:['']

},

{

title:'教师',

content:['']

},

{

title:'培训',

content:['']

},

{

title:'科研人员',

content:['']

}

]

},

{

title:'服务业',

id:'speedMenu'+parseInt(Math.random()*1000),

content:[

{

title:'餐饮/娱乐',

content:['']

},

{

title:'酒店/旅游',

content:['']

},

{

title:'美容/健身/体育',

content:['']

},

{

title:'百货/连锁/零售服务',

content:['']

},

{

title:'交通运输服务',

content:['']

},

{

title:'保安/家政',

content:['']

}

]

},

{

title:'公务员/翻译/其他',

id:'speedMenu'+parseInt(Math.random()*1000),

content:[

{

title:'公务员',

content:['']

},

{

title:'翻译',

content:['']

},

{

title:'在校学生',

content:['']

},

{

title:'储备干部/培训生/实习生',

content:['']

},

{

title:'环保',

content:['']

},

{

title:'农林牧渔',

content:['']

},

{

title:'兼职',

content:['']

}

]

},

{

title:'管理岗位',

id:'speedMenu'+parseInt(Math.random()*1000),

content:[

{

title:'总监级',

content:['运营总监','营销总监', '销售总监', '生产总监', '制片总监', '拍摄总监', '创意总监', '技术总监', '执行总监', '财务总监', '设计总监']

},

{

title:'经理级',

content:['运营经理','营销经理', '销售经理', '生产经理', '制片经理', '拍摄经理', '创意经理', '技术经理', '执行经理', '财务经理', '设计经理']

}

]

}

];

ko.applyBindings({navData:navData})

})

</script>

</head>

<body>

<style>

.container .wp .macth_xv_categorys .macth_xv_cat_catlist{display:block;}

</style>

<div class="container clearfix mt-40">

<div class="wp navbar">

<div>

<div>

<!--左侧导航 start-->

<div>

<div>

<h2><a href="###">全部商品分类<b></b></a></h2>

</div>

<div class="macth_xv_cat_catlist ">

<ul data-bind="foreach:navData">

<li data-bind="attr:{'data-submenu-id':$data.id}">

<h3>

<span><i><img src="http://7vzt86.com1.z0.glb.clouddn.com/homeicon.png"></i></span><span><a href="javascript:void(0)" data-bind="text:$data.title"></a></span><s></s>

</h3>

<div data-bind="attr:{'id':$data.id}">

<div>

<ul  data-bind="foreach:$data.content">

<li>

<a href="###" data-bind="text:$data.title"></a>

<ul data-bind="foreach:$data.content">

<li><a href="###" data-bind="text:$data"></a></li>

</ul>

</li>

</ul>

</div>

<div>

<a href="###" target="_blank">

<img src="http://7vzt86.com1.z0.glb.clouddn.com/rightbanner.jpg" style="margin-top: 6px">

</a>

</div>

</div>

</li>

</ul>

</div>

</div>

<!--左侧导航 end-->

<!--中间导航 start-->

<ul>

<li><a href="###">首页</a></li>

<li><a href="###">职场测算</a></li>

<li><a href="###">工资评估</a></li>

<li><a href="###">薪资穿越</a></li>

<li><a href="###">职场生活</a></li>

<li><i></i><a href="###">我要招人</a></li>

<li><a href="###">诚招加盟</a></li>

</ul>

<!--中间导航 end-->

<div>

<div class="macth_xvlogin_list scroll-top">

<div>今日收益榜</div>

<ul>

<li>

<span>张**</span>

<span>简历被购买<strong>27次</strong></span>

<span>收入<strong>108元</strong></span>

</li>

<li>

<span>王**</span>

<span>简历被购买<strong>19次</strong></span>

<span>收入<strong>76元</strong></span>

</li>

<li>

<span>李**</span>

<span>简历被购买<strong>43次</strong></span>

<span>收入<strong>172元</strong></span>

</li>

<li>

<span>赵**</span>

<span>简历被购买<strong>31次</strong></span>

<span>收入<strong>124元</strong></span>

</li>

<li>

<span>何**</span>

<span>简历被购买<strong>29次</strong></span>

<span>收入<strong>116元</strong></span>

</li>

</ul>

</div>

</div>

</div>

</div>

</div>

</div>

<script src="http://7vzt86.com1.z0.glb.clouddn.com/navbar.js"></script>

</body>

</html>


文章来自:我爱导航,未经允许不得转载!:首页 > 教程收藏 > 建站经验 » 仿京东导航(双向绑定数据knockout)

感觉不错,很赞哦! ( )

相关推荐

网友评论