bettertabs 1.3 → 1.3.1
Sign up to get free protection for your applications and to get access to all the features.
- data/Gemfile.lock +1 -1
- data/README.md +8 -10
- data/app/assets/javascripts/jquery.bettertabs.js +1 -1
- data/app/assets/javascripts/jquery.bettertabs.js.coffee +1 -1
- data/app/assets/javascripts/jquery.bettertabs.min.js +1 -1
- data/doc/CHANGELOG.md +17 -6
- data/doc/STYLESHEETS-GUIDE.md +61 -5
- data/lib/bettertabs/bettertabs_builder.rb +10 -11
- data/lib/bettertabs/version.rb +1 -1
- metadata +12 -12
data/Gemfile.lock
CHANGED
data/README.md
CHANGED
@@ -10,7 +10,7 @@ Easy for beginners, complete for experts.
|
|
10
10
|
|
11
11
|
## Features ##
|
12
12
|
|
13
|
-
* Rails
|
13
|
+
* Rails Engine that includes:
|
14
14
|
* helper to easily generate tabs and content markup
|
15
15
|
* jQuery plugin to handle the JavaScript behavior
|
16
16
|
* Simplicity: Easy to install, easy to use, easy to update
|
@@ -28,7 +28,7 @@ Easy for beginners, complete for experts.
|
|
28
28
|
## Requirements: ##
|
29
29
|
* Ruby 1.9.2
|
30
30
|
* Rails 3.1
|
31
|
-
* [jquery-
|
31
|
+
* [jquery-rails](https://github.com/rails/jquery-rails) with jQuery 1.3 or higher
|
32
32
|
|
33
33
|
Anyway you can use bettertabs without javascript (or use your own javascript handler) since the bettertabs helper only generates the appropriate markup.
|
34
34
|
|
@@ -39,8 +39,8 @@ Gem dependency. Add bettertabs to your gem file and run `bundle install`.
|
|
39
39
|
|
40
40
|
gem 'bettertabs'
|
41
41
|
|
42
|
-
To include the [jquery.bettertabs plugin](https://github.com/agoragames/bettertabs/
|
43
|
-
add these line to the top of your `app/assets/javascripts/application.js`
|
42
|
+
To include the [jquery.bettertabs plugin](https://github.com/agoragames/bettertabs/blob/master/app/assets/javascripts/jquery.bettertabs.js.coffee)
|
43
|
+
add these line to the top of your `app/assets/javascripts/application.js` (**after** the *jQuery* library):
|
44
44
|
|
45
45
|
//= require jquery.bettertabs
|
46
46
|
|
@@ -48,8 +48,7 @@ Or if you prefer the compressed version:
|
|
48
48
|
|
49
49
|
//= require jquery.bettertabs.min
|
50
50
|
|
51
|
-
This works the same way as [jquery-
|
52
|
-
|
51
|
+
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.
|
53
52
|
|
54
53
|
## Usage and examples ##
|
55
54
|
|
@@ -74,10 +73,9 @@ An usage example should be self explanatory (using HAML, but it also works with
|
|
74
73
|
### More examples and documentation: ###
|
75
74
|
|
76
75
|
* [EXAMPLES document](https://github.com/agoragames/bettertabs/blob/master/doc/EXAMPLES.md)
|
77
|
-
* [Bettertabs
|
76
|
+
* [Bettertabs CSS reference guide](https://github.com/agoragames/bettertabs/blob/master/doc/STYLESHEETS-GUIDE.md)
|
78
77
|
* [Bettertabs helper](https://github.com/agoragames/bettertabs/blob/master/app/helpers/bettertabs_helper.rb) (params and options)
|
79
|
-
* [
|
80
|
-
* Anyway, don't be afraid and dig into the code!
|
78
|
+
* [Test Dummy Rails 3.1 application](https://github.com/agoragames/bettertabs/tree/master/spec/dummy) that has some usage examples
|
81
79
|
|
82
80
|
|
83
81
|
## Tabs Routes ##
|
@@ -184,7 +182,7 @@ Perhaps the most important CSS rule here is to define `display: none;` for `div.
|
|
184
182
|
|
185
183
|
div.bettertabs div.content.hidden { display: none; }
|
186
184
|
|
187
|
-
Use the [Bettertabs
|
185
|
+
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.
|
188
186
|
|
189
187
|
|
190
188
|
## How to help make Bettertabs even Better ##
|
data/doc/CHANGELOG.md
CHANGED
@@ -1,18 +1,29 @@
|
|
1
1
|
Bettertabs Changelog
|
2
2
|
====================
|
3
3
|
|
4
|
-
2011-
|
4
|
+
2011-09-13 Mario Izquierdo Martinez <mizquierdo@majorleaguegaming.com>
|
5
|
+
|
6
|
+
* Tag v1.3.1
|
7
|
+
* Add 'active' class to the link element inside the active tag as well as the li element (more easy to style)
|
8
|
+
|
9
|
+
2011-09-12 Mario Izquierdo Martinez <mizquierdo@majorleaguegaming.com>
|
10
|
+
|
11
|
+
* Tag v1.3
|
12
|
+
* Gem converted into a Rails 3.1 Engine that uses the asset pipeline to serve the jquery.bettertabs plugin
|
13
|
+
* Test dummy app converted to Rails 3.1
|
14
|
+
|
15
|
+
2011-06-23 Mario Izquierdo Martinez <mizquierdo@majorleaguegaming.com>
|
5
16
|
|
6
17
|
* Tag v1.2.3
|
7
18
|
* Tested with Rails 3.0.9 and HAML 3.1.2
|
8
19
|
* Bugfix on the bettertabs helper inline script, avoid to add it as an HTML attribute
|
9
20
|
|
10
|
-
2011-05-02 Mario Izquierdo Martinez <
|
21
|
+
2011-05-02 Mario Izquierdo Martinez <mizquierdo@majorleaguegaming.com>
|
11
22
|
|
12
23
|
* Tag v1.2.1
|
13
24
|
* Bugfix on the bettertabs helper inline script
|
14
25
|
|
15
|
-
2011-05-02 Mario Izquierdo Martinez <
|
26
|
+
2011-05-02 Mario Izquierdo Martinez <mizquierdo@majorleaguegaming.com>
|
16
27
|
|
17
28
|
* Tag v1.2
|
18
29
|
* Added :attach_jquery_bettertabs_inline option to the helper, defaults to true. If false, do not render the inline script that activates the plugin.
|
@@ -21,7 +32,7 @@ Bettertabs Changelog
|
|
21
32
|
* Created the jQuery.Bettertabs.select_tab(bettertabs_id, tab_id) method to easily select a tab from other scripts
|
22
33
|
* Improved the README.md JavaScript section with more clear examples
|
23
34
|
|
24
|
-
2011-04-28 Mario Izquierdo Martinez <
|
35
|
+
2011-04-28 Mario Izquierdo Martinez <mizquierdo@majorleaguegaming.com>
|
25
36
|
|
26
37
|
* Tag v1.1
|
27
38
|
* Added :ajax_url option to tab builder, defaults to :url plus the ajax=true param to prevent browser cache issues.
|
@@ -34,7 +45,7 @@ Bettertabs Changelog
|
|
34
45
|
* Added Routes examples (README.md)
|
35
46
|
* Added bettertabs helper documentation (params and options in the method comment)
|
36
47
|
|
37
|
-
2011-04-22 Mario Izquierdo Martinez <
|
48
|
+
2011-04-22 Mario Izquierdo Martinez <mizquierdo@majorleaguegaming.com>
|
38
49
|
|
39
50
|
* Tag v1.0
|
40
51
|
* bettertabs rails helper, with static, link and ajax tabs
|
@@ -42,7 +53,7 @@ Bettertabs Changelog
|
|
42
53
|
* README.md documentation improved with examples
|
43
54
|
* Rails3 (ruby 1.9.2) test application (in the test folder) with some use cases and some basic rspec tests.
|
44
55
|
|
45
|
-
2011-03-31 Mario Izquierdo Martinez <
|
56
|
+
2011-03-31 Mario Izquierdo Martinez <mizquierdo@majorleaguegaming.com>
|
46
57
|
|
47
58
|
* Tag v0.0.1
|
48
59
|
* Initial development and structure for the gem
|
data/doc/STYLESHEETS-GUIDE.md
CHANGED
@@ -19,7 +19,7 @@ will expand in the following markup (html):
|
|
19
19
|
<div id="profile_tabs" data-initial-active-tab-id="profile_tabs_general_tab" class="bettertabs">
|
20
20
|
<ul class="tabs">
|
21
21
|
<li id="profile_tabs_general_tab" class="active">
|
22
|
-
<a data-tab-type="static" data-show-content-id="profile_tabs" href="/profile/dude/general">General</a>
|
22
|
+
<a class="active" data-tab-type="static" data-show-content-id="profile_tabs" href="/profile/dude/general">General</a>
|
23
23
|
</li>
|
24
24
|
<li id="profile_tabs_friends_tab">
|
25
25
|
<a data-tab-type="ajax" data-show-content-id="profile_tabs" href="/competition/ladder/1234/rules">RULES</a>
|
@@ -42,17 +42,18 @@ So you can use this structure to access any bettertabs widget element (CSS):
|
|
42
42
|
div.bettertabs ul.tabs li { /* tab item */ }
|
43
43
|
div.bettertabs ul.tabs li.active { /* selected tab item */ }
|
44
44
|
div.bettertabs ul.tabs li.active a { /* selected tab link */ }
|
45
|
+
div.bettertabs ul.tabs li a.active { /* selected tab link */ }
|
45
46
|
div.bettertabs ul.tabs li a:link,
|
46
47
|
div.bettertabs ul.tabs li a:visited { /* tab link normal state */ }
|
47
48
|
div.bettertabs ul.tabs li a:hover { }
|
48
49
|
div.bettertabs ul.tabs li a:active { }
|
49
|
-
div.bettertabs ul.tabs li a.ajax-loading { /* tab link while ajax loading */ }
|
50
|
+
div.bettertabs ul.tabs li a.ajax-loading { /* tab link while ajax content is loading */ }
|
50
51
|
|
51
52
|
div.bettertabs div.content { }
|
52
|
-
div.bettertabs div.content.hidden { /* hidden content. Here you
|
53
|
+
div.bettertabs div.content.hidden { /* hidden content. Here you should set the property display: none; */ }
|
53
54
|
div.bettertabs div.content.active { /* active content */ }
|
54
55
|
|
55
|
-
Here you are a
|
56
|
+
Here you are a sample of CSS you can use as example to style up your bettertabs widget:
|
56
57
|
|
57
58
|
div.bettertabs { margin: 1em; width: 500px; }
|
58
59
|
|
@@ -66,7 +67,7 @@ Here you are a simple example of CSS you can use to style up your bettertabs wid
|
|
66
67
|
position: relative; top: 1px;
|
67
68
|
}
|
68
69
|
div.bettertabs ul.tabs li.active { height: 25px; background-color: #eee; border-bottom: none; }
|
69
|
-
div.bettertabs ul.tabs li.active a { color: black; }
|
70
|
+
div.bettertabs ul.tabs li.active a.active { color: black; }
|
70
71
|
|
71
72
|
div.bettertabs ul.tabs li a { font-size: 80%; text-decoration: none; float: left; }
|
72
73
|
div.bettertabs ul.tabs li a:link,
|
@@ -78,3 +79,58 @@ Here you are a simple example of CSS you can use to style up your bettertabs wid
|
|
78
79
|
div.bettertabs div.content { padding: 1em; border: 1px solid #999; background-color: #eee; clear: left; }
|
79
80
|
div.bettertabs div.content.hidden { display: none; }
|
80
81
|
|
82
|
+
|
83
|
+
And this is the same example but written in SASS:
|
84
|
+
|
85
|
+
div.bettertabs
|
86
|
+
margin: 1em
|
87
|
+
width: 500px
|
88
|
+
|
89
|
+
ul.tabs
|
90
|
+
margin: 0
|
91
|
+
padding: 0
|
92
|
+
position: relative
|
93
|
+
|
94
|
+
li
|
95
|
+
background-color: #ccc
|
96
|
+
border: 1px solid #999
|
97
|
+
display: inline
|
98
|
+
float: left
|
99
|
+
height: 24px
|
100
|
+
line-height: 24px
|
101
|
+
list-style: none outside none
|
102
|
+
margin-right: .5em
|
103
|
+
padding-right: .5em
|
104
|
+
padding-left: .5em
|
105
|
+
position: relative
|
106
|
+
top: 1px
|
107
|
+
|
108
|
+
&.active
|
109
|
+
height: 25px
|
110
|
+
background-color: #eee
|
111
|
+
border-bottom: none
|
112
|
+
|
113
|
+
a
|
114
|
+
font-size: 80%
|
115
|
+
text-decoration: none
|
116
|
+
float: left
|
117
|
+
&.active
|
118
|
+
color: black
|
119
|
+
&:link, &:visited
|
120
|
+
color: #444
|
121
|
+
&:hover
|
122
|
+
color: #000
|
123
|
+
&:active
|
124
|
+
color: #933
|
125
|
+
&.ajax-loading
|
126
|
+
color: #666
|
127
|
+
|
128
|
+
div.content
|
129
|
+
padding: 1em
|
130
|
+
border: 1px solid #999
|
131
|
+
background-color: #eee
|
132
|
+
clear: left
|
133
|
+
|
134
|
+
&.hidden
|
135
|
+
display: none
|
136
|
+
|
@@ -1,10 +1,7 @@
|
|
1
1
|
class BettertabsBuilder
|
2
2
|
require 'uri' # from standard library
|
3
3
|
|
4
|
-
|
5
|
-
TAB_TYPE_LINK = :link
|
6
|
-
TAB_TYPE_AJAX = :ajax
|
7
|
-
TAB_TYPES = [TAB_TYPE_STATIC, TAB_TYPE_LINK, TAB_TYPE_AJAX]
|
4
|
+
TAB_TYPES = [:static, :link, :ajax]
|
8
5
|
|
9
6
|
def initialize(bettertabs_id, template, selected_tab_id = nil, options = {})
|
10
7
|
@bettertabs_id = bettertabs_id
|
@@ -19,19 +16,19 @@ class BettertabsBuilder
|
|
19
16
|
|
20
17
|
# Static tabs generator
|
21
18
|
def static(tab_id, *args, &block)
|
22
|
-
get_options(args)[:tab_type] =
|
19
|
+
get_options(args)[:tab_type] = :static
|
23
20
|
self.for(tab_id, *args, &block)
|
24
21
|
end
|
25
22
|
|
26
23
|
# Linked tabs generator
|
27
24
|
def link(tab_id, *args, &block)
|
28
|
-
get_options(args)[:tab_type] =
|
25
|
+
get_options(args)[:tab_type] = :link
|
29
26
|
self.for(tab_id, *args, &block)
|
30
27
|
end
|
31
28
|
|
32
29
|
# Ajax tabs generator
|
33
30
|
def ajax(tab_id, *args, &block)
|
34
|
-
get_options(args)[:tab_type] =
|
31
|
+
get_options(args)[:tab_type] = :ajax
|
35
32
|
self.for(tab_id, *args, &block)
|
36
33
|
end
|
37
34
|
|
@@ -44,9 +41,9 @@ class BettertabsBuilder
|
|
44
41
|
raise "Bettertabs: #{tab_html_id_for(tab_id)} error. Used :partial option and a block of content at the same time." if block_given? and options[:partial]
|
45
42
|
partial = options.delete(:partial) || tab_id.to_s unless block_given?
|
46
43
|
url = options.delete(:url) || { :"#{@bettertabs_id}_selected_tab" => tab_id }
|
47
|
-
tab_type = (options.delete(:tab_type) ||
|
44
|
+
tab_type = (options.delete(:tab_type) || :static).to_sym
|
48
45
|
raise "Bettertabs: #{tab_type.inspect} tab type not supported. Use one of #{TAB_TYPES.inspect} instead." unless TAB_TYPES.include?(tab_type)
|
49
|
-
ajax_url = options.delete(:ajax_url) || url_for_ajax(url) if tab_type ==
|
46
|
+
ajax_url = options.delete(:ajax_url) || url_for_ajax(url) if tab_type == :ajax
|
50
47
|
@selected_tab_id ||= tab_id # defaults to first tab
|
51
48
|
|
52
49
|
if @render_only_active_content
|
@@ -60,7 +57,7 @@ class BettertabsBuilder
|
|
60
57
|
|
61
58
|
# Content
|
62
59
|
content_html_options = { id: content_html_id_for(tab_id), class: "content #{active?(tab_id) ? 'active' : 'hidden'}" }
|
63
|
-
if active?(tab_id) or tab_type ==
|
60
|
+
if active?(tab_id) or tab_type == :static # Only render content for selected tab (static content is always rendered).
|
64
61
|
content = block_given? ? @template.capture(&block) : @template.render(:partial => partial)
|
65
62
|
else
|
66
63
|
content = ''
|
@@ -105,7 +102,9 @@ class BettertabsBuilder
|
|
105
102
|
tag(:li, class: ('active' if tab[:active]), id: tab_html_id_for(tab[:tab_id])) do
|
106
103
|
tab[:html_options][:"data-tab-type"] ||= tab[:tab_type] # for javascript: change click behavior depending on type :static, :link or :ajax
|
107
104
|
tab[:html_options][:"data-show-content-id"] ||= content_html_id_for(tab[:tab_id]) # for javascript: element id to show when select this tab
|
108
|
-
tab[:html_options][:"data-ajax-url"] ||= tab[:ajax_url] if tab[:tab_type] ==
|
105
|
+
tab[:html_options][:"data-ajax-url"] ||= tab[:ajax_url] if tab[:tab_type] == :ajax # for javascript: url to make ajax call
|
106
|
+
tab[:html_options][:class] ||= ''
|
107
|
+
tab[:html_options][:class] += 'active' if tab[:active]
|
109
108
|
@template.link_to(tab[:text], tab[:url], tab[:html_options])
|
110
109
|
end
|
111
110
|
end.join.html_safe
|
data/lib/bettertabs/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: bettertabs
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version:
|
4
|
+
version: 1.3.1
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -9,12 +9,12 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2011-09-
|
12
|
+
date: 2011-09-13 00:00:00.000000000 +02:00
|
13
13
|
default_executable:
|
14
14
|
dependencies:
|
15
15
|
- !ruby/object:Gem::Dependency
|
16
16
|
name: rails
|
17
|
-
requirement: &
|
17
|
+
requirement: &2156493880 !ruby/object:Gem::Requirement
|
18
18
|
none: false
|
19
19
|
requirements:
|
20
20
|
- - ~>
|
@@ -22,10 +22,10 @@ dependencies:
|
|
22
22
|
version: 3.1.0
|
23
23
|
type: :runtime
|
24
24
|
prerelease: false
|
25
|
-
version_requirements: *
|
25
|
+
version_requirements: *2156493880
|
26
26
|
- !ruby/object:Gem::Dependency
|
27
27
|
name: jquery-rails
|
28
|
-
requirement: &
|
28
|
+
requirement: &2156493160 !ruby/object:Gem::Requirement
|
29
29
|
none: false
|
30
30
|
requirements:
|
31
31
|
- - ! '>='
|
@@ -33,10 +33,10 @@ dependencies:
|
|
33
33
|
version: '0'
|
34
34
|
type: :runtime
|
35
35
|
prerelease: false
|
36
|
-
version_requirements: *
|
36
|
+
version_requirements: *2156493160
|
37
37
|
- !ruby/object:Gem::Dependency
|
38
38
|
name: rspec-rails
|
39
|
-
requirement: &
|
39
|
+
requirement: &2156492340 !ruby/object:Gem::Requirement
|
40
40
|
none: false
|
41
41
|
requirements:
|
42
42
|
- - ! '>='
|
@@ -44,10 +44,10 @@ dependencies:
|
|
44
44
|
version: '0'
|
45
45
|
type: :development
|
46
46
|
prerelease: false
|
47
|
-
version_requirements: *
|
47
|
+
version_requirements: *2156492340
|
48
48
|
- !ruby/object:Gem::Dependency
|
49
49
|
name: haml-rails
|
50
|
-
requirement: &
|
50
|
+
requirement: &2156491380 !ruby/object:Gem::Requirement
|
51
51
|
none: false
|
52
52
|
requirements:
|
53
53
|
- - ! '>='
|
@@ -55,7 +55,7 @@ dependencies:
|
|
55
55
|
version: '0'
|
56
56
|
type: :development
|
57
57
|
prerelease: false
|
58
|
-
version_requirements: *
|
58
|
+
version_requirements: *2156491380
|
59
59
|
description: ! 'Bettertabs is a Rails 3.1 engine that adds a helper and jQuery plugin
|
60
60
|
to define the markup and behavior for a tabbed area in a easy and declarative way,
|
61
61
|
using the appropiate JavaScript but ensuring accessibility and usability, no matter
|
@@ -145,7 +145,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
145
145
|
version: '0'
|
146
146
|
segments:
|
147
147
|
- 0
|
148
|
-
hash: -
|
148
|
+
hash: -3213150091351247240
|
149
149
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
150
150
|
none: false
|
151
151
|
requirements:
|
@@ -154,7 +154,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
154
154
|
version: '0'
|
155
155
|
segments:
|
156
156
|
- 0
|
157
|
-
hash: -
|
157
|
+
hash: -3213150091351247240
|
158
158
|
requirements: []
|
159
159
|
rubyforge_project:
|
160
160
|
rubygems_version: 1.6.2
|