2 'libs/text!./templates/main.html',
\r
3 'libs/text!./templates/handle.html',
\r
4 'libs/underscore-min',
\r
6 ], function(mainTemplate, handleTemplate, _, Backbone) {
\r
9 var View = Backbone.View.extend({
\r
10 className: 'rng-view-tabs',
\r
13 'click ul a, i': '_onTabTitleClicked'
\r
16 initialize: function(options) {
\r
17 this.options = options || {};
\r
18 this.template = _.template(mainTemplate),
\r
19 this.handleTemplate = _.template(handleTemplate);
\r
21 this.selectedTab = null;
\r
24 render: function() {
\r
25 this.$el.html(this.template());
\r
27 tabBar: this.$('.rng-view-tabs-tabBar'),
\r
28 content: this.$('.rng-view-tabs-content')
\r
31 if(this.options.stacked) {
\r
32 this.nodes.tabBar.addClass('nav-stacked nav-pills').removeClass('nav-tabs');
\r
37 addTab: function(title, slug, content) {
\r
38 if(this.contents[slug])
\r
40 this.contents[slug] = content;
\r
42 var text = (typeof title === 'string') ? title : (title.text || '');
\r
43 var icon = title.icon || null;
\r
45 this.nodes.tabBar.append(this.handleTemplate({text: text, icon: icon, slug: slug}));
\r
46 if(!this.selectedTab)
\r
47 this.selectTab(slug);
\r
50 selectTab: function(slug) {
\r
51 if(slug !== this.selectedTab && this.contents[slug]) {
\r
52 this.trigger('leaving', this.selectedTab);
\r
54 if(this.selectedTab)
\r
55 this.contents[this.selectedTab].detach();
\r
56 this.nodes.content.append(this.contents[slug]);
\r
57 this.nodes.tabBar.find('.active').removeClass('active');
\r
58 this.nodes.tabBar.find('a[href="#'+slug+'"]').parent().addClass('active');
\r
60 var prevSlug = this.selectedTab;
\r
61 this.selectedTab = slug;
\r
62 this.trigger('tabSelected', {slug: slug, prevSlug: prevSlug});
\r
66 getAsView: function() {
\r
72 _onTabTitleClicked: function(e) {
\r
74 var target = $(e.target);
\r
76 target = target.parent();
\r
77 var slug = target.attr('href').substr(1);
\r
78 this.selectTab(slug);
\r