https://github.com/prasanaworld/responsive-coach-mark

Great plugin for Explaining other component availables in your page. Also familiar with names like Coach Marks, Tour this page plugin, tutor demo
https://github.com/prasanaworld/responsive-coach-mark

Last synced: about 1 month ago
JSON representation

Great plugin for Explaining other component availables in your page. Also familiar with names like Coach Marks, Tour this page plugin, tutor demo

• Host: GitHub
• URL: https://github.com/prasanaworld/responsive-coach-mark
• Owner: prasanaworld
• Created: 2016-03-11T11:45:31.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-03-11T12:17:08.000Z (almost 9 years ago)
• Last Synced: 2024-10-13T22:29:59.751Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 170 KB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Tour_Page

A Great Jquery plugin for describing other component in your page. Offer a great level of understanding about the complex component 

by providing information.

  

  * easy to use.

  * easy to  Configue.

## Dependencies

Jquery-UI

## Usuage

``` html

 

 

```

**Invoke**

``` javascript

$("DOM").coachMarks([options]);

```

## Options [Default]

``` javascript

{

	"isCoachMarksDisplay" :true,

	"closeOnEscape"	: true,

	"clickAnyWhereClose" : false,

	"coachMarksItems": [{ 

	   "domReference":".textboxDemo",

      "title":"Main Menu Items",

      "description":"Lorem ipsum dolor sit amet, qui cu hinc tincidunt. Vel gubergren liberavisse te.",

      "descPosition": "left",

      "seqOrder":"2"

	 }]

}

```

  * **isCoachMarkDisplay** : Boolean value to indicate wether plugin should be enabled or not. By default set to `true`

  * **closeOnEscape** : if set to true, tour plugin will be closed when you press `ESC` key in the keyboard else false. Default `true`

  * **clickAnyWhereClose** : Specify a boolean value to close when click outside the coach mark area, Default `false'

  * **coachMarksItem** : list of components to be described on that page

    - **domReference** : reference dom which is to be described

    - **title** : title for the dom to be described

    - **description** : description text goes here

    - **descPosition** : position of the coach marker, possible value are `left`, `right`, `top`, `bottom`

    - **seqOrder**: order in which the coach marks must be showed. by default set to `1`

          

## Example

```html

Tour this Page


var options  =  {

	"isCoachMarksDisplay" :true,

	"closeOnEscape"	: true,

	"clickAnyWhereClose" : false,

	"coachMarksItems": [

					{ "domReference":".textboxDemo",

	                "title":"Main Menu Items",

	                "description":"Lorem ipsum dolor sit amet, qui cu hinc tincidunt. Vel gubergren liberavisse te, pro ut invenire intellegam.",

	                "descPosition": "left",

	                "seqOrder":"2"

	                }, {

	                "domReference":".radioDemo",

	                "title":"Main Menu Items",

	                "description":"Lorem ipsum dolor sit amet, qui cu hinc tincidunt. Vel gubergren liberavisse te, pro ut invenire intellegam.",

	                "descPosition": "left",

	                "seqOrder":"1"

	                }, {

	                "domReference":".radioDemo1",

	                "title":"Main Menu Items",

	                "description":"Lorem ipsum dolor sit amet, qui cu hinc tincidunt. Vel gubergren liberavisse te, pro ut invenire intellegam.",

	                "descPosition": "left",

	                "seqOrder":"3"

	                }]

};

  $('.coachMarks').coachMarks(options);

```

## Author

Prasana k

## License

MIT