{{tab.content}}
<!DOCTYPE html>
<html>
<head>
<title>mmRouter组件</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="../avalon.js"></script>
<style>
* {word-wrap: break-word;margin:0;padding:0}
body {background: #f9f9f9;font-size: 14px;}
.tb {margin-top: 10px;padding-left: 5px;line-height: 30px;border-bottom: 1px solid #CDCDCD;}
.cl {zoom: 1;}
.cl::after {content: ".";display: block;height: 0px;clear: both;visibility: hidden;}
.contents {width: 862px;margin:30px 0 0 20px;background: #FFF;}
ul li{list-style: none;}
.tb li {float: left;margin: 0 3px -1px 0;}
.tb li {_width: 120px;*width:120px: ;}
a {color: #333;text-decoration: none;}
.tb a {display: block;padding: 0 10px;border: 1px solid #CDCDCD;background: #E5EDF2;}
.tb .a a{border-bottom-color: #fff;background: #FFF;font-weight: 700;}
.tb li {_width:120px;*width:120px;}
a.tbtxt1 {float:left;border-right-width:0;}
a.tbtxt2 {float:left;}
a.tbclose {float:left;border-left-width:0;width:12px;}
</style>
</head>
<body>
<h1>mmRouter综合实例一: avalon.get</h1>
<div class="contents" ms-controller="box">
<ul class="tb cl">
<li ms-repeat="tab.page" ms-class="a:tab.currpage===el.name"><a ms-href="el.url" ms-class-1="tbtxt1:el.name!=='tab1'" ms-class-2="tbtxt2:el.name==='tab1'">{{ el.title }}</a><a ms-if="el.name!='tab1'" ms-click="tab_close(el.name)" href="javascript:;" class="tbclose">X</a></li>
</ul>
<div id="main" class="cl" style="margin:10px 5px 5px 10px;width:500px;height:300px">
<p>{{tab.content}}</p>
</div>
<div>
<a href="#!/tab1">显示tab1</a> <a href="#!/tab2">显示tab2</a> <a href="#!/tab3">显示tab3</a>
</div>
</div>
<script>
require(["mmRouter/mmRouter"], function () {
var model = avalon.define('box', function(vm) {
vm.tab = {currpage:'tab1',content:'tab1', page:[{name:'tab1', title:'选项卡一',url:'#!/tab1'}]};
vm.tab_close = function (tname) {
while(true) {
var l = vm.tab.page.length;
if (l===1) break;
loaded[vm.tab.page[l-1].name] = 0;
if (vm.tab.page[l-1].name===tname) {
vm.tab.page.pop();
break;
} else {
vm.tab.page.pop();
}
}
avalon.router.navigate("/tab1");
vm.tab.currpage = 'tab1';
}
});
var loaded = {};
avalon.router.when(["/nihao/:id"], "/tab:id")
avalon.router.get("/tab1", function(a) {
var page = 'tab1';
model.tab.content = "页面："+page;
model.tab.currpage = page;
});
avalon.router.get("/tab2", function(a) {
var page = 'tab2';
var a = {name:page, title:'选项卡二', url:'#!/tab2'};
if (!loaded[page]) {
loaded[page] = 1;
model.tab.page.push(a);
}
model.tab.content = "页面："+page;
model.tab.currpage = page;
});
avalon.router.get("/tab3", function(a) {
var page = 'tab3';
var a = {name:page, title:'选项卡三', url:'#!/tab3'};
if(!loaded[page]) {
loaded[page] = 1;
model.tab.page.push(a);
}
model.tab.content = "页面："+page;
model.tab.currpage = page;
});
avalon.router.error(function(a) {
avalon.router.navigate("/tab1");
})
avalon.history.start({html5Mode: false});
avalon.scan();
});
</script>
</body>
</html>