I'm using jquery-steps plugin to create a wizard in my application.
I followed the instructions here: https://github.com/rstaib/jquery-steps
I load the js files, created my markup, called the .steps(settings)
function with the settings from the github wiki.
I get the HTML elements on the page, but it seems that I'm missing the CSS file to go with it, so my interface doesn't look like the example code.
My Markup:
<div id="wizard" role="application" class="wizard clearfix"><div class="steps clearfix"><ul role="tablist"><li role="tab" class="first current" aria-disabled="false" aria-selected="true"><a id="wizard-t-0" href="#wizard-h-0" aria-controls="wizard-p-0"><span class="current-info audible">current step: </span><span class="number">1.</span> Basic Info</a></li><li role="tab" class="last done" aria-disabled="false" aria-selected="false"><a id="wizard-t-1" href="#wizard-h-1" aria-controls="wizard-p-1"><span class="number">2.</span> Brief Info</a></li></ul></div><div class="content clearfix">
<h1 id="wizard-h-0" tabindex="-1" class="title current">Basic Info</h1>
<div id="wizard-p-0" role="tabpanel" aria-labelledby="wizard-h-0" class="body current" aria-hidden="false" style="display: block;">
<label>Client</label>
<input name="client" type="text" value="">
<br>
<label>Brief</label>
<input name="brief" type="text" value="">
<br>
<label>Plan name</label>
<input name="plan_name" type="text" value="Yes Comedy">
<br>
<label>Start Date</label>
<input name="start_date" type="text" value="2013-10-01" id="dp1384690179731" class="hasDatepicker">
<br>
<label>Type</label>
<input type="radio" name="plan_type" value="1" checked="checked">Recurring
<input type="radio" name="plan_type" value="2">One Time
<br>
<div id="field_end_date" class="field" style="display: none;">
<label>End Date</label>
<input name="end_date" type="text" value="2013-10-31" id="dp1384690179732" class="hasDatepicker">
<br>
</div>
</div>
<h1 id="wizard-h-1" tabindex="-1" class="title">Brief Info</h1>
<div id="wizard-p-1" role="tabpanel" aria-labelledby="wizard-h-1" class="body" aria-hidden="true" style="display: none;">
<label>Start Date</label>
<input name="age" type="text" value="2013-10-01">
<br>
<label>Start Date</label>
<input name="age" type="text" value="2013-10-01">
<br>
</div>
</div><div class="actions clearfix"><ul role="menu" aria-label="Pagination"><li class="disabled" aria-disabled="true"><a href="#previous" role="menuitem">Previous</a></li><li aria-hidden="false" aria-disabled="false" style="display: list-item;"><a href="#next" role="menuitem">Next</a></li><li aria-hidden="true" style="display: none;"><a href="#finish" role="menuitem">Finish</a></li></ul></div></div>
My UI:
Can anyone suggest what CSS file I should load, or otherwise how to make my UI look and behave like the demo?