|
1 |
| -# Intro.js |
| 1 | +this is a fork from [introJs](https://github.com/usablica/intro.js) |
2 | 2 |
|
3 |
| -> Better introductions for websites and features with a step-by-step guide for your projects. |
| 3 | +It fix some unwanted behavior whith scrollbar. When a element is in a container with a scrollbar, or in severals ones, it move the scrollbar to make the element visible in the viewport when this one is enlighted. |
4 | 4 |
|
| 5 | +It also add a beforeChange event. |
5 | 6 |
|
6 |
| -## How to use |
7 |
| -Intro.js can be added to your site in three simple steps: |
8 |
| - |
9 |
| -**1)** Include `intro.js` and `introjs.css` (or the minified version for production) in your page. |
10 |
| - |
11 |
| -> Note: if you need Internet Explorer compatiblity, you have to add introjs-ie.css to the page also: |
12 |
| - |
13 |
| -```html |
14 |
| -<!--[if lte IE 8]> |
15 |
| - <link href="../introjs-ie.css" rel="stylesheet"> |
16 |
| -<!-- <![endif]--> |
17 |
| -```` |
18 |
| - |
19 |
| -**2)** Add `data-intro` and `data-step` to your HTML elements. |
20 |
| - |
21 |
| -For example: |
22 |
| - |
23 |
| -```html |
24 |
| -<a href='http://google.com/' data-intro='Hello step one!' data-step='1'></a> |
25 |
| -```` |
26 |
| - |
27 |
| -Optionally you can define `data-position` attribute to define the position of tooltip with values `top`, `right`, `left` and `bottom`. Default value is `bottom`. |
28 |
| - |
29 |
| -**3)** Call this JavaScript function: |
30 |
| -```javascript |
31 |
| -introJs().start(); |
32 |
| -```` |
33 |
| - |
34 |
| -Optionally, pass one parameter to `introJs` function to limit the presentation section. |
35 |
| - |
36 |
| -**For example** `introJs(".introduction-farm").start();` runs the introduction only for elements with `class='introduction-farm'`. |
37 |
| - |
38 |
| -<p align="center"><img src="http://usablica.github.com/intro.js/img/introjs-demo.png"></p> |
39 |
| - |
40 |
| -## API |
41 |
| - |
42 |
| -###introJs([targetElm]) |
43 |
| - |
44 |
| -Creating an introJs object. |
45 |
| - |
46 |
| -**Available since**: v0.1.0 |
47 |
| - |
48 |
| -**Parameters:** |
49 |
| - - targetElm : String (optional) |
50 |
| - Should be defined to start introduction for specific element, for example: `#intro-farm`. |
51 |
| - |
52 |
| -**Returns:** |
53 |
| - - introJs object. |
54 |
| - |
55 |
| -**Example:** |
56 |
| -```javascript |
57 |
| -introJs() //without selector, start introduction for whole page |
58 |
| -introJs("#intro-farm") //start introduction for element id='intro-farm' |
59 |
| -```` |
60 |
| - |
61 |
| ------ |
62 |
| - |
63 |
| -###introJs.start() |
64 |
| - |
65 |
| -Start the introduction for defined element(s). |
66 |
| - |
67 |
| -**Available since**: v0.1.0 |
68 |
| - |
69 |
| -**Returns:** |
70 |
| - - introJs object. |
71 |
| - |
72 |
| -**Example:** |
73 |
| -```javascript |
74 |
| -introJs().start() |
75 |
| -```` |
76 |
| ------ |
77 |
| - |
78 |
| -###introJs.goToStep(step) |
79 |
| - |
80 |
| -Go to specific step of introduction. |
81 |
| - |
82 |
| -**Available since**: v0.3.0 |
83 |
| - |
84 |
| -**Parameters:** |
85 |
| - - step : Number |
86 |
| - |
87 |
| -**Returns:** |
88 |
| - - introJs object. |
89 |
| - |
90 |
| -**Example:** |
91 |
| -```javascript |
92 |
| -introJs().goToStep(2).start(); //starts introduction from step 2 |
93 |
| -```` |
94 |
| - |
95 |
| ------ |
96 |
| - |
97 |
| -###introJs.exit() |
98 |
| - |
99 |
| -Exit the introduction. |
100 |
| - |
101 |
| -**Available since**: v0.3.0 |
102 |
| - |
103 |
| -**Returns:** |
104 |
| - - introJs object. |
105 |
| - |
106 |
| -**Example:** |
107 |
| -```javascript |
108 |
| -introJs().exit() |
109 |
| -```` |
110 |
| - |
111 |
| ------ |
112 |
| - |
113 |
| -###introJs.setOption(option, value) |
114 |
| - |
115 |
| -Set a single option to introJs object. |
116 |
| - |
117 |
| -**Available since**: v0.3.0 |
118 |
| - |
119 |
| -**Parameters:** |
120 |
| - - option : String |
121 |
| - Option key name. |
122 |
| - |
123 |
| - - value : String/Number |
124 |
| - Value of the option. |
125 |
| - |
126 |
| -**Returns:** |
127 |
| - - introJs object. |
128 |
| - |
129 |
| -**Example:** |
130 |
| -```javascript |
131 |
| -introJs().setOption("skipLabel", "Exit"); |
132 |
| -```` |
133 |
| - |
134 |
| ----- |
135 |
| - |
136 |
| -###introJs.setOptions(options) |
137 |
| - |
138 |
| -Set a group of options to the introJs object. |
139 |
| - |
140 |
| -**Available since**: v0.3.0 |
141 |
| - |
142 |
| -**Parameters:** |
143 |
| - - options : Object |
144 |
| - Object that contains option keys with values. |
145 |
| - |
146 |
| -**Returns:** |
147 |
| - - introJs object. |
148 |
| - |
149 |
| -**Example:** |
150 |
| -```javascript |
151 |
| -introJs().setOptions({ skipLabel: "Exit", tooltipPosition: "right" }); |
152 |
| -```` |
153 |
| - |
154 |
| ----- |
155 |
| - |
156 |
| -###introJs.oncomplete(providedCallback) |
157 |
| - |
158 |
| -Set callback for when introduction completed. |
159 |
| - |
160 |
| -**Available since**: v0.2.0 |
161 |
| - |
162 |
| -**Parameters:** |
163 |
| - - providedCallback : Function |
164 |
| - |
165 |
| -**Returns:** |
166 |
| - - introJs object. |
167 |
| - |
168 |
| -**Example:** |
169 |
| -```javascript |
170 |
| -introJs().oncomplete(function() { |
171 |
| - alert("end of introduction"); |
172 |
| -}); |
173 |
| -```` |
174 |
| - |
175 |
| ------ |
176 |
| - |
177 |
| -###introJs.onexit(providedCallback) |
178 |
| - |
179 |
| -Set callback to exit of introduction. Exit also means pressing `ESC` key and clicking on the overlay layer by the user. |
180 |
| - |
181 |
| -**Available since:** v0.2.0 |
182 |
| - |
183 |
| -**Parameters:** |
184 |
| - - providedCallback : Function |
185 |
| - |
186 |
| -**Returns:** |
187 |
| - - introJs object. |
188 |
| - |
189 |
| -**Example:** |
190 |
| -```javascript |
191 |
| -introJs().onexit(function() { |
192 |
| - alert("exit of introduction"); |
193 |
| -}); |
194 |
| -```` |
195 |
| - |
196 |
| ------ |
197 |
| - |
198 |
| -###introJs.onchange(providedCallback) |
199 |
| - |
200 |
| -Set callback to change of each step of introduction. Given callback function will be called after completing each step. |
201 |
| -The callback function receives the element of the new step as an argument. |
202 |
| - |
203 |
| -**Available since:** v0.3.0 |
204 |
| - |
205 |
| -**Parameters:** |
206 |
| - - providedCallback : Function |
207 |
| - |
208 |
| -**Returns:** |
209 |
| - - introJs object. |
210 |
| - |
211 |
| -**Example:** |
212 |
| -```javascript |
213 |
| -introJs().onchange(function(targetElement) { |
214 |
| - alert("new step"); |
215 |
| -}); |
216 |
| -```` |
217 |
| - |
218 |
| -## Using with: |
219 |
| - |
220 |
| -### Rails |
221 |
| -If you are using the rails asset pipeline you can use the [introjs-rails](https://github.com/heelhook/intro.js-rails) gem. |
222 |
| - |
223 |
| -### Yii framework |
224 |
| -You can simply use this project for Yii framework: https://github.com/moein7tl/Yii-IntroJS |
225 |
| - |
226 |
| - |
227 |
| -## Build |
228 |
| - |
229 |
| -First you should install `nodejs` and `npm`, then first run this command: `npm install` to install all dependencies. |
230 |
| - |
231 |
| -Now you can run this command to minify all static resources: |
232 |
| - |
233 |
| - make build |
234 |
| - |
235 |
| - |
236 |
| -## Roadmap |
237 |
| -- Multi-page introduction |
238 |
| -- More browser compatibility |
239 |
| - |
240 |
| - |
241 |
| -## Release History |
242 |
| - * **v0.3.0** - 2013-03-28 |
243 |
| - - Adding support for CommonJS, RequireJS AMD and Browser Globals. |
244 |
| - - Add `goToStep` function to go to specific step of introduction. |
245 |
| - - Add `onchange` callback. |
246 |
| - - Add `exit` function to exit from introduction. |
247 |
| - - Adding options with `setOption` and `setOptions` functions. |
248 |
| - - More IE compatibility. |
249 |
| - - Fix `min-width` bug with tooltip box. |
250 |
| - - Code cleanup + Better coding style. |
251 |
| - |
252 |
| - * **v0.2.1** - 2013-03-20 |
253 |
| - - Fix keydown event unbinding bug. |
254 |
| - |
255 |
| - * **v0.2.0** - 2013-03-20 |
256 |
| - - Ability to define tooltip position with `data-position` attribute |
257 |
| - - Add `onexit` and `oncomplete` callback |
258 |
| - - Better scrolling functionality |
259 |
| - - Redesign navigating buttons + add previous button |
260 |
| - - Fix overlay layer bug in wide monitors |
261 |
| - - Fix show element for elements with position `absolute` or `relative` |
262 |
| - - Add `enter` key for navigating in steps |
263 |
| - - Code refactoring |
264 |
| - |
265 |
| - |
266 |
| - * **v0.1.0** - 2013-03-16 |
267 |
| - - First commit. |
268 |
| - |
269 |
| -## Author |
270 |
| -**Afshin Mehrabani** |
271 |
| - |
272 |
| -- [Twitter](https://twitter.com/afshinmeh) |
273 |
| -- [Github](https://github.com/afshinm) |
274 |
| -- [Personal page](http://afshinm.name/) |
275 |
| - |
276 |
| -[Other contributors](https://github.com/usablica/intro.js/graphs/contributors) |
277 |
| - |
278 |
| - |
279 |
| -## Support/Discussion |
280 |
| -- [Google Group](https://groups.google.com/d/forum/introjs) |
281 |
| -- [Stackoverflow](http://stackoverflow.com/questions/tagged/intro.js) |
282 |
| - |
283 |
| -## License |
284 |
| -> Copyright (C) 2012 Afshin Mehrabani ( [email protected]) |
285 |
| - |
286 |
| -Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated |
287 |
| -documentation files (the "Software"), to deal in the Software without restriction, including without limitation |
288 |
| -the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, |
289 |
| -and to permit persons to whom the Software is furnished to do so, subject to the following conditions: |
290 |
| -The above copyright notice and this permission notice shall be included in all copies or substantial portions |
291 |
| -of the Software. |
292 |
| - |
293 |
| -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED |
294 |
| -TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL |
295 |
| -THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF |
296 |
| -CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS |
297 |
| -IN THE SOFTWARE. |
| 7 | +see an exemple at [http://platane.github.com/intro.js/index.html](http://platane.github.com/intro.js/index.html) |
0 commit comments