touchOverflowEnabled: true приводит к проблемам с диалоговым окном на iPad - PullRequest
Новая
       6

touchOverflowEnabled: true приводит к проблемам с диалоговым окном на iPad

0 голосов
/ 12 января 2012

Я хочу открыть диалог в сочетании с touchOverflowEnabled: true.

Проблема заключается в следующем: Диалог запускается правильно, но через пару миллисекунд фон под диалогом превращается из черного в белый; страница, кажется, сжимается. Кроме того, флажки на главной странице меньше; они не помещаются на всю страницу слева направо.

Если я не использую touchOverflowEnabled: true, все работает хорошо.

Есть идеи, как решить эту проблему ??

Вот мой полный пример кода (отсутствуют html-теги): 

<head> 
    <title>Title</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon" href="images/icon.png" />
    <link rel="apple-touch-startup-image" href="images/tablet_startup.png">
    <link rel="stylesheet" href="css/black-tie/jquery-ui-1.8.16.custom.css" />
    <link rel="stylesheet" href="css/jquery-mobile/jquery.mobile-1.0.css" />
    <link rel="stylesheet" href="css/styles.css" />
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
      $(document).bind("mobileinit", function(){
        $.extend(  $.mobile , {
          touchOverflowEnabled: true,
          defaultDialogTransition: 'pop',
          orientationChangeEnabled: false
        })
      });
    </script>
    <script type="text/javascript" src="js/jquery.mobile-1.0.js"></script>
</head> 
<body>
  <!-- Begin objective page -->
  <section id="questions_objectives" data-role="page">

      <header data-role="header" data-position="fixed">
          <h1>Goals</h1>
      </header><!-- /header -->

      <div data-role="content">
          <form id="f_objectives">
              <h3>Personal Goals</h3>
              <div data-role="fieldcontain">
                  <fieldset data-role="controlgroup">
                      <input type="checkbox" name="o_1" id="o_1">
                      <label for="o_1">Goal 1</label>
                      <input type="checkbox" name="o_2" id="o_2">
                      <label for="o_2">Goal 2</label>
                      <input type="checkbox" name="o_3" id="o_3">
                      <label for="o_3">Goal 3</label>
                  </fieldset>
              </div>
          </form>
      </div><!-- /content -->

      <footer data-role="footer" data-id="pluginFooter" data-position="fixed">
          <div align="center" data-role="controlgroup" data-iconpos="top" data-type="horizontal">
              <a href="#logout_panel" data-rel="dialog" data-role="button" data-icon="home">Abmelden</a>
          </div>
      </footer><!-- /footer -->

  </section><!-- /page -->
  <!-- End objective page -->

  <!-- Begin logout page --> 
  <section id="logout_panel" data-role="dialog">

      <header data-role="header">
          <h1>Logout</h1>
      </header><!-- /header -->

      <div id="section_logout" name="section_logout" data-role="content">
          <h3>Would you like to receive emails?</h3>
          <form id="logout_form">
              <div data-role="fieldcontain">
                  <fieldset data-role="controlgroup">
                      <input type="checkbox" name="logout_yes" id="logout_yes" checked="checked" onchange="setLogoutCB('YES')">
                      <label for="logout_yes">Yes</label>
                      <input type="checkbox" name="logout_no" id="logout_no" onchange="setLogoutCB('NO')">
                      <label for="logout_no">No</label>
                  </fieldset>
              </div>
          </form>
      </div><!-- /content -->

      <footer data-role="footer">
          <div id="btn_logout" align="center" data-role="controlgroup" data-iconpos="top" data-type="horizontal">
              <a href="#" data-role="button" data-icon="home" data-direction="reverse">Logout</a>
          </div>
      </footer><!-- /footer -->

  </section>
  <!-- End logout page -->

</body>

Ответы [ 2 ]

0 голосов
/ 21 февраля 2012

там, на мой взгляд, все ваши проблемы связаны с используемой вами версией jQuery - 1.7

Согласно блогу JQM

Напоминание: 1.0 поддерживает только ядро ​​jQuery 1.6.4

Поскольку версия 1.7 была выпущена совсем недавно и имеет некоторые существенные изменения (и улучшения), в настоящее время официально поддерживается только версия 1.6.4.Мы планируем добавить поддержку 1.7, когда выпустим версию 1.1.

Когда я использую touchOverflowEnabled с 1.6.4, кажется, что нет проблем, как вы объяснили выше.Есть еще небольшая ошибка с iPad и touchOverflowEnabled - диалог имеет только половину высоты страницы, но это также легко исправить с помощью одной строки css 

.ui-mobile [data-role="dialog"]{height: 100%;}

Надеюсь, все это полезно:)

С наилучшими пожеланиями,Михаил

0 голосов
/ 13 января 2012

я бы порекомендовал вам больше не использовать touchOverflowEnabled.У него есть свои проблемы, и его даже не будет в jquery mobile с версии 1.1
.

...