@@ -7,23 +7,7 @@ and providing a nice ruby syntax for dealing with jQuery instances.
7
7
8
8
See the Opal website for [ documentation] ( http://opalrb.org/docs/jquery ) .
9
9
10
- ## Documentation
11
-
12
- ``` ruby
13
- elements = Element .find(' .foo' )
14
- # => [<div class="foo">, ...]
15
-
16
- elements.class
17
- # => JQuery
18
-
19
- elements.on(:click ) do
20
- alert " element was clicked"
21
- end
22
- ```
23
-
24
- ### Getting Started
25
-
26
- #### Installation
10
+ ## Installation
27
11
28
12
Install opal-jquery from RubyGems:
29
13
@@ -36,197 +20,6 @@ Or include it in your Gemfile for Bundler:
36
20
``` ruby
37
21
gem ' opal-jquery'
38
22
```
39
-
40
- ### Interacting with the DOM
41
-
42
- #### Finding elements
43
-
44
- opal-jquery provides the ` Element ` class, which can be used to find elements in
45
- the current document:
46
-
47
- ``` ruby
48
- Element .find(' #header' )
49
- ```
50
-
51
- ` Element.find ` is aliased to ` Element[] ` :
52
-
53
- ``` ruby
54
- Element [' .my-class' ]
55
- ```
56
-
57
- These methods acts just like ` $('selector') ` , and can use any jQuery
58
- compatible selector:
59
-
60
- ``` ruby
61
- Element .find(' #navigation li:last' )
62
- ```
63
-
64
- The result is just a jQuery instance, which is toll-free bridged to
65
- instances of the ` Element ` class in ruby:
66
-
67
- ``` ruby
68
- Element .find(' .foo' ).class
69
- # => Element
70
- ```
71
-
72
- Instances of ` Element ` also have the ` #find ` method available for
73
- finding elements within the scope of each DOM node represented by
74
- the instance:
75
-
76
- ``` ruby
77
- el = Element .find(' #header' )
78
- el.find ' .foo'
79
- # => #<Element .... >
80
- ```
81
-
82
- #### Running code on document ready
83
-
84
- Just like jQuery, opal-jquery requires the document to be ready to
85
- be able to fully interact with the page. Any top level access should
86
- use the ` ready? ` method:
87
-
88
- ``` ruby
89
- Document .ready? do
90
- alert " document is ready to go!"
91
- end
92
- ```
93
-
94
- The ` Kernel#alert ` method is shown above too.
95
-
96
- #### Event handling
97
-
98
- The ` Element#on ` method is used to attach event handlers to elements:
99
-
100
- ``` ruby
101
- Element .find(' #header' ).on :click do
102
- puts " The header was clicked!"
103
- end
104
- ```
105
-
106
- Selectors can also be passed as a second argument to handle events
107
- on certain children:
108
-
109
- ``` ruby
110
- Element .find(' #header' ).on(:click , ' .foo' ) do
111
- puts " An element with a 'foo' class was clicked"
112
- end
113
- ```
114
-
115
- An ` Event ` instance is optionally passed to block handlers as well,
116
- which is toll-free bridged to jquery events:
117
-
118
- ``` ruby
119
- Element .find(' #my_link' ).on(:click ) do |evt |
120
- evt.stop_propagation
121
- puts " stopped the event!"
122
- end
123
- ```
124
-
125
- #### CSS styles and classnames
126
-
127
- The various jQuery methods are available on ` Element ` instances:
128
-
129
- ``` ruby
130
- foo = Element .find(' .foo' )
131
-
132
- foo.add_class ' blue'
133
- foo.remove_class ' foo'
134
- foo.toggle_class ' selected'
135
- ```
136
-
137
- There are also added convenience methods for opal-jquery:
138
-
139
- ``` ruby
140
- foo = Element .find(' #header' )
141
-
142
- foo.class_name
143
- # => 'red lorry'
144
-
145
- foo.class_name = ' yellow house'
146
-
147
- foo.class_name
148
- # => 'yellow house'
149
- ```
150
-
151
- ` Element#css ` also exists for getting/setting css styles:
152
-
153
- ``` ruby
154
- el = Element .find(' #container' )
155
- el.css ' color' , ' blue'
156
- el.css ' color'
157
- # => 'blue'
158
- ```
159
-
160
- ### HTTP/AJAX requests
161
-
162
- jQuery's Ajax implementation is also wrapped in the top level HTTP
163
- class.
164
-
165
- ``` ruby
166
- HTTP .get(" /users/1.json" ) do |response |
167
- puts response.body
168
- # => "{\"name\": \"Adam Beynon\"}"
169
- end
170
- ```
171
-
172
- The block passed to this method is used as the handler when the request
173
- succeeds, as well as when it fails. To determine whether the request
174
- was successful, use the ` ok? ` method:
175
-
176
- ``` ruby
177
- HTTP .get(" /users/2.json" ) do |response |
178
- if response.ok?
179
- alert " successful!"
180
- else
181
- alert " request failed :("
182
- end
183
- end
184
- ```
185
-
186
- The request is actually triggered inside the ` HTTP.get ` method, but due
187
- to the async nature of the request, the callback and errback handlers can
188
- be added anytime before the request returns.
189
-
190
- #### Handling responses
191
-
192
- Web apps deal with JSON responses quite frequently, so there is a useful
193
- ` #json ` helper method to get the JSON content from a request:
194
-
195
- ``` ruby
196
- HTTP .get(" /users.json" ) do |response |
197
- puts response.body
198
- puts response.json
199
- end
200
-
201
- # => "[{\"name\": \"Adam\"},{\"name\": \"Ben\"}]"
202
- # => [{"name" => "Adam"}, {"name" => "Ben"}]
203
- ```
204
-
205
- The ` #body ` method will always return the raw response string.
206
-
207
- If an error is encountered, then the ` #status_code ` method will hold the
208
- specific error code from the underlying request:
209
-
210
- ``` ruby
211
- request = HTTP .get(" /users/3.json" )
212
-
213
- request.callback { puts " it worked!" }
214
-
215
- request.errback { |response |
216
- puts " failed with status #{ response.status_code } "
217
- }
218
- ```
219
-
220
- #### Other options
221
-
222
- ` HTTP ` accepts the usual ` $.ajax ` options:
223
-
224
- ``` ruby
225
- HTTP .get ' /search' , data: {q: ' foo' }, async: false do |response |
226
- p response.body
227
- end
228
- ```
229
-
230
23
## Running Specs
231
24
232
25
Get the dependencies:
0 commit comments