Я использую плагин jquery-steps для создания мастера в своем приложении.
Я выполнил следующие инструкции: https://github.com/rstaib/jquery-steps
Я загружаю js файлы, создавая свою разметку, называемую функцией .steps(settings)
с настройками из вики-страницы github.
Я получаю HTML-элементы на странице, но кажется, что мне не хватает файла CSS, чтобы идти с ним, поэтому мой интерфейс не похож на пример кода.
Моя разметка:
<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>
Мой пользовательский интерфейс:
Может кто-нибудь предложить, какой файл CSS я должен загрузить, или иначе, как заставить мой интерфейс выглядеть и вести себя как демо?