Список других таких же инструкций смотрите Здесь.
Установка intro.js:
Сначала надо Скачать Коды: Здесь.
Intro.js можно добавить на ваш сайт в три простых шага:
** 1) ** Включите `intro.js` и` introjs.css` (или уменьшенная версия для производства) на вашей странице. Используйте `introjs-rtl.min.css` для поддержки справа-слева языка.
** 2) ** Добавить `data-intro` и` data-step` к вашим HTML элементов.
пример:
`` `HTML
<a href='http://google.com/' data-intro='Hello step one!'></a>
`` ``
Смотреть все атрибуты [здесь].
** 3) ** Вызываем JavaScript:
```javascript
introJs().start();
````
пример:
`introJs(".introduction-farm").start();`
Пошаговая инструкция работает только для элементов с `class='introduction-farm'`.
## Использование шаблонов
IntroJS предоставляет потрясающие шаблоны. Вы можете просмотреть все шаблоны здесь:
Для того чтобы использовать шаблоны, все то, что вам нужно сделать, это добавить шаблона стилей к странице, * после * IntroJS CSS файл:
```html
<!-- Add IntroJs styles -->
<link href="../../introjs.css" rel="stylesheet">
<!-- Add Nazanin template -->
<link href="../../themes/introjs-nazanin.css" rel="stylesheet">
```
## API
###introJs([targetElm])
Создание объекта introJs.
** Параметры: **
- targetElm : String (optional)
Должны быть определены для конкретного элемента, например: `# intro-farm`.
**Returns:**
- introJs object.
**пример:**
```javascript
introJs() //без селектора, начать введение для всей страницы
introJs("#intro-farm") //начать введение для элемента id='intro-farm'
````
-----
###introJs.start()
Start the introduction for defined element(s).
**Available since**: v0.1.0
**Returns:**
- introJs object.
**Example:**
```javascript
introJs().start()
````
-----
###introJs.goToStep(step)
Go to specific step of introduction.
**Available since**: v0.3.0
**Parameters:**
- step : Number
**Returns:**
- introJs object.
**Example:**
```javascript
introJs().goToStep(2).start(); //starts introduction from step 2
````
-----
###introJs.nextStep()
Go to next step of introduction.
**Available since**: v0.7.0
**Returns:**
- introJs object.
**Example:**
```javascript
introJs().start().nextStep();
````
-----
###introJs.previousStep()
Go to previous step of introduction.
**Available since**: v0.7.0
**Returns:**
- introJs object.
**Example:**
```javascript
introJs().goToStep(3).start().previousStep(); //starts introduction from step 2
````
-----
###introJs.exit()
Exit the introduction.
**Available since**: v0.3.0
**Returns:**
- introJs object.
**Example:**
```javascript
introJs().exit()
````
-----
###introJs.setOption(option, value)
Set a single option to introJs object.
**Available since**: v0.3.0
**Parameters:**
- option : String
Option key name.
- value : String/Number
Value of the option.
**Returns:**
- introJs object.
**Example:**
```javascript
introJs().setOption("skipLabel", "Exit");
````
----
###introJs.setOptions(options)
Set a group of options to the introJs object.
**Available since**: v0.3.0
**Parameters:**
- options : Object
Object that contains option keys with values.
**Returns:**
- introJs object.
**Example:**
```javascript
introJs().setOptions({ 'skipLabel': 'Exit', 'tooltipPosition': 'right' });
````
----
###introJs.refresh()
To refresh and order layers manually
**Available since**: v0.5.0
**Returns:**
- introJs object.
**Example:**
```javascript
introJs().refresh();
````
----
###introJs.oncomplete(providedCallback)
Set callback for when introduction completed.
**Available since**: v0.2.0
**Parameters:**
- providedCallback : Function
**Returns:**
- introJs object.
**Example:**
```javascript
introJs().oncomplete(function() {
alert("end of introduction");
});
````
-----
###introJs.onexit(providedCallback)
Set callback to exit of introduction. Exit also means pressing `ESC` key and clicking on the overlay layer by the user.
**Available since:** v0.2.0
**Parameters:**
- providedCallback : Function
**Returns:**
- introJs object.
**Example:**
```javascript
introJs().onexit(function() {
alert("exit of introduction");
});
````
-----
###introJs.onchange(providedCallback)
Set callback to change of each step of introduction. Given callback function will be called after completing each step.
The callback function receives the element of the new step as an argument.
**Available since:** v0.3.0
**Parameters:**
- providedCallback : Function
**Returns:**
- introJs object.
**Example:**
```javascript
introJs().onchange(function(targetElement) {
alert("new step");
});
````
-----
###introJs.onbeforechange(providedCallback)
Given callback function will be called before starting a new step of introduction. The callback function receives the element of the new step as an argument.
**Available since:** v0.4.0
**Parameters:**
- providedCallback : Function
**Returns:**
- introJs object.
**Example:**
```javascript
introJs().onbeforechange(function(targetElement) {
alert("before new step");
});
````
-----
###introJs.onafterchange(providedCallback)
Given callback function will be called after starting a new step of introduction. The callback function receives the element of the new step as an argument.
**Available since:** v0.7.0
**Parameters:**
- providedCallback : Function
**Returns:**
- introJs object.
**Example:**
```javascript
introJs().onafterchange(function(targetElement) {
alert("after new step");
});
````
-----
###Attributes:
- `data-intro`: The tooltip text of step
- `data-step`: Optionally define the number (priority) of step
- `data-tooltipClass`: Optionally define a CSS class for tooltip
- `data-position`: Optionally define the position of tooltip, `top`, `left`, `right`, `bottom`, `bottom-left-aligned` (same as 'bottom'), 'bottom-middle-aligned' and 'bottom-right-aligned'. Default is `bottom`
###Options:
- `steps`: For defining steps using JSON configuration (see [this](https://github.com/usablica/intro.js/blob/master/example/programmatic/index.html) example)
- `nextLabel`: Next button label
- `prevLabel`: Previous button label
- `skipLabel`: Skip button label
- `doneLabel`: Done button label
- `tooltipPosition`: Default tooltip position
- `tooltipClass`: Adding CSS class to all tooltips
- `exitOnEsc`: Exit introduction when pressing Escape button, `true` or `false`
- `exitOnOverlayClick`: Exit introduction when clicking on overlay layer, `true` or `false`
- `showStepNumbers`: Show steps number in the red circle or not, `true` or `false`
- `keyboardNavigation`: Navigating with keyboard or not, `true` or `false`
- `showButtons`: Show introduction navigation buttons or not, `true` or `false`
- `showBullets`: Show introduction bullets or not, `true` or `false`
- `scrollToElement`: Auto scroll to highlighted element if it's outside of viewport, `true` or `false`
- `overlayOpacity`: Adjust the overlay opacity, `Number`
See [setOption](https://github.com/usablica/intro.js/#introjssetoptionoption-value) to see an example.
## Using with:
### Rails
If you are using the rails asset pipeline you can use the [introjs-rails](https://github.com/heelhook/intro.js-rails) gem.
### Yii framework
You can simply use this project for Yii framework: https://github.com/moein7tl/Yii-IntroJS
### Drupal
Here you can find an IntroJs integration for Drupal: https://drupal.org/sandbox/alexanderfb/2061829
### AngularJS
For AngularJS, you can use the directives in [angular-intro.js](http://code.mendhak.com/angular-intro.js/).
### Wordpress
You can use IntroJS inside your Wordpress, here is a good article by SitePoint: http://www.sitepoint.com/creating-intro-js-powered-tours-wordpress/
Here is a under construction plugin for Wordpress: https://github.com/newoldmedia/intro.js-wordpress
## Build
First you should install `nodejs` and `npm`, then first run this command: `npm install` to install all dependencies.
Now you can run this command to minify all static resources:
make build
## Instant IntroJs
Want to learn faster and easier? Here we have **Instant IntroJs**, Packt Publishing.
<p align="center">
<a target='_blank' href="http://www.packtpub.com/create-useful-introductions-for-websites-and-applications-with-introjs-library/book"><img src='http://dgdsbygo8mp3h.cloudfront.net/sites/default/files/imagecache/productview_larger/2517OS_Instant%20IntroJS%20Starter.jpg' /></a>
</p>
<p align="center">
<a target='_blank' href="http://www.packtpub.com/create-useful-introductions-for-websites-and-applications-with-introjs-library/book">Buy and Download</a>
</p>
## Roadmap
- Fix problems with `position: fixed` and other positions
- Provide more examples
- Add more templates
ABOUTME
Привет! Я студентка из Вьетнама, я учусь в МГТУ им Баумана, мне нужна работа но времени мало, я нашла такие заработки в интернете, и решила поделиться с вами. Подпишитесь и расскажите друзьям. Спасибо!
0 коммент.:
Отправить комментарий