0

我对使用 jQuery mobile 开发移动网络应用程序非常陌生。我试图在 data-role="content" 内创建一个环形交叉路口。问题是，环形交叉口高度没有响应，它不会相应地改变屏幕高度。谁能帮我？

这是我的html

<body>

<div data-role="page"> 
    <div data-role="header">
        <h1>Main App</h1>
    </div>

    <div align="center" data-role="content" style="width: 100% !important; min-height:200px !important " id="blockCarousel">
        <ul id="idCarousel" data-role="listview">
//li items goes here through AJAX
        </ul>
<div id="animateTest" class>
    <p id="containerDesc" class="nameItem" ></p>
</div>

</div>
<a href="#" style="display:none" class="next">Next please</a>
<a href="#" style="display:none" class="prev">Prev please</a>


</div>

我的CSS：

html{
position:relative !important;
text-align:center !important;
height:100% !important;
 }

 body{
//height:100% !important;
background: rgba(255,255,255,.4) !important ;
 }
 .roundabout-holder {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    width: 75% !important;
    top: 0 !important;
  }

.roundabout-moveable-item {
    height: 80% !important;
    width: 60% !important;
    background-color: #ccc !important;
    border: 1px solid #999 !important;
top: 0 !important;

-moz-user-select: none !important;
-webkit-user-select: none !important;
-webkit-user-drag: none !important;
 }

.roundabout-in-focus {
    cursor: auto !important;
top: 0 !important;
  }


 #animateTest {
position: relative !important;
height: 10em !important;
text-align: center !important;
background: #123 ;
padding: 20px 10px !important;
width: 25% !important;
display: block !important;
color: #fff !important;
margin: 0 auto !important;
border-radius: 5px !important;
font-weight: bold !important;
  }
4

1 回答 1

2

要理解这一点，您需要了解 jQuery Mobile 的工作原理。首先因为你没有发布你的 javascript 我只能猜测你做了什么。

首先，如果您正在使用准备好初始化 javascript 代码的文档，请不要这样做。文档就绪通常会在 DOM 中正确增强 jQuery Mobile 内容之前触发。这就是为什么使用正确的页面事件很重要的原因，主要是pageshow ，即使这是唯一可以计算正确页面高度的事件，所以当使用 jQuery Mobile 和需要高度的第 3 方框架（轮播、画廊......）时，总是在内部初始化它们一个页面显示事件。

要了解有关页面事件的更多信息，请查看我的博客文章，您应该对文章的前半部分感兴趣。

你需要这个：

$(document).on('pageshow', '#pageID', function(){ 
   //Initialize your plugin here
});

#pageID您的插件保存页面的 id在哪里。

也可能存在另一个问题。由于内容高度，您的插件高度受到限制。由于某种原因，内容高度永远不会覆盖整个可用页面高度，只会覆盖其中的一部分。有几种方法可以手动完成。解决方案可以在我的另一个答案中找到：jQuery Mobile: Markup Enhancement of dynamic added content just look a chapter called: Get correct maximum content height。

于 2013-07-05T08:10:11.707 回答