Использование jQuery Mobile с шагами jQuery

Я ищу для создания front-end для формы приложения, которая будет отображать &, в качестве многоэтапного мастера.Использование jQuery Mobile с шагами jQuery

Я построил единую вертикальную HTML-страницу с использованием jQuery Mobile 1.4.0 и получил эту работу довольно хорошо.

Затем я добавил jQuery Steps 1.0.4 для интеграции аспекта мастера и сохранил большую часть внешнего вида. К сожалению, функция jQuery Mobile для большинства полей формы перестала работать. Например, ползунки не перетаскиваются, текстовые поля не выделяются. Ошибок 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>

источник

2014-02-03 Delorian

я обнаружил ответ. Согласно автору разрешения проблем Jquery СТЭП:

https://github.com/rstaib/jquery-steps/issues/31

мне пришлось задержать автоматическое инициирование JQuery Mobile, пока после того, как 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>

источник

2014-02-03 19:47:35 Delorian

Приятная находка, спасибо! –

Использование jQuery Mobile с шагами jQuery

ответ

Смежные вопросы