Skip to content

Commit cedfa6c

Browse files
committedNov 20, 2014
Point towards website for docs
1 parent d7ababd commit cedfa6c

File tree

1 file changed

+1
-208
lines changed

1 file changed

+1
-208
lines changed
 

‎README.md

+1-208
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,7 @@ and providing a nice ruby syntax for dealing with jQuery instances.
77

88
See the Opal website for [documentation](http://opalrb.org/docs/jquery).
99

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
2711

2812
Install opal-jquery from RubyGems:
2913

@@ -36,197 +20,6 @@ Or include it in your Gemfile for Bundler:
3620
```ruby
3721
gem 'opal-jquery'
3822
```
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-
23023
## Running Specs
23124

23225
Get the dependencies:

0 commit comments

Comments
 (0)
Please sign in to comment.