bettertabs 1.3.6 → 1.4
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +1 -0
- data/CHANGELOG.md +67 -2
- data/Gemfile +2 -1
- data/Gemfile.lock +6 -0
- data/README.md +37 -26
- data/app/assets/javascripts/jquery.bettertabs.js +4 -4
- data/app/assets/javascripts/jquery.bettertabs.js.coffee +9 -9
- data/app/assets/javascripts/jquery.bettertabs.min.js +2 -2
- data/app/helpers/bettertabs_helper.rb +16 -15
- data/doc/EXAMPLES.md +41 -27
- data/doc/JAVASCRIPTS-DEV-GUIDE.md +6 -3
- data/lib/bettertabs.rb +14 -1
- data/lib/bettertabs/bettertabs_builder.rb +49 -33
- data/lib/bettertabs/configuration.rb +10 -0
- data/lib/bettertabs/version.rb +2 -2
- data/spec/dummy/app/controllers/bettertabs_controller.rb +10 -7
- data/spec/dummy/app/views/bettertabs/_mixed.html.haml +3 -1
- data/spec/dummy/app/views/bettertabs/_tab_content.html.haml +4 -1
- data/spec/dummy/app/views/bettertabs/mixed_with_erb.html.erb +4 -1
- data/spec/dummy/app/views/bettertabs/only_content_block.html.haml +12 -0
- data/spec/dummy/app/views/bettertabs/static.html.haml +5 -2
- data/spec/dummy/app/views/layouts/application.html.erb +6 -5
- data/spec/dummy/config/initializers/bettertabs.rb +6 -0
- data/spec/requests/bettertabs_spec.rb +46 -22
- data/spec/spec_helper.rb +5 -1
- metadata +78 -61
- data/.rvmrc +0 -1
- data/doc/CHANGELOG.md +0 -63
data/.gitignore
CHANGED
data/CHANGELOG.md
CHANGED
@@ -1,3 +1,68 @@
|
|
1
|
-
|
1
|
+
Bettertabs Changelog
|
2
|
+
====================
|
2
3
|
|
3
|
-
|
4
|
+
### v1.4 (2012-06-18) ###
|
5
|
+
|
6
|
+
* Upgrade notes
|
7
|
+
* The bettertabs helper no longer generates javascript inline to apply the jquery pluging. If you update you need to add the javascript yourself (something like `jQuery('.bettertabs').bettertabs();` in your application.js file), or you can add an initializer to set the attach_jquery_bettertabs_inline option to true (see README).
|
8
|
+
* Add possibility to define default options (only attach_jquery_bettertabs_inline for now) in an initializer, https://github.com/agoragames/bettertabs/pull/6. Thanks (@manuelmeurer). Then set the attach_jquery_bettertabs_inline option to false by default.
|
9
|
+
* Allow to include content blocks that do not have tabs with `tab.only_content_block`. Inspired by https://github.com/agoragames/bettertabs/pull/7 by (@manuelmeurer)
|
10
|
+
* Add option :locals on tab definition. https://github.com/agoragames/bettertabs/pull/9. Thanks (@pdf)
|
11
|
+
* Add option :list_html_options to allow specifying :html_options for the :ul element, https://github.com/agoragames/bettertabs/pull/10. Thanks (@pdf)
|
12
|
+
|
13
|
+
### v1.3.6 (2012-03-12) ###
|
14
|
+
|
15
|
+
* Adds support for Rails 3.2, https://github.com/agoragames/bettertabs/pull/3. Thanks (@jlee42).
|
16
|
+
|
17
|
+
### v1.3.5 (2011-09-13) ###
|
18
|
+
|
19
|
+
* Add 'active' class to the link element inside the active tag as well as the li element (so it is now more easy to style)
|
20
|
+
* When tab-type is ajax, mark the first active link as content-loaded-already to not be loaded again when click later
|
21
|
+
* Ajax error handling: when .load() callback returns a textStatus 'error', the browser is reloaded to better show the error
|
22
|
+
* Bugfix: include other params if present in the default tab link url
|
23
|
+
|
24
|
+
### v1.3 (2011-09-12) ###
|
25
|
+
|
26
|
+
* Gem converted into a Rails 3.1 Engine that uses the asset pipeline to serve the jquery.bettertabs plugin
|
27
|
+
* Test dummy app converted to Rails 3.1
|
28
|
+
|
29
|
+
### v1.2.3 (2011-06-23) ###
|
30
|
+
|
31
|
+
* Tested with Rails 3.0.9 and HAML 3.1.2
|
32
|
+
* Bugfix on the bettertabs helper inline script, avoid to add it as an HTML attribute
|
33
|
+
|
34
|
+
### v1.2.1 (2011-05-02) ###
|
35
|
+
|
36
|
+
* Bugfix on the bettertabs helper inline script
|
37
|
+
|
38
|
+
### v1.2 (2011-05-02) ###
|
39
|
+
|
40
|
+
* Added :attach_jquery_bettertabs_inline option to the helper, defaults to true. If false, do not render the inline script that activates the plugin.
|
41
|
+
* Bettertabs jQuery plugin improvement:
|
42
|
+
* Exposed the change_browser_url method to global access in jQuery.Bettertabs.change_browser_url(url), so it can be used and overwritten by other scripts
|
43
|
+
* Created the jQuery.Bettertabs.select_tab(bettertabs_id, tab_id) method to easily select a tab from other scripts
|
44
|
+
* Improved the README.md JavaScript section with more clear examples
|
45
|
+
|
46
|
+
### v1.1 (2011-04-28) ###
|
47
|
+
|
48
|
+
* Added :ajax_url option to tab builder, defaults to :url plus the ajax=true param to prevent browser cache issues.
|
49
|
+
* bettertabs helper :class html_option replace the 'bettertabs' default class instead of adding it (there was no way to remove that class).
|
50
|
+
* Bugfix: don't add .hidden CSS class to non active tabs (it should only be added to non active content).
|
51
|
+
* Documentation improvement:
|
52
|
+
* Added jquery.bettertabs documentation (REAMDE.md)
|
53
|
+
* Added some CSS examples and documentation (lib/bettertabs/stylesheets/README.md)
|
54
|
+
* README.md review and clean-up, moved examples to EXAMPLES.md.
|
55
|
+
* Added Routes examples (README.md)
|
56
|
+
* Added bettertabs helper documentation (params and options in the method comment)
|
57
|
+
|
58
|
+
### v1.0 (2011-04-22) ###
|
59
|
+
|
60
|
+
* bettertabs rails helper, with static, link and ajax tabs
|
61
|
+
* jquery.bettertabs plugin, that activate the clicked tab, loads ajax content and change the url using HTML history.replaceState() javascript method.
|
62
|
+
* README.md documentation improved with examples
|
63
|
+
* Rails3 (ruby 1.9.2) test application (in the test folder) with some use cases and some basic rspec tests.
|
64
|
+
|
65
|
+
### v0.0.1 (2011-03-31) ###
|
66
|
+
|
67
|
+
* Initial development and structure for the gem
|
68
|
+
* Initial documentation (README.md file)
|
data/Gemfile
CHANGED
data/Gemfile.lock
CHANGED
@@ -51,6 +51,7 @@ GEM
|
|
51
51
|
treetop (~> 1.4.8)
|
52
52
|
mime-types (1.17.2)
|
53
53
|
multi_json (1.1.0)
|
54
|
+
nokogiri (1.5.2)
|
54
55
|
polyglot (0.3.3)
|
55
56
|
rack (1.4.1)
|
56
57
|
rack-cache (1.2)
|
@@ -100,6 +101,10 @@ GEM
|
|
100
101
|
polyglot
|
101
102
|
polyglot (>= 0.3.1)
|
102
103
|
tzinfo (0.3.32)
|
104
|
+
webrat (0.7.3)
|
105
|
+
nokogiri (>= 1.2.0)
|
106
|
+
rack (>= 1.0)
|
107
|
+
rack-test (>= 0.5.3)
|
103
108
|
|
104
109
|
PLATFORMS
|
105
110
|
ruby
|
@@ -109,3 +114,4 @@ DEPENDENCIES
|
|
109
114
|
jquery-rails
|
110
115
|
rails (>= 3.1.0)
|
111
116
|
rspec-rails
|
117
|
+
webrat
|
data/README.md
CHANGED
@@ -24,7 +24,7 @@ The bettertabs gem includes a dummy test app, that is used for development (to e
|
|
24
24
|
|
25
25
|
* [Try online the demo app](http://bettertabs-demo.herokuapp.com)
|
26
26
|
* Or to run it on your machine:
|
27
|
-
|
27
|
+
|
28
28
|
$ git clone git://github.com/agoragames/bettertabs.git
|
29
29
|
$ cd bettertabs
|
30
30
|
/bettertabs$ bundle install
|
@@ -32,11 +32,9 @@ The bettertabs gem includes a dummy test app, that is used for development (to e
|
|
32
32
|
|
33
33
|
|
34
34
|
## Requirements: ##
|
35
|
-
* Ruby 1.9
|
36
|
-
* Rails 3.1
|
37
|
-
*
|
38
|
-
|
39
|
-
Anyway you can use bettertabs without javascript (or use your own javascript handler) since the bettertabs helper only generates the appropriate markup.
|
35
|
+
* Ruby 1.9
|
36
|
+
* Rails 3.1 or higher
|
37
|
+
* jQuery 1.3 or higher (but bettertabs also works without javascript)
|
40
38
|
|
41
39
|
|
42
40
|
## Install ##
|
@@ -56,6 +54,21 @@ Or if you prefer the compressed version:
|
|
56
54
|
|
57
55
|
This works the same way as [jquery-rails](https://github.com/rails/jquery-rails); you don't need to copy-paste the javascript code in your app because it will be served using the Asset Pipeline.
|
58
56
|
|
57
|
+
Use the bettertabs helper to define your view (see usage and examples below).
|
58
|
+
|
59
|
+
And finally, apply the javascript behavior to the generated markup. For this, you can simply add a line of jQuery in your application.js file to apply the bettertabs jquery plugin to the bettertabs helper generated markup:
|
60
|
+
|
61
|
+
jQuery('.bettertabs').bettertabs(); // apply bettertabs to any element with the bettertabs css class
|
62
|
+
|
63
|
+
You can instead avoid this line of javascript by allowing the helper to add inline javascript along with the generated markup. For that you can create an initializer (e.g. `app/config/initializers/bettertabs.rb`) to change the default configuration:
|
64
|
+
|
65
|
+
Bettertabs.configure do |config|
|
66
|
+
# Render a Javascript snippet to initialize the tabs automatically after rendering the tabs.
|
67
|
+
# This requires that you include jQuery before the tabs are rendered.
|
68
|
+
# Default: false
|
69
|
+
# config.attach_jquery_bettertabs_inline = true
|
70
|
+
end
|
71
|
+
|
59
72
|
## Usage and examples ##
|
60
73
|
|
61
74
|
Bettertabs supports three kinds of tabs:
|
@@ -63,6 +76,7 @@ Bettertabs supports three kinds of tabs:
|
|
63
76
|
* **Link Tabs**: Loads only the active tab contents; when click on another tab, go to the specified URL. No JavaScript needed.
|
64
77
|
* **Static Tabs**: Loads all content of all static tabs, but only show the active content; when click on another tab, activate its related content. When JavaScript disabled, it behaves like *link tabs*.
|
65
78
|
* **Ajax Tabs**: Loads only the active tab contents; when click on another tab, loads its content via ajax and show. When JavaScript disabled, it behaves like *link tabs*.
|
79
|
+
* **Only Content**: You can also add a block of content that is always visible (with no tab)
|
66
80
|
|
67
81
|
An usage example should be self explanatory (using HAML, but it also works with ERB and other template systems):
|
68
82
|
|
@@ -70,9 +84,9 @@ An usage example should be self explanatory (using HAML, but it also works with
|
|
70
84
|
= tab.static :general, 'My Profile' do
|
71
85
|
%h2 General Info
|
72
86
|
= show_user_general_info(@user)
|
73
|
-
|
74
|
-
= tab.ajax :friends, :partial => 'shared/friends'
|
75
|
-
|
87
|
+
|
88
|
+
= tab.ajax :friends, :partial => 'shared/friends', :locals => { :user => @user }
|
89
|
+
|
76
90
|
= tab.link :groups do
|
77
91
|
= render :partial => 'groups/user_groups', :locals => { :user => @user }
|
78
92
|
|
@@ -86,7 +100,7 @@ The option `:selected_tab` specifies the default selected tab, when the page is
|
|
86
100
|
* [Bettertabs CSS reference guide](https://github.com/agoragames/bettertabs/blob/master/doc/STYLESHEETS-GUIDE.md)
|
87
101
|
* [Bettertabs helper](https://github.com/agoragames/bettertabs/blob/master/app/helpers/bettertabs_helper.rb) (params and options)
|
88
102
|
* [Test Dummy Rails 3.1 application](https://github.com/agoragames/bettertabs/tree/master/spec/dummy) that has some usage examples
|
89
|
-
|
103
|
+
|
90
104
|
|
91
105
|
## Tabs Routes ##
|
92
106
|
|
@@ -102,7 +116,7 @@ in a view accessible by a route like this:
|
|
102
116
|
|
103
117
|
match 'profile/:nickname', :to => 'profiles#lookup', :as => 'profile'
|
104
118
|
|
105
|
-
When you go to `/profile/dude`, your tabs links will have the following hrefs:
|
119
|
+
When you go to `/profile/dude`, your tabs links will have the following hrefs:
|
106
120
|
|
107
121
|
* :general tab href: `/profile/dude?profile_tabs_selected_tab=general`
|
108
122
|
* :friends tab href: `/profile/dude?profile_tabs_selected_tab=friends`
|
@@ -117,8 +131,8 @@ So now the tabs links will point to the following URLs:
|
|
117
131
|
|
118
132
|
* :general tab href: `/profile/dude/general`
|
119
133
|
* :friends tab href: `/profile/dude/friends`
|
120
|
-
|
121
|
-
|
134
|
+
|
135
|
+
|
122
136
|
## JavaScript with the jquery.bettertabs plugin #
|
123
137
|
|
124
138
|
The bettertabs helper will generate the needed markup that has an inline script at the bottom:
|
@@ -132,7 +146,7 @@ You can see the jquery.bettertabs source code in the github repo:
|
|
132
146
|
* [CoffeeScript version](https://github.com/agoragames/bettertabs/raw/master/app/assets/javascripts/jquery.bettertabs.js.coffee)
|
133
147
|
* [JavaScript (generated by coffee) version](https://github.com/agoragames/bettertabs/raw/master/app/assets/javascripts/jquery.bettertabs.js)
|
134
148
|
* [Compressed JavaScript](https://github.com/agoragames/bettertabs/raw/master/app/assets/javascripts/jquery.bettertabs.min.js)
|
135
|
-
|
149
|
+
|
136
150
|
The plugin defines one single jQuery method `jQuery(selector).bettertabs();` that is applied to the generated markup.
|
137
151
|
|
138
152
|
This script will take the tab type from each tab link `data-tab-type` attribute (that can be "link", "static" or "ajax"), and will match each tab with its content using the tab link `data-show-content-id` attribute, that is the id of the related content.
|
@@ -159,7 +173,7 @@ You can interact with the bettertabs widget in the following ways:
|
|
159
173
|
* **Hook some behavior when a tab is clicked**: attach a 'click' handler to the tab link or use any of the provided custom events.
|
160
174
|
* **Show a loading clock while ajax is loading**: or any other kind of feedback to the user, use any of the provided custom events. You can also handle it styling the CSS class `.ajax-loading` that is added to the ajax tab link while ajax content is loading (see the [Styles Reference Guide](https://github.com/agoragames/bettertabs/blob/master/doc/STYLESHEETS-GUIDE.md))
|
161
175
|
* **Change the browser URL**: in the same way the plugin does when a tab is clicked, use `jQuery.Bettertabs.change_browser_url(new_url);`
|
162
|
-
|
176
|
+
|
163
177
|
Custom events that are attached to each tab content:
|
164
178
|
|
165
179
|
* *'bettertabs-before-deactivate'*: fired on content that is active and will be deactivated
|
@@ -175,7 +189,7 @@ Usage example of custom events:
|
|
175
189
|
$("#profile_tabs_friends_content").bind('bettertabs-after-activate', function(){
|
176
190
|
alert('friends content is visible');
|
177
191
|
});
|
178
|
-
|
192
|
+
|
179
193
|
// Display the $('#loading-clock') element while ajax tabs are loading
|
180
194
|
$("#profile_tabs").bind('bettertabs-before-ajax-loading', function(){
|
181
195
|
$('#loading-clock').show();
|
@@ -187,26 +201,23 @@ Usage example of custom events:
|
|
187
201
|
## CSS Styles ##
|
188
202
|
|
189
203
|
Bettertabs provides a rails helper to generate HTML and a jQuery plugin as JavaScript, but not any CSS styles because those are very different for each project and can not be abstracted into a common purpose CSS stylesheet.
|
190
|
-
|
204
|
+
|
191
205
|
Perhaps the most important CSS rule here is to define `display: none;` for `div.content.hidden`, because contents are never hidden using the jquery.hide() method or similar. The jquery.bettertabs plugin just adds the `.active` class to the active tab and active content, and the `.hidden` class to the non active content. You will need to use a CSS rule like this:
|
192
206
|
|
193
207
|
div.bettertabs div.content.hidden { display: none; }
|
194
208
|
|
195
209
|
Use the [Bettertabs CSS Guidelines](https://github.com/agoragames/bettertabs/blob/master/doc/STYLESHEETS-GUIDE.md) to get a stylesheet that you can use as a starting point.
|
196
210
|
|
211
|
+
## Changelog ##
|
197
212
|
|
198
|
-
|
199
|
-
|
213
|
+
See the [CHANGELOG](https://github.com/agoragames/bettertabs/blob/master/CHANGELOG.md) file.
|
214
|
+
|
215
|
+
## Contributing to bettertabs ##
|
216
|
+
|
217
|
+
* Check out the latest master to make sure the feature hasn't been implemented or the bug hasn't been fixed yet
|
200
218
|
* Check out the issue tracker to make sure someone already hasn't requested it and/or contributed it
|
201
219
|
* Fork the project
|
202
220
|
* Start a feature/bugfix branch
|
203
221
|
* Commit and push until you are happy with your contribution
|
204
222
|
* Make sure to add tests for it. This is important so I don't break it in a future version unintentionally.
|
205
223
|
* Please try not to mess with the Rakefile, version, or history. If you want to have your own version, or is otherwise necessary, that is fine, but please isolate to its own commit so I can cherry-pick around it.
|
206
|
-
|
207
|
-
|
208
|
-
## Future work ##
|
209
|
-
|
210
|
-
* Try to make it compatible with ruby 1.8.x
|
211
|
-
* Improve tests to check the JavaScript code (Jasmine, Evergreen, Capybara, whatever)
|
212
|
-
|
@@ -1,11 +1,11 @@
|
|
1
1
|
(function() {
|
2
2
|
/*!
|
3
3
|
jQuery Bettertabs Plugin
|
4
|
-
version: 1.
|
4
|
+
version: 1.4 (Mar-12-2012)
|
5
5
|
@requires jQuery v1.3 or later
|
6
|
-
|
6
|
+
|
7
7
|
Examples and documentation at: https://github.com/agoragames/bettertabs
|
8
|
-
|
8
|
+
|
9
9
|
Copyright (c) 2011 Mario Izquierdo (tothemario@gmail.com)
|
10
10
|
Dual licensed under the MIT and GPL licenses:
|
11
11
|
http://www.opensource.org/licenses/mit-license.php
|
@@ -38,7 +38,7 @@
|
|
38
38
|
wrapper = $(this);
|
39
39
|
tabs = wrapper.find('ul.tabs > li');
|
40
40
|
tabs_links = wrapper.find('ul.tabs > li > a');
|
41
|
-
tabs_contents = wrapper.children('.content');
|
41
|
+
tabs_contents = wrapper.children('.content:not(.content-only-block)');
|
42
42
|
tabs_and_contents = tabs.add(tabs_contents);
|
43
43
|
active_tab_link = tabs_links.filter('.active');
|
44
44
|
if (tab_type_of(active_tab_link) === 'ajax') {
|
@@ -1,10 +1,10 @@
|
|
1
1
|
###!
|
2
2
|
jQuery Bettertabs Plugin
|
3
|
-
version: 1.
|
3
|
+
version: 1.4 (Mar-12-2012)
|
4
4
|
@requires jQuery v1.3 or later
|
5
|
-
|
5
|
+
|
6
6
|
Examples and documentation at: https://github.com/agoragames/bettertabs
|
7
|
-
|
7
|
+
|
8
8
|
Copyright (c) 2011 Mario Izquierdo (tothemario@gmail.com)
|
9
9
|
Dual licensed under the MIT and GPL licenses:
|
10
10
|
http://www.opensource.org/licenses/mit-license.php
|
@@ -28,7 +28,7 @@ $.Bettertabs =
|
|
28
28
|
# so better not to use pushState (because we can't safely revert to previous state), replaceState just works fine.
|
29
29
|
if history? and history.replaceState?
|
30
30
|
history.replaceState null, document.title, url
|
31
|
-
|
31
|
+
|
32
32
|
# jQuery.Bettertabs.select_tab(bettertabs_id, tab_id) => click on the tab_id link of the bettertabs_id widget
|
33
33
|
select_tab: (bettertabs_id, tab_id) ->
|
34
34
|
$("##{tab_id}_#{bettertabs_id}_tab a").click()
|
@@ -38,13 +38,13 @@ $.fn.bettertabs = ->
|
|
38
38
|
wrapper = $(this)
|
39
39
|
tabs = wrapper.find 'ul.tabs > li'
|
40
40
|
tabs_links = wrapper.find 'ul.tabs > li > a'
|
41
|
-
tabs_contents = wrapper.children '.content'
|
41
|
+
tabs_contents = wrapper.children '.content:not(.content-only-block)'
|
42
42
|
tabs_and_contents = tabs.add tabs_contents
|
43
43
|
active_tab_link = tabs_links.filter '.active'
|
44
|
-
|
44
|
+
|
45
45
|
# When tab-type is ajax, mark the first active link as content-loaded-already to not be loaded again when click later
|
46
46
|
active_tab_link.data('content-loaded-already', yes) if tab_type_of(active_tab_link) is 'ajax'
|
47
|
-
|
47
|
+
|
48
48
|
tabs_links.click (event) ->
|
49
49
|
this_link = $(this)
|
50
50
|
unless tab_type_of(this_link) is 'link'
|
@@ -64,10 +64,10 @@ $.fn.bettertabs = ->
|
|
64
64
|
previous_active_tab_content.trigger 'bettertabs-after-deactivate'
|
65
65
|
this_tab_content.trigger 'bettertabs-after-activate'
|
66
66
|
$.Bettertabs.change_browser_url this_link.attr('href')
|
67
|
-
|
67
|
+
|
68
68
|
previous_active_tab_content.trigger 'bettertabs-before-deactivate'
|
69
69
|
this_tab_content.trigger 'bettertabs-before-activate'
|
70
|
-
|
70
|
+
|
71
71
|
if tab_type_of(this_link) is 'ajax' and not this_link.data('content-loaded-already')?
|
72
72
|
this_link.addClass('ajax-loading')
|
73
73
|
this_tab_content.trigger 'bettertabs-before-ajax-loading'
|
@@ -1,7 +1,7 @@
|
|
1
1
|
(function(){
|
2
2
|
/*!
|
3
3
|
jQuery Bettertabs Plugin
|
4
|
-
version: 1.
|
4
|
+
version: 1.4 (Mar-12-2012)
|
5
5
|
@requires jQuery v1.3 or later
|
6
6
|
|
7
7
|
Examples and documentation at: https://github.com/agoragames/bettertabs
|
@@ -11,4 +11,4 @@
|
|
11
11
|
http://www.opensource.org/licenses/mit-license.php
|
12
12
|
http://www.gnu.org/licenses/gpl.html
|
13
13
|
*/
|
14
|
-
var d,f,c,b,a,e;d=jQuery;a="data-tab-type";b="data-show-content-id";f="data-ajax-url";e=function(g){return g.attr(a)};c=function(g){return g.attr(b)};d.Bettertabs={change_browser_url:function(g){if((typeof history!=="undefined"&&history!==null)&&(history.replaceState!=null)){return history.replaceState(null,document.title,g)}},select_tab:function(h,g){return d("#"+g+"_"+h+"_tab a").click()}};d.fn.bettertabs=function(){this.each(function(){var g,i,k,h,j,l;l=d(this);i=l.find("ul.tabs > li");j=l.find("ul.tabs > li > a");h=l.children(".content");k=i.add(h);g=j.filter(".active");if(e(g)==="ajax"){g.data("content-loaded-already",true)}return j.click(function(p){var r,s,o,n,q,m;n=d(this);if(e(n)!=="link"){p.preventDefault();q=n.parent();if(!q.hasClass("active")&&!n.hasClass("ajax-loading")){m=h.filter("#"+(c(n)));s=i.filter(".active");o=h.filter(".active");r=function(){i.removeClass("active");j.removeClass("active");h.removeClass("active").addClass("hidden");q.addClass("active");n.addClass("active");m.removeClass("hidden").addClass("active");o.trigger("bettertabs-after-deactivate");m.trigger("bettertabs-after-activate");return d.Bettertabs.change_browser_url(n.attr("href"))};o.trigger("bettertabs-before-deactivate");m.trigger("bettertabs-before-activate");if(e(n)==="ajax"&&!(n.data("content-loaded-already")!=null)){n.addClass("ajax-loading");m.trigger("bettertabs-before-ajax-loading");return m.load(n.attr(f),function(u,v,t){if(v==="error"){return window.location=n.attr("href")}else{n.removeClass("ajax-loading");n.data("content-loaded-already",true);m.trigger("bettertabs-after-ajax-loading");return r()}})}else{return r()}}}})});return this}}).call(this);
|
14
|
+
var d,f,c,b,a,e;d=jQuery;a="data-tab-type";b="data-show-content-id";f="data-ajax-url";e=function(g){return g.attr(a)};c=function(g){return g.attr(b)};d.Bettertabs={change_browser_url:function(g){if((typeof history!=="undefined"&&history!==null)&&(history.replaceState!=null)){return history.replaceState(null,document.title,g)}},select_tab:function(h,g){return d("#"+g+"_"+h+"_tab a").click()}};d.fn.bettertabs=function(){this.each(function(){var g,i,k,h,j,l;l=d(this);i=l.find("ul.tabs > li");j=l.find("ul.tabs > li > a");h=l.children(".content:not(.content-only-block)");k=i.add(h);g=j.filter(".active");if(e(g)==="ajax"){g.data("content-loaded-already",true)}return j.click(function(p){var r,s,o,n,q,m;n=d(this);if(e(n)!=="link"){p.preventDefault();q=n.parent();if(!q.hasClass("active")&&!n.hasClass("ajax-loading")){m=h.filter("#"+(c(n)));s=i.filter(".active");o=h.filter(".active");r=function(){i.removeClass("active");j.removeClass("active");h.removeClass("active").addClass("hidden");q.addClass("active");n.addClass("active");m.removeClass("hidden").addClass("active");o.trigger("bettertabs-after-deactivate");m.trigger("bettertabs-after-activate");return d.Bettertabs.change_browser_url(n.attr("href"))};o.trigger("bettertabs-before-deactivate");m.trigger("bettertabs-before-activate");if(e(n)==="ajax"&&!(n.data("content-loaded-already")!=null)){n.addClass("ajax-loading");m.trigger("bettertabs-before-ajax-loading");return m.load(n.attr(f),function(u,v,t){if(v==="error"){return window.location=n.attr("href")}else{n.removeClass("ajax-loading");n.data("content-loaded-already",true);m.trigger("bettertabs-after-ajax-loading");return r()}})}else{return r()}}}})});return this}}).call(this);
|
@@ -9,13 +9,13 @@ module BettertabsHelper
|
|
9
9
|
# - tab.static :tab2_id, 'Tab2', options2
|
10
10
|
# - tab.ajax :tab3_id, 'Tab3', options3
|
11
11
|
#
|
12
|
-
# === bettertabs
|
12
|
+
# === bettertabs arguments
|
13
13
|
# * bettertabs_id: will be used as html id of the wrapper element, and as part of the inner ids.
|
14
14
|
# Note: is usually better to use a Symbol (with underscores) here to avoid problems defining routes.
|
15
15
|
# * options:
|
16
|
-
# * :selected_tab => tab_id of the default selected tab.
|
17
|
-
# This is overriden by the appropiate param params[:"#{bettertabs_id}_selected_tab"],
|
18
|
-
# so any tab can be selected using the URL parmas.
|
16
|
+
# * :selected_tab => tab_id of the default selected tab. Alias :selected
|
17
|
+
# This is overriden by the appropiate param params[:"#{bettertabs_id}_selected_tab"],
|
18
|
+
# so any tab can be selected using the URL parmas.
|
19
19
|
# :selected_tab only defines which tab is selected when no {bettertabs_id}_selected_tab param is present.
|
20
20
|
# * :render_only_active_content => if true, this helper renders only the selected tab contents (no wrapper, no tabs, only content).
|
21
21
|
# Default to true only if controller.request.xhr? or params[:ajax].present? (true when its an ajax request).
|
@@ -24,22 +24,22 @@ module BettertabsHelper
|
|
24
24
|
# * :id => html id attribute of the wrapper element. By default is the bettertabs_id
|
25
25
|
# * Any other option will be used as wrapper elmenet html attribute.
|
26
26
|
#
|
27
|
-
# ==== tab builder
|
27
|
+
# ==== tab builder arguments
|
28
28
|
# Tab builder descriptor:
|
29
29
|
# tab.link(tab_id, options={}, &block)
|
30
30
|
# tab.link(tab_id, tab_text, options={}, &block)
|
31
31
|
#
|
32
|
-
#
|
33
|
-
# * tab_id: the tab item html id will be "#{tab_id}_#{bettertabs_id}_tab",
|
32
|
+
# Arguments:
|
33
|
+
# * tab_id: the tab item html id will be "#{tab_id}_#{bettertabs_id}_tab",
|
34
34
|
# and the content wrapper id will be "#{tab_id}_#{bettertabs_id}_content".
|
35
35
|
# Also the tab_id is used to identify this tab in the bettertabs :selected_tab option.
|
36
|
-
# * tab_text:
|
36
|
+
# * tab_text: content of the tab link. Defaults to tab_id.to_s.titleize
|
37
37
|
# * options:
|
38
38
|
# * :partial => Partial to render as content. Defaults to *tab_id*, but if &block given it captures the block instead of render partial.
|
39
|
-
#
|
39
|
+
# * :locals => Hash of local variables for the partial.
|
40
40
|
# * :url => href of the tab link. For link tabs, this is the href to go when click.
|
41
41
|
# For ajax and static tabs, this is the url to replace in the browser when click (HTML5 history.replaceState()), and also the url
|
42
|
-
# to use if JavaSciprt is disabled.
|
42
|
+
# to use if JavaSciprt is disabled.
|
43
43
|
# Defaults to { :"#{bettertabs_id}_selected_tab" => tab_id }, that is the current URL plus the selected tab param.
|
44
44
|
# * :ajax_url => used as data-ajax-url html5 attribute in the link tab, that will be used in the jquery.bettertabs plugin as ajax href where to
|
45
45
|
# make the ajax request to get the tab content.
|
@@ -49,16 +49,17 @@ module BettertabsHelper
|
|
49
49
|
#
|
50
50
|
def bettertabs(bettertabs_id, options={})
|
51
51
|
bettertabs_id = bettertabs_id.to_s
|
52
|
-
selected_tab_id = params[:"#{bettertabs_id}_selected_tab"] || options.delete(:selected_tab)
|
53
|
-
options[:class] ||=
|
52
|
+
selected_tab_id = params[:"#{bettertabs_id}_selected_tab"] || options.delete(:selected_tab) || options.delete(:selected)
|
53
|
+
options[:class] ||= ''
|
54
|
+
options[:class] += ' bettertabs'
|
54
55
|
options[:id] ||= bettertabs_id
|
55
56
|
options[:render_only_active_content] = controller.request.xhr? unless options.include?(:render_only_active_content)
|
56
|
-
attach_jquery_bettertabs_inline = options.include?(:attach_jquery_bettertabs_inline) ? options.delete(:attach_jquery_bettertabs_inline) :
|
57
|
+
attach_jquery_bettertabs_inline = options.include?(:attach_jquery_bettertabs_inline) ? options.delete(:attach_jquery_bettertabs_inline) : Bettertabs.configuration.attach_jquery_bettertabs_inline
|
57
58
|
builder = BettertabsBuilder.new(bettertabs_id, self, selected_tab_id, options)
|
58
59
|
yield(builder)
|
59
60
|
b = builder.render
|
60
61
|
b += javascript_tag("jQuery(function($){ $('##{options[:id]}').bettertabs(); });") if attach_jquery_bettertabs_inline
|
61
62
|
b
|
62
63
|
end
|
63
|
-
|
64
|
-
end
|
64
|
+
|
65
|
+
end
|
data/doc/EXAMPLES.md
CHANGED
@@ -41,7 +41,7 @@ In partial `app/views/home/_mytabs.html.erb`:
|
|
41
41
|
<%= tab.static :about, 'Who am I?', :partial => '/shared/about' %>
|
42
42
|
<%= tab.static :contact_me %>
|
43
43
|
<% end %>
|
44
|
-
|
44
|
+
|
45
45
|
|
46
46
|
The :about and :contact_me tabs will get the content from the referenced partials. Put any content there, for example:
|
47
47
|
|
@@ -53,7 +53,7 @@ In partial `app/views/home/_contact_me.html.erb`:
|
|
53
53
|
|
54
54
|
<h2>How to contact me:<h2/>
|
55
55
|
<p><%= @contact_info.inspect %></p>
|
56
|
-
|
56
|
+
|
57
57
|
In controller `app/controllers/home_controller.rb`:
|
58
58
|
|
59
59
|
class HomeController < ApplicationController
|
@@ -79,21 +79,21 @@ Ajax tabs perform an asynchronous call to get the content before showing it. Giv
|
|
79
79
|
supposing the bettertabs_id is :mytabs, it will generate the following markup for the tab item:
|
80
80
|
|
81
81
|
<li id="home_mytabs_tab">
|
82
|
-
<a data-tab-type="ajax"
|
83
|
-
data-show-content-id="home_mytabs_content"
|
84
|
-
data-ajax-url="/home/ajax_tab"
|
82
|
+
<a data-tab-type="ajax"
|
83
|
+
data-show-content-id="home_mytabs_content"
|
84
|
+
data-ajax-url="/home/ajax_tab"
|
85
85
|
href="/home/index">
|
86
86
|
Home
|
87
87
|
</a>
|
88
88
|
</li>
|
89
|
-
|
89
|
+
|
90
90
|
The attributes *data-tab-type*, *data-show-content-id* and *data-ajax-url* will be used by the jquery.bettertabs plugin.
|
91
91
|
|
92
92
|
So here there are two important options:
|
93
93
|
|
94
94
|
* :url => The tag link href. Is used to change the browser url (html5 browsers only) and as url when JavaScript is off. Default to current url plus the param `#{bettertabs_id}_selected_tab=#{tab_id}`.
|
95
95
|
* :ajax_url => Defaults to :url plus the param `ajax=true`. Is used to perform the ajax request.
|
96
|
-
|
96
|
+
|
97
97
|
Both options have a default value, so if you just write:
|
98
98
|
|
99
99
|
tab.ajax :home
|
@@ -101,9 +101,9 @@ Both options have a default value, so if you just write:
|
|
101
101
|
supposing the bettertabs_id is :mytabs, and the current url is '/home', it will generate the following markup for the tab item:
|
102
102
|
|
103
103
|
<li id="home_mytabs_tab">
|
104
|
-
<a data-tab-type="ajax"
|
105
|
-
data-show-content-id="home_mytabs_content"
|
106
|
-
data-ajax-url="/home?mytabs_selected_tab=home&ajax=true"
|
104
|
+
<a data-tab-type="ajax"
|
105
|
+
data-show-content-id="home_mytabs_content"
|
106
|
+
data-ajax-url="/home?mytabs_selected_tab=home&ajax=true"
|
107
107
|
href="/home?mytabs_selected_tab=home">
|
108
108
|
Home
|
109
109
|
</a>
|
@@ -135,7 +135,7 @@ In partial `app/views/home/_mytabs.html.erb`:
|
|
135
135
|
<%= tab.ajax :about, 'Who am I?', :partial => '/shared/about' %>
|
136
136
|
<%= tab.ajax :contact_me %>
|
137
137
|
<% end %>
|
138
|
-
|
138
|
+
|
139
139
|
**Note** that the only difference between this example and the *static tabs example* is to use `tab.ajax` declaration instead of `tab.static`.
|
140
140
|
|
141
141
|
Partials `app/views/shared/_about.html.erb` and `app/views/home/_contact_us.html.erb` (same as in the *static tabs example*).
|
@@ -156,7 +156,7 @@ In controller `app/controllers/home_controller.rb`, you can load only the needed
|
|
156
156
|
when 'contact_us' then
|
157
157
|
@contact_info = { :address => 'The Hell', :telephone => '666'}
|
158
158
|
end
|
159
|
-
|
159
|
+
|
160
160
|
# When ajax, render only the selected tab content (handled by bettertabs helper)
|
161
161
|
render :partial => 'mytabs' and return if request.xhr? # you can also check if params[:ajax].present?
|
162
162
|
end
|
@@ -177,36 +177,50 @@ Since the *mytabs* partial just contains the bettertabs helper, and bettertabs h
|
|
177
177
|
* to send the link to other person and he/she will open the selected tab
|
178
178
|
* Easily change the behavior of a tab to be `ajax`, `static` or `link`. It always work.
|
179
179
|
* Keep your views DRY, clean and readable
|
180
|
-
|
181
180
|
|
182
|
-
##
|
181
|
+
## Adding Blocks Of Content with no Tabs
|
182
|
+
|
183
|
+
Sometimes is possible you want to add inline content that has to be always visible, for example if the tabs are a form and you want to show the "save" button, taking advantage of the easy styling:
|
184
|
+
|
185
|
+
<%= bettertabs :mytabs do |tab| %>
|
186
|
+
<%= tab.static :personal_data %>
|
187
|
+
<%= tab.static :credit_card %>
|
188
|
+
<%= tab.static :bonus_fields %>
|
189
|
+
|
190
|
+
<%= tab.only_content_block do %>
|
191
|
+
<%= button_tag 'Save' %>
|
192
|
+
<% end %>
|
193
|
+
|
194
|
+
<% end %>
|
195
|
+
|
196
|
+
## Example using HAML and ruby1.9 ##
|
183
197
|
|
184
198
|
Is easy to mix all types of tabs, and customize them using the provided options:
|
185
|
-
|
186
|
-
= bettertabs :bettertabs_example, :selected_tab => :chooseme, :class => 'bettertabs example' do |tab|
|
187
|
-
|
199
|
+
|
200
|
+
= bettertabs :bettertabs_example, :selected_tab => :chooseme, :class => 'bettertabs example', :list_html_options => {:class => 'list_class'} do |tab|
|
201
|
+
|
188
202
|
= tab.static :simplest_tab, class: 'awesome-tab' do
|
189
203
|
Click this tab to see this content.
|
190
|
-
|
204
|
+
|
191
205
|
= tab.static :chooseme, 'Please, Click me!' # as default, renders partial: 'chooseme'
|
192
|
-
|
206
|
+
|
193
207
|
= tab.static :render_another_partial, partial: 'another_partial'
|
194
|
-
|
208
|
+
|
195
209
|
= tab.link :link_to_another_place, url: go_to_other_place_url # will make a new request
|
196
|
-
|
210
|
+
|
197
211
|
= tab.ajax :cool_ajax, ajax_url: remote_call_path, partial: 'cool_partial'
|
198
212
|
-# In this case, you shoud take care of that remote_call_path is using the same partial: 'cool_partial'
|
199
|
-
|
213
|
+
|
200
214
|
= tab.ajax :album, url: url_for(@album), partial: 'shared/album'
|
201
215
|
-# This one will make the ajax call to the ajax_url: url_for(@album, :ajax => true)
|
202
|
-
|
216
|
+
|
203
217
|
= tab.ajax :ajax_tab, title: 'Content is loaded only once'
|
204
218
|
|
205
219
|
|
206
220
|
## More documentation ##
|
207
221
|
|
208
222
|
* [Main README document](https://github.com/agoragames/bettertabs/blob/master/README.md)
|
209
|
-
* [Bettertabs Styles reference guide](https://github.com/agoragames/bettertabs/blob/master/
|
210
|
-
* [Bettertabs helper](https://github.com/agoragames/bettertabs/blob/master/
|
211
|
-
* [Rails3 test demo application](https://github.com/agoragames/bettertabs/tree/master/
|
212
|
-
* Anyway, don't be afraid of digging into the code, it's very straightforward.
|
223
|
+
* [Bettertabs Styles reference guide](https://github.com/agoragames/bettertabs/blob/master/doc/STYLESHEETS-GUIDE.md)
|
224
|
+
* [Bettertabs helper](https://github.com/agoragames/bettertabs/blob/master/app/helpers/bettertabs_helper.rb) (params and options)
|
225
|
+
* [Rails3 test demo application](https://github.com/agoragames/bettertabs/tree/master/spec/dummy)
|
226
|
+
* Anyway, don't be afraid of digging into the code, it's very straightforward.
|