通过jQuery步骤使用jQuery Mobile_Jquery_Jquery Mobile_Jquery Steps

通过jQuery步骤使用jQuery Mobile

jquery jquery-mobile

通过jQuery步骤使用jQuery Mobile,jquery,jquery-mobile,jquery-steps,Jquery,Jquery Mobile,Jquery Steps,我正在寻找创建一个应用程序表单的前端，它将显示和导航为一个多步骤向导我已经使用jQueryMobile 1.4.0构建了一个单独的垂直HTML页面，并且工作得非常好然后，我添加了jQuery步骤1.0.4来集成向导特性，并保留了大部分外观。不幸的是，大多数表单字段的jQuery移动功能已经停止工作。例如，滑块不会拖动，文本框不会高亮显示。没有JS错误，字段最初显示正确，只是没有按应有的方式运行我想知道是否有人曾经使用过这两个库，是否找到了解决方法，或者对如何集成这两个库有什么建议 <

我正在寻找创建一个应用程序表单的前端，它将显示和导航为一个多步骤向导

我已经使用jQueryMobile 1.4.0构建了一个单独的垂直HTML页面，并且工作得非常好

然后，我添加了jQuery步骤1.0.4来集成向导特性，并保留了大部分外观。不幸的是，大多数表单字段的jQuery移动功能已经停止工作。例如，滑块不会拖动，文本框不会高亮显示。没有JS错误，字段最初显示正确，只是没有按应有的方式运行

我想知道是否有人曾经使用过这两个库，是否找到了解决方法，或者对如何集成这两个库有什么建议

<body>
<div id="main">
    <form id="" action="landing.html">
        <div id="wizard">
            <h1>Step 2 - Heading</h1>
            <div id="step_2">
                <section>
                    <fieldset data-role="controlgroup" data-type="horizontal">
                        <legend>Radio Options</legend>
                        <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" />
                        <label for="radio-choice-1">Option 1</label>
                        <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
                        <label for="radio-choice-2">Option 2</label>
                        <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
                        <label for="radio-choice-3">Option 3</label>
                    </fieldset>
                </section>
            </div>
        </div>
    </form>
</div>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js" type="text/javascript"></script>
<script src="scripts/libs/jquery.steps-1.0.4.js"></script>
<script src="scripts/initiate.wizard.js"></script>


第2步-标题
无线电选项
选择1
选择2
选择3

我找到了答案。根据jQuery步骤问题解决方案的作者：

我不得不推迟jquerymobile的自动启动，直到jQuery步骤完成了它所需要的一切

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>window.jQuery || document.write('<script src="scripts/libs/jquery-1.10.2.min.js"><\/script>')</script>
<script src="scripts/libs/jquery.steps-1.0.4.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script>jQuery.ui || document.write('<script src="scripts/libs/jquery-ui-1.10.4.min.js"><\/script>')</script>
<script>
    // delay jQuery Mobile initialisation to allow jQuery Steps initialise first
    $(document).on("mobileinit", function () {
        $.mobile.autoInitializePage = false;
    });
</script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js" type="text/javascript"></script>
<script>$.mobile || document.write('<script src="scripts/libs/jquery.mobile-1.4.0.min.js"><\/script>')</script>
<script src="scripts/initiate.wizard.js"></script>
<script>
    // now the DOM should be ready to handle the jQuery Mobile initialisation
    $(document).ready(function () {
        $.mobile.initializePage();
    });
</script>
<script src="scripts/scripts.js"></script>


window.jQuery | | document.write（“”）
jQuery.ui | | document.write（“”）
//延迟jQuery移动初始化以允许jQuery步骤先初始化
$（文档）.on（“mobileinit”，函数（）{
$.mobile.autoInitializePage=false；
});
$.mobile | | document.write（“”）
//现在DOM应该准备好处理jQuery移动初始化了
$（文档）.ready（函数（）{
$.mobile.initializePage（）；
});