过渡期间JQuery移动页面div余量发生变化。我该怎样预防呢?

时间:2014-06-02 22:01:37

标签: jquery html css mobile cordova

目前我正在使用jquery mobile创建一个phonegap应用程序,我遇到了这个问题。当手动为data-role ='页面提供一个margin-bottom时。 div,转换期间边距消失,转换完成后返回。我想在过渡期间保留保证金。请帮帮我。这是我的HTML代码:

<body>

    <div id='show-back' onclick='goBack();' style='display:none'><div class='back-button'></div></div>

    <div id='show-logout' style='display:none' onclick='clickLogout();'><div class='logout-button'></div></div>

    <div class='all-area'>

        <div class='header-area'>

            <div class='header-logo'><img src='img/unic-logo.gif' alt='' style='margin-top:20px' /></div>

        </div>

        <div class='content-area'>

            <div class='content-wrapper'>

                <div data-role='page' style='margin-bottom:150px !important;' id='home-page' data-title='University of Nicosia' data-theme='a'>


  AREA WHERE THE PAGES TRANSIT....

                </div>
            </div>                  
        </div>

        <div class='menu-area'>

            <div class='menu-icon-wrapper'>
                <a href='social.html' data-transition='none'><div class='menu-settings'>Settings</div></a>
                <a href='social.html' data-transition='none'><div class='menu-global'>Website</div></a>
                <a href='social.html' data-transition='none'><div class='menu-chat'>Social Networks</div></a>
                <a href='social.html' data-transition='none'><div class='menu-refresh'>Feedback</div></a>
            </div>

        </div>

        </div>
    </div>
</body>

如果您注意到data-role =&#39;页面&#39; div我包含了指定底部边距的样式定义。

感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

我明白了!我只需要在data-role =&#39; page&#39;中创建另一个带底部边距的div。而不是直接给予底部保证金。然后我必须使用jquery修复div高度。这是代码:

<div data-role='page' id='home-page' data-title='University of Nicosia' data-theme='a'>
  <div style='margin-bottom:150px;position:relative;width:100%;overflow-y:auto;overflow-x:hidden' id='content-fixer'>

   AREA WHERE THE PAGES TRANSIT....
  </div>
</div>

<script>
  $(docment).ready(function() {

    var contentHeight = $('#home-page').height();
    $('#content-fixer').height(contentHeight-150);
  });

</script>