# polymerDemo

**Repository Path**: hackydh/polymerDemo

## Basic Information

- **Project Name**: polymerDemo
- **Description**: 使用Polymer实现前端导航条
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2014-08-18
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#PolymerDemo

navigation control panel implemented by Polymer

使用[Polymer](http://www.polymer-project.org/)实现前端导航条

实现前端导航条的代码路径在`/app/assets/javascripts/nav_components`

##特性
1.导航条存在屏幕左侧位置，可以点击右侧按钮实现左侧导航条的动画显隐；并且刷新页面导航条的显隐状态是上一次所处的状态。

2.左侧导航条通过树形结构来组织，非叶子节点支持折叠，点击叶子节点可以打开相应的网页，且该叶子节点以及所有其祖先节点都会高亮；导航条的高亮状态会随着URL的不同而不同，换句话说，导航条的折叠和高亮状态和URL地址是绑定在一起的。

3.导航条的树形结构的数据通过JSON文件来提供，实现数据和控件相互独立。

4.导航条控件是通过Polymer实现的自定义HTML标签，具有非常好的可移植性。

##环境运行设置
这里后端框架使用Ruby-on-Rails，运行需要安装[Rails](http://rubyonrails.org/download/)，然后启动Rails:`rails server -p 8080`，最后浏览器打开地址`localhost:8080`会出现截图的样子。

##截图
![ScreenShot](screenshot.png)

##备注
如果打开地址`localhost:8080/home/index`，会有一个精彩的使用Polymer官方实现的例子。

#捐助
如果你觉得对你有帮助，请点击捐助我
 <a href='http://me.alipay.com/hackydh'> <img src='https://img.alipay.com/sys/personalprod/style/mc/btn-index.png' /> </a>