Menu
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?
207
As the user adeneo said in 2013, the Git Repo contains a demo CSS file if you wish to use it - Demo CSS
Additionally, in the Git Repo under Getting Started, Step 2 shows jquery.steps.css included in the HTML.
Here is the HTML referenced in the repo:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<script src="jquery.js"></script>
<script src="jquery.steps.js"></script>
<link href="jquery.steps.css" rel="stylesheet">
</head>
<body>
<script>
$("#wizard").steps();
</script>
<div id="wizard"></div>
</body>
</html>
The original poster said this was the correct answer, but it was never posted as an "Answer" so it could not be accepted.
171
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
