|
65 | 65 | <div>Second Content</div>
|
66 | 66 | </div>
|
67 | 67 | </pre>
|
68 |
| - <p>The important thing to mention here is that each step is represented by a title and a content element of your choice (more details on this later).</p> |
| 68 | + <p>The important thing here to mention is that each step is represented by a title and a content element of your choice (more details on this later).</p> |
69 | 69 | <h3>How to add steps dynamically?</h3>
|
70 | 70 | <p>In the last example we have added two steps by using the <abbr title="Hypertext Markup Language">HTML</abbr> way.
|
71 | 71 | This differs from the dynamic way, because the later requires that the wizard is already initialized.
|
|
102 | 102 | <div>Second Content</div>
|
103 | 103 | </div>
|
104 | 104 | </pre>
|
105 |
| - <p>And after the transformation our resulting code looks like this.</p> |
106 |
| -<pre class="prettyprint linenums"> |
107 |
| -<div class="wizard clearfix" id="wizard" role="application"> |
108 |
| - <div class="steps clearfix"> |
109 |
| - <ul role="tablist"> |
110 |
| - <li class="first current" role="tab" aria-disabled="false" aria-selected="true"> |
111 |
| - <a id="steps-uid-1-t-0" aria-controls="steps-uid-1-p-0" href="#steps-uid-1-h-0"><span class="current-info audible">current step: </span><span class="number">1.</span> First Step</a> |
112 |
| - </li> |
113 |
| - <li class="disabled" role="tab" aria-disabled="true"> |
114 |
| - <a id="steps-uid-1-t-1" aria-controls="steps-uid-1-p-1" href="#steps-uid-1-h-1"><span class="number">2.</span> Second Step</a> |
115 |
| - </li> |
116 |
| - </ul> |
117 |
| - </div> |
118 |
| - <div class="content clearfix"> |
119 |
| - <h1 tabindex="-1" class="title current" id="steps-uid-1-h-0">First Step</h1> |
120 |
| - <div class="body current" id="steps-uid-1-p-0" role="tabpanel" aria-hidden="false" aria-labelledby="steps-uid-1-h-0" style="display: block;"> |
121 |
| - First Content |
122 |
| - </div> |
123 |
| - <h1 tabindex="-1" class="title" id="steps-uid-1-h-1">Second Step</h1> |
124 |
| - <div class="body" id="steps-uid-1-p-1" role="tabpanel" aria-hidden="true" aria-labelledby="steps-uid-1-h-1" style="display: none;"> |
125 |
| - Second Content |
126 |
| - </div> |
127 |
| - </div> |
128 |
| - <div class="actions clearfix"> |
129 |
| - <ul role="menu" aria-label="Pagination"> |
130 |
| - <li class="disabled" aria-disabled="true"> |
131 |
| - <a role="menuitem" href="#previous">Previous</a> |
132 |
| - </li> |
133 |
| - <li aria-disabled="false" aria-hidden="false"> |
134 |
| - <a role="menuitem" href="#next">Next</a> |
135 |
| - </li> |
136 |
| - <li aria-hidden="true" style="display: none;"> |
137 |
| - <a role="menuitem" href="#finish">Finish</a> |
138 |
| - </li> |
139 |
| - </ul> |
140 |
| - </div> |
141 |
| -</div> |
| 105 | + <p>And after transformation our resulting <abbr title="Hypertext Markup Language">HTML</abbr>/<abbr title="Cascading Style Sheets">CSS</abbr> hierarchy tree looks like this.</p> |
| 106 | +<pre class="css"> |
| 107 | +<span class="tag"><div></span><span class="id">#wizard</span><span class="class">.wizard</span><span class="class">.clearfix</span><span class="class status">.vertical</span> |
| 108 | + ├── <span class="tag custom"><div></span><span class="class">.steps</span><span class="class">.clearfix</span> |
| 109 | + │ └── <span class="tag"><ul></span> |
| 110 | + │ └── <span class="tag"><li></span><span class="class status">.first</span><span class="class status">.last</span><span class="class status">.current</span><span class="class status">.disabled</span><span class="class status">.done</span><span class="class status">.error</span> |
| 111 | + │ └── <span class="tag"><a></span><span class="id">#wizard-t-{index}</span> |
| 112 | + │ ├── <span class="tag"><span></span><span class="class">.current-info</span><span class="class">.audible</span> |
| 113 | + │ ├── <span class="tag"><span></span><span class="class">.number</span> |
| 114 | + │ └── Text |
| 115 | + ├── <span class="tag"><div></span><span class="class">.contents</span><span class="class">.clearfix</span> |
| 116 | + │ ├── <span class="tag"><h1></span><span class="id">#wizard-h-{index}</span><span class="class">.title</span><span class="class status">.current</span> |
| 117 | + │ └── <span class="tag"><div></span><span class="id">#wizard-p-{index}</span><span class="class">.body</span><span class="class status">.current</span> |
| 118 | + └── <span class="tag"><div></span><span class="class">.actions</span><span class="class">.clearfix</span> |
| 119 | + └── <span class="tag"><ul></span> |
| 120 | + └── <span class="tag"><li></span><span class="class status">.disabled</span> |
| 121 | + └── <span class="tag"><a></span> |
142 | 122 | </pre>
|
143 |
| - <p>The resulting or transformed code is just for showing you your capabilities and how it is structured.</p> |
| 123 | + <p>The following specific charactaristics must be considered:</p> |
| 124 | + <ul> |
| 125 | + <li><code>.vertical</code> will be added to the outer component wrapper if the <code>stepsOrientation</code> option is set to <code>vertical</code> or <code>0</code>.</li> |
| 126 | + <li><code>.first</code> is added to the first step and <code>.last</code> to the last step.</li> |
| 127 | + <li><code>.current</code> will be added to the active step, title and panel.</li> |
| 128 | + <li><code>.disabled</code> will be added to disabled steps or buttons.</li> |
| 129 | + <li><code>.done</code> will be set on valid steps and <code>.error</code> on invalid steps.</li> |
| 130 | + <li><code>{index}</code> is a placeholder for the position (zero-based) of steps and their related contents (title and panel).</li> |
| 131 | + <li>The <code>div</code> and <code>h1</code> elements can be separatly configured on initialization (please see the next section).</li> |
| 132 | + </ul> |
| 133 | + |
144 | 134 | <h3>CSS classes</h3>
|
145 | 135 | <p>A list of all <abbr title="Cascading Style Sheets">CSS</abbr> classes.</p>
|
146 | 136 | <table class="table table-bordered table-striped">
|
|
175 | 165 | <td><code>clearfix</code> *</td>
|
176 | 166 | <td></td>
|
177 | 167 | </tr>
|
| 168 | + <tr> |
| 169 | + <td><code>vertical</code></td> |
| 170 | + <td></td> |
| 171 | + </tr> |
178 | 172 | <tr>
|
179 | 173 | <td><code>current</code></td>
|
180 | 174 | <td>Marks the active step (the current step, content title and content body).</td>
|
|
0 commit comments