Question

我正在使用jquery-steps插件在我的应用程序中创建一个向导。我按照这里的说明操作：https://github.com/rstaib/jquery-steps 我加载了js文件，创建了我的标记，使用github wiki中的设置调用了.steps(settings)函数。

我在页面上获取了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文件，或者如何使我的UI外观和行为像演示一样？

Answer 1

正如adeneo用户在2013年所说，Git Repo包含一个演示CSS文件，如果您想使用它的话-Demo CSS

此外，在入门下的Git Repo中，步骤2显示了HTML中包含的jquery.steps.css。

以下是仓库中引用的HTML：

<!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>

原始张贴者说这是正确的答案，但从未作为“答案”发布，因此无法接受。

jquery-steps缺少CSS文件

1 个答案: