bettertabs 1.3 → 1.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|