Skip to content

Instantly share code, notes, and snippets.

@magicshui

magicshui/application.coffee

Last active December 31, 2015 10:49
Show Gist options
  • Save magicshui/7975365 to your computer and use it in GitHub Desktop.
Save magicshui/7975365 to your computer and use it in GitHub Desktop.
Download ZIP
nested menu list
Raw
application.coffee
App.ApplicationRoute = Ember.Route.extend
setupController: (controller,model)->
this._super(controller,model)
controller.set('menu',App.Menu.find())
return
Raw
application.hbs
{{render "header" App.HeaderView}}
<section>
<section class="hbox stretch">
{{render "menu" menu}}
<section id="content">
<section class="hbox stretch">
<!-- .aside -->
<aside>
<section class="vbox">
{{show-hiddenbar action-title='修改' title='公司信息' isShowButton=true}}
<section class="scrollable">
<aside class=" bg-white lter b-r">
<section class="vbox">
<section class="scrollable">
{{outlet main-content}}
</section>
</section>
</aside>
</section>
</section>
</aside>
<!-- /.aside -->
<!-- .aside -->
<aside class="aside-lg bg-white b-l hide" id="aside">
<div class="wrapper">
<h4 class="m-t-none">公司信息</h4>
{{outlet hidden-bar}}
</div>
</aside>
<!-- /.aside -->
</section>
<a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen" data-target="#nav"></a>
</section>
<aside class="bg-light lter b-l aside-md hide" id="notes">
<div class="wrapper">Notification</div>
</aside>
</section>
</section>
Raw
index.coffee
App.IndexRoute = Ember.Route.extend()
Raw
menu.coffee
App.Menu = Ember.Object.extend()
App.MenuController = Ember.ArrayController.extend()
App.Menu.reopenClass
find: ->
[
title: '数据总览'
url: '#dashboard'
,
title: '公司管理'
url: 'companys'
childs:
[
title: '公司列表'
url: 'companys'
,
title: '创建公司'
url: 'companys/create'
,
title: '员工账号'
url: 'companys/users'
]
]
App.MenuView = Ember.View.extend
templateName: "menu"
tagName: 'aside'
classNames: ["bg-dark","lter","aside-md","hidden-print"]
didInsertElement: ->
this._super()
$(document).on "click", ".nav-primary a", (e) ->
$this = $(e.target)
$active = undefined
$this.is("a") or ($this = $this.closest("a"))
return if $(".nav-vertical").length
$active = $this.parent().siblings(".active")
$active and $active.find("> a").toggleClass("active") and $active.toggleClass("active").find("> ul:visible").slideUp(200)
($this.hasClass("active") and $this.next().slideUp(200)) or $this.next().slideDown(200)
$this.toggleClass("active").parent().toggleClass "active"
$this.next().is("ul") and e.preventDefault()
console.log($this.href)
App.MenuRoute = Ember.Route.extend
model: ->
App.Menu.find()
Raw
menu.hbs
<section class="vbox">
<header class="header bg-primary lter text-center clearfix">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-dark btn-icon" title="New project"><i class="fa fa-plus"></i></button>
<div class="btn-group hidden-nav-xs">
<button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-toggle="dropdown">
Switch Project
<span class="caret"></span>
</button>
<ul class="dropdown-menu text-left">
<li><a href="#">订阅号</a></li>
<li><a href="#">服务号</a></li>
</ul>
</div>
</div>
</header>
<section class="w-f scrollable" >
<div class="slim-scroll" data-height="auto" data-disable-fade-out="true" data-distance="0" data-size="5px" data-color="#333333">
<nav class="nav-primary ">
<ul class="nav">
{{#each pmenu in controller}}
<li>
<a href="{{ unbound pmenu.url}}">
<i class="fa fa-columns icon">
<b class="bg-warning"></b>
</i>
<span class="pull-right">
<i class="fa fa-angle-down text"></i>
<i class="fa fa-angle-up text-active"></i>
</span>
<span>{{unbound pmenu.title}}</span>
</a>
{{#if pmenu.childs}}
<ul>
{{#each cmenu in pmenu.childs}}
<li>
<a href="#{{unbound cmenu.url}}">
<i class="fa fa-angle-right"></i>
<span>{{unbound cmenu.title}}</span>
</a>
</li>
{{/each}}
</ul>
{{/if}}
</li>
{{/each}}
</ul>
</nav>
</div>
</section>
</section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment