lxm_front/eruda
1
0
Fork 0
mirror of https://github.com/liriliri/eruda.git synced 2026-03-24 09:48:37 +08:00
Code Issues Projects Releases Wiki Activity

Dev: Nav bottom bar animation

Browse Source
This commit is contained in:
surunzi
2016-05-25 20:27:28 +08:00
parent 1f57e45922
commit ccb7bb054e
6 changed files with 26 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/DevTools/DevTools.es6
View File

@@ -160,7 +160,7 @@ export default class DevTools extends util.Emitter
}
_initNavBar()
{
this._navBar = new NavBar(this._$el.find('.eruda-nav-bar ul'));
this._navBar = new NavBar(this._$el.find('.eruda-nav-bar'));
this._navBar.on('showTool', (name) => this.showTool(name));
}
}

2
src/DevTools/DevTools.hbs
View File

@@ -1,4 +1,4 @@
<div class="eruda-dev-tools">
<div class="eruda-nav-bar"><ul></ul></div>
<div class="eruda-nav-bar"></div>
<div class="eruda-tools"></div>
</div>

20
src/DevTools/NavBar.es6
View File

@@ -9,6 +9,9 @@ export default class NavBar extends util.Emitter
require('./NavBar.scss');
this._$el = $el;
$el.html('<ul></ul><div class="eruda-bottom-bar"></div>');
this._$ul = $el.find('ul');
this._$bottomBar = $el.find('.eruda-bottom-bar');
this._len = 0;
this._bindEvent();
@@ -16,13 +19,13 @@ export default class NavBar extends util.Emitter
add(name)
{
this._len++;
this._$el.prepend(`<li class="${name}">${name}</li>`);
this._$ul.prepend(`<li class="${name}">${name}</li>`);
this._resetWidth();
}
remove(name)
{
this._len--;
this._$el.find(`li.${name}`).remove();
this._$ul.find(`li.${name}`).remove();
this._resetWidth();
}
destroy()
@@ -31,15 +34,16 @@ export default class NavBar extends util.Emitter
}
activeTool(name)
{
var $el = this._$el;
var self = this;
$el.find('li').each(function ()
this._$ul.find('li').each(function (idx)
{
var $this = util.$(this);
if ($this.text() === name)
{
$this.addClass('eruda-active');
self._$bottomBar.css({left: ITEM_WIDTH * idx});
} else
{
$this.rmClass('eruda-active');
@@ -48,15 +52,17 @@ export default class NavBar extends util.Emitter
}
_resetWidth()
{
this._$el.css({width: this._len * 69});
this._$ul.css({width: this._len * ITEM_WIDTH});
}
_bindEvent()
{
var self = this;
this._$el.on('click', 'li', function ()
this._$ul.on('click', 'li', function ()
{
self.emit('showTool', util.$(this).text());
});
}
}
}
const ITEM_WIDTH = 69;

10
src/DevTools/NavBar.scss
View File

@@ -30,9 +30,17 @@
color: #fff;
opacity: 1;
background: $blue-light;
border-bottom: 3px solid #fff;
}
}
}
.bottom-bar {
transition: left .3s;
height: 3px;
background: #fff;
position: absolute;
bottom: 0;
left: 0;
width: 69px;
}
}
}