# Navigation

**Repository Path**: codetofuture/Navigation

## Basic Information

- **Project Name**: Navigation
- **Description**: 导航插件，立志于方便开发者使用，现在是刚开始阶段，希望有志者共同来研发前端插件
- **Primary Language**: JavaScript
- **License**: GPL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2016-02-28
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Navigation组件

###Navigation简介
- 组件刚开始研制，如果有什么意见或者创意请留言，我们会收下您宝贵的意见继续研制大家喜欢的功能性组件
- 目前团队人紧缺，如果有志同道合的盟友，欢迎您的参加
- 我们并不会局限于前端组件的研制，如果有好的想法，对于原生态组件的开发或者后台服务器定制，都可以进行研发

###Navigation功能介绍
- 整个文档会有5个js文件，分别为global.js,namespace.js,nav.js,parseUI.js,widget.js,详细的依赖注释文档都会给出
- global.js是全局暴露变量及方法，namespace.js命名空间，parseUI.js是解析组件，widget.js是组件封装
- 加载顺序为namespace.js -> global.js -> widget.js ->nav.js ->parseUI.js

###Navigation调用方式
- 组件声明式格式

~~~ html
<div id="nav" ui-widget-type="Navigation" ui-widget-attr='{"steps":["首页","公司简介","关于我们","联系我们","集群","11"]}'>
</div>
~~~
<small><code>注意：</code></small> id设置为nav后会自动注入到组件中，后面第三步可以直接调用组件暴露的方法；ui-widget-type是自定义标签
设为固定的Navigation类型，而ui-widget-attr里面是JSON格式的数据，设置后页面解析后会自动展示出相对应的数据
- 解析组件

~~~ javascript
;(function(){
    wh.ui.initPage();
})();
~~~
- 如果页面进行刷新后可以调用selectStep方法来定位

~~~ javascript
;(function(){
    wh.ui.widgetMgr.byId('nav').setSelectStep(1);
})();
~~~