jquery-steps缺少CSS文件

Question

jquery-steps缺少CSS文件

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

我在页面上获得了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>

Run Code Online (Sandbox Code Playgroud)

我的UI:

任何人都可以建议我应该加载什么CSS文件,或者如何使我的UI外观和行为像演示？

Answer 1

Ant*_*y D 2

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

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

以下是存储库中引用的 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>

Run Code Online (Sandbox Code Playgroud)

最初的发帖者说这是正确的答案，但它从未作为“答案”发布，因此无法被接受。

归档时间：	12 年，6 月前
查看次数：	8235 次
最近记录：	11 年，9 月前