className: 'rng-view-tabs',\r
\r
events: {\r
- 'click ul a': '_onTabTitleClicked' \r
+ 'click ul a, i': '_onTabTitleClicked'\r
},\r
\r
- initialize: function() {\r
+ initialize: function(options) {\r
+ this.options = options || {};\r
this.template = _.template(mainTemplate),\r
this.handleTemplate = _.template(handleTemplate);\r
this.contents = {};\r
tabBar: this.$('.rng-view-tabs-tabBar'),\r
content: this.$('.rng-view-tabs-content')\r
}\r
+ \r
+ if(this.options.stacked) {\r
+ this.nodes.tabBar.addClass('nav-stacked nav-pills').removeClass('nav-tabs');\r
+ }\r
+ return this;\r
},\r
\r
addTab: function(title, slug, content) {\r
if(this.contents[slug])\r
return false;\r
this.contents[slug] = content;\r
- this.nodes.tabBar.append(this.handleTemplate({title:title, slug: slug}));\r
+ \r
+ var text = (typeof title === 'string') ? title : (title.text || '');\r
+ var icon = title.icon || null;\r
+ \r
+ this.nodes.tabBar.append(this.handleTemplate({text: text, icon: icon, slug: slug}));\r
if(!this.selectedTab)\r
this.selectTab(slug);\r
},\r
this.nodes.tabBar.find('.active').removeClass('active');\r
this.nodes.tabBar.find('a[href="#'+slug+'"]').parent().addClass('active');\r
\r
+ var prevSlug = this.selectedTab;\r
this.selectedTab = slug;\r
- this.trigger('tabSelected', slug);\r
+ this.trigger('tabSelected', {slug: slug, prevSlug: prevSlug});\r
}\r
},\r
\r
+ getAsView: function() {\r
+ return this.$el;\r
+ },\r
+ \r
+ getCurrentSlug: function() {\r
+ return this.selectedTab;\r
+ },\r
+ \r
/* Events */\r
\r
_onTabTitleClicked: function(e) {\r
e.preventDefault();\r
- var slug = $(e.target).attr('href').substr(1);\r
+ var target = $(e.target);\r
+ if(target.is('i'))\r
+ target = target.parent();\r
+ var slug = target.attr('href').substr(1);\r
this.selectTab(slug);\r
}\r
});\r