Em Tab Components

by amindunited

HTML

<link rel="stylesheet" href="https://rawgithub.com/malihu/malihu-custom-scrollbar-plugin/master/jquery.mCustomScrollbar.css" />

<!-- SCRIPTS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.2.0/ember.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-toggles/2.0.4/toggles.min.js"></script>
<script scr="https://rawgithub.com/malihu/malihu-custom-scrollbar-plugin/master/js/minified/jquery.mousewheel.min.js"></script>
<script src="https://rawgithub.com/malihu/malihu-custom-scrollbar-plugin/master/js/minified/jquery.mCustomScrollbar.min.js"></script>
<button id="ready">ready</button>
<!-- TEMPLATES -->
<script type="text/x-handlebars" data-template-name="application">
    <h1>App</h1>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
    <h2>Index</h2>
    <div class="module_section">
        {{render next2Go}}
    </div>
</script>    
<script type="text/x-handlebars" data-template-name="next2Go">
    <h3>Next to Go</h3>
    <a {{action addContent }}>Add More Content</a>
    {{tabs-module tabs=tabs currentContent=currentContent selected="selected"}}
</script>
<script type="text/x-handlebars" data-template-name="components/tabs-module">
    <div class="clearfix">{{tab-selectors tabs=tabs}}</div>
    <div class="clearfix">{{tab-content currentContent=currentContent}}</div>
</script>

<script type="text/x-handlebars" data-template-name="components/tab-selectors">
    <ul class="tabs">
        {{#each tab in tabs}}
            <li class="clearfix" {{action "selected" tab target="parentView"}}>{{tab.name}}</li>
        {{/each}}
    </ul>
    
</script>

<script type="text/x-handlebars" data-template-name="components/tab-content">
    <div>{{currentContent.name}}</div>
    
    <div class="tab-content">
        <div class="scroll-wrap">
            {{#each event in currentContent.events}}
            <div...

CSS

.module_section {
    width: 85%;
    margin-left:auto;
    margin-right: auto;
}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

ul.tabs {
    list-stlye-type: none;
    display:block;
    clear: both;
}
ul.tabs li {
    list-stlye-type: none;
    float: left;
    padding: 5px;
    background-color: rgb(145, 188, 126);
    border-right: inset 1px rgba(95, 102, 91, .5);
    border-left: inset 1px rgba(212, 224, 206, .5);
    text-align: center;
    min-width: 60px;
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 1px black;
}
ul.tabs li:first-of-type {
    border-top-left-radius:5px;
    border-left: none;
}
ul.tabs li:last-of-type {
    border-top-right-radius:5px;
    border-right: none;
}


.tab_content_table {
    /*float: left;*/
    display: inline-block;
    border-right: inset 1px rgba(212, 224, 206, .5); 
}
.tab_content_table th {
    background-color: #717171;
    color: white;
    
}
.tab_content_table td {
    background-color: #e9e9e9;
    background: rgb(238,238,238); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */

    padding: 3px 5px;
    vertical-align: middle;
 ...

JavaScript

window.App = App = Em.Application.create({
    LOG_TRANSITIONS: true,
    LOG_VIEW_LOOKUPS: true,
    LOG_ACTIVE_GENERATION: true,
    LOG_BINDINGS: true,
});

App.IndexRoute = Em.Route.extend({
    model: function(){
        return {};//n2j_racing.events;
    },
    hmm: function(){
        console.log("in hmm function");
        return "mooooooo";
    }
});
App.Next2GoRoute = Em.Route.extend({
    model: function(){
        return {"bam":"margerra"};//n2j_racing.events;
    },
    hmm: function(){
        console.log("in hmm function");
        return "mooooooo";
    }
});
App.Next2Go = Em.Object.extend();
App.Next2GoController = Em.Controller.extend({
    tabs: [{
        name:'All',
        events: [
            { name: 'racing_event_01',
            selections: [
                    {name:"selection_01", price:"1.2"},
                    {name:"selection_02", price:"3.2"},
                    {name:"selection_03", price:"7"},
                    {name:"selection_04", price:"12"},
                    {name:"selection_05", price:"19"}
                ]
            },
            {name: 'racing_event_02',
            selections: [
                    {name:"selection_01", price:"44"},
                    {name:"selection_02", price:"0.8"},
                    {name:"selection_03", price:"3"},
                    {name:"selection_04", price:"32"},
                    {name:"selection_05", price:"1.1"}
                ]
            },
            {name: 'racing_event_03',
            selections: [
                    {name:"selection_01", price:"2"},
                    {name:"selection_02", price:"1.8"},
                    {name:"selection_03", price:"6"},
                    {name:"selection_04", price:"9"},
                    {name:"selection_05", price:"3"}
                ]
            }
        ]
    }, 
           {name:'List'}, 
           {name:'Horse'}, 
           {name:'Grey'}, 
           {name:'Harness'}, 
           {name:'Tubbies'}
          ],
...