DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

nav 例子

This commit is contained in:
kmdjs 2015-07-05 10:41:43 +08:00
parent 360ee2b06a
commit a05f6bd8ac
1 changed files with 38 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
example/nav2.html
View File

@ -23,7 +23,7 @@
.nc-nav a {
display: inline-block;
width: 10%;
font-size: 12px;
height: 10px;
border-right: 1px solid #ccc;
@ -39,40 +39,60 @@
}
.nc-nav-tip{
font-size:12px;
font-weight :bold;
font-size:14px;
position:fixed;
bottom:15px;
left:0%;
text-align:center;
}
</style>
</head>
<body style="height:2000px;">
<!--<div class="nc-nav" style="width: 100%; height: 10px; position: absolute;">
<a></a>
<a></a>
</div>-->
<body style="height:3000px;">
<div id="container"></div>
<script src="../dist/nuclear.js"></script>
<script type="text/javascript">
var Nav = $.create({
install:function(){
$(window).on('scroll',function(){
this.updateProgressBar($('body')[0].scrollTop);
}.bind(this))
},
installed:function(){
this.updateProgressBar($('body')[0].scrollTop);
},
updateProgressBar: function (top) {
var i= 0,len=this.option.positions.length;
var index=-1;
var last=this.option.positions[len-1];
if(top>last){
this.option.index=len-1;
return;
}
for(;i<len;i++){
if(top<this.option.positions[i]) {
index=i-1;
break;
}
}
this.option.index=index;
},
scrollTo: function (top) {
$("body").scrollToTop(top);
},
render: function () {
var i = 0, len = this.option.positions.length, pec = 100 / len, linkStr = "";
var i = 0, len = this.option.positions.length, pec = 100 / len, links = "";
for (; i < len; i++) {
linkStr += (i <= this.option.index ? '<a class="nc-nav-active" onclick="scrollTo(' + this.option.positions[i]+ ')"></a>' : '<a></a>');
links += (i <= this.option.index ? '<a class="nc-nav-active" style="width: '+pec+'%;" onclick="scrollTo(' + this.option.positions[i]+ ')"></a>' : '<a style="width: '+pec+'%;" onclick="scrollTo(' + this.option.positions[i]+ ')"></a>');
}
//<div class="nc-nav-tip" style="width:' + pec + '%;">啊啊aaaaaaaaaa啊</div>\
return '<div class="nc-nav">' + linkStr + '</div>';
var tip='<div class="nc-nav-tip" style="left:' + this.option.index*pec + '%;width:' + pec + '%;">'+this.option.lables[this.option.index]+'</div>';
return '<div class="nc-nav">' + tip+links + '</div>';
}
})
new Nav({ index: 2, positions: [100, 500, 1000, 1500, 500, 1200, 1200, 1200, 1200, 1200] }, "body");
new Nav({
index: 0,
positions: [100, 500, 1000, 1500, 2000],
lables:["声明式事件绑定","无限嵌套","圆形进度","布局组件","分页组件"]
}, "body");
</script>
<a href="https://github.com/AlloyTeam/Nuclear" target="_blank" style="position: absolute; right: 0; top: 0;">
<img src="http://alloyteam.github.io/AlloyRenderingEngine/asset/img/github.png" alt="" />
</a>
</body>
</html>
</html>