index.html
6.61 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head lang="en">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Step Form Wizard Documentation</title>
<!-- Framework CSS -->
<link rel="stylesheet" href="assets/blueprint-css/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="assets/blueprint-css/print.css" type="text/css" media="print">
<!--[if lt IE 8]>
<link rel="stylesheet" href="assets/blueprint-css/ie.css" type="text/css" media="screen, projection"><![endif]-->
<link rel="stylesheet" href="assets/blueprint-css/plugins/fancy-type/screen.css" type="text/css"
media="screen, projection">
<style type="text/css" media="screen">
p, table, hr, .box {
margin-bottom: 25px;
}
.box p {
margin-bottom: 10px;
}
h4 {
margin: 20px 0;
}
</style>
</head>
<body>
<div class="container">
<h3 class="center alt">“Step Form Wizard” Documentation by “Jiří Waśniowski” v1.0</h3>
<hr>
<h1 class="center">“Step Form Wizard”</h1>
<div class="borderTop">
<div class="span-6 colborder info prepend-1">
<p class="prepend-top">
<strong>
Created: 9/9/2014<br>
By: Ajoke<br>
Email: <a href="mailto:youremail@yourdomain.com">ajoke3@gmail.com</a>
</strong>
</p>
</div>
<!-- end div .span-6 -->
<div class="span-12 last">
<p class="prepend-top append-0">Thank you for purchasing my jQuery plugin. If you have any questions that
are beyond the scope of this help file, please feel free to email via my user page contact form <a
href="http://codecanyon.net/user/ajoke">here</a>. Thanks so much!</p>
</div>
</div>
<!-- end div .borderTop -->
<hr>
<h2 id="toc" class="alt">Table of Contents</h2>
<ol class="alpha">
<li><a href="#htmlStructure">HTML Structure</a></li>
<li><a href="#cssFiles">CSS Files and Structure</a></li>
<li><a href="#javascript">JavaScript</a></li>
</ol>
<hr>
<h3 id="htmlStructure"><strong>A) HTML Structure</strong> - <a href="#toc">top</a></h3>
<p>Plugin generates responsive HTML code. This generated code can be described as two blocks.
One for step navigation and second for content.</p>
<p>Your code must have certain structure, so that plugin can create step navigation from your code.
Important is tag <form> and this tag must have direct children tags <fieldset>.
These fieldsets will be turned in to the navigation steps. Each fieldset should contain tag <label>
that will be a name of navigation step.</p>
<img src="assets/img/code1.png" alt="HTML Structure for generate"/>
<h4>Generate this:</h4>
<img src="assets/img/exmp_step_nav.png" width="790" alt="Step navigation"/>
<hr>
<h3 id="cssFiles"><strong>B) CSS Files and Structure</strong> - <a href="#toc">top</a></h3>
<p>
I'm using one CSS file for this plugin. This css file contains specific styling for layout and four themes of plugin.
You can overwrite these styles. If you use ID in styles, you can be sure, that you overwrite
default styles. Important thing is media queries, this help you with responsive look, but you must set max-width and min-width
depending on your css framework or your media queries in your site styles. <br/>
Additional scss file is attached For easy color change or modification original themes (you can use some online compiler for generate css).
</p>
<img src="assets/img/overwrite_css.png" alt="Example of overwrite css"/>
<hr>
<h3 id="javascript"><strong>C) JavaScript</strong> - <a href="#toc">top</a></h3>
<p>This plugin imports three Javascript files.</p>
<ol>
<li>jQuery</li>
<li>jQuery custom content scroller</li>
<li>Parsley - javaScript form validation library</li>
<li>My custom plugin scripts</li>
</ol>
<ol>
<li>jQuery is a Javascript library that greatly reduces the amount of code that you must write.</li>
<li>
Custom scrollbar is plugin for jQuery and this plugin uses its function for better look of scrollbar.
If you want, feel free to use another plugin for scrollbar or none. <br/>
<a href="http://manos.malihu.gr/jquery-custom-content-scroller/">Link to plugin</a>
</li>
<li>
Parsley library provide very powerful and easy validating forms. But you can use your favorite validation plugin.<br/>
<a href="http://parsleyjs.org/">http://parsleyjs.org/</a>
</li>
<li>Generating and animation is covered in this file. This file has standard look of jQuery plugins. <br/>
<p>
The easiest way to call plugin is:
<pre>$("#wizard").stepFormWizard();</pre>
Where #wizard is ID of some form element with fieldsets.
</p>
<p>
If you need to change some options, you will call plugin like this:
<pre>$("#wizard").stepFormWizard({
showNav: 'left',
height: '300px'
});</pre>
</p>
<p>For more options look <a href="options.htm">here</a> offline or <a href="http://ajoke.cz/wizard/documentation">ajoke.cz/wizard</a> online</p>
<p>
For more examples view offline: <br/>
<a href="example1.htm">example 1</a> <br/>
<a href="example2.htm">example 2</a> <br/>
<a href="example3.htm">example 3</a> <br/>
<a href="example4.htm">example 4</a> <br/>
<a href="example5.htm">example 5</a> <br/>
online: <a href="http://ajoke.cz/wizard/examples">ajoke.cz/wizard</a>
</p>
</li>
</ol>
<hr>
<p>Once again, thank you so much for purchasing this jQuery plugin. As I said at the beginning, I'd be glad to help you if
you have any questions relating to this plugin. No guarantees, but I'll do my best to assist. If you have a more
general question relating to the plugin on CodeCanyon, you might consider visiting the forums and asking your
question in the "Item Discussion" section.</p>
<p class="append-bottom alt large"><strong>Ajoke</strong></p>
<p><a href="#toc">Go To Table of Contents</a></p>
<hr class="space">
</div>
<!-- end div .container -->
</body>
</html>