Question

我很擅长使用jQuery mobile开发移动网络应用程序。我试图在data-role =“content”中创建Roundabout。问题是，Roundabout高度没有响应，它不会相应地改变屏幕高度。任何人都可以帮助我吗？

这是我的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;
  }

Answer 1

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

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

要了解有关网页活动的更多信息，请查看我的博客 ARTICLE ，文章的前半部分应该让您感兴趣。

你需要这个：

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

#pageID 是您的插件保留页面的ID。

还可能有另一个问题。由于内容高度，您的插件高度受到限制。由于某种原因，内容高度永远不会覆盖整个可用页面高度，只是其中的一部分。有几种方法可以手动完成。解决方案可以在我的其他答案中找到：jQuery Mobile: Markup Enhancement of dynamically added content只需查找一个名为：获取正确的最大内容高度的章节。

在data-role =“content”响应中使div成为可能

1 个答案: