2011-09-27 68 views
0

使用此:jQuery Mobile的可折叠的div不正确的造型

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.6.3.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"> </script> 
</head> 
<body> 

<div data-role="collapsible" data-theme="a" data-content-theme="a"> 
    <h3>Header swatch A</h3> 
    <p>I'm the collapsible content with a themed content block set to "A".</p> 
</div> 
</body> 
</html> 

我发现,扩大可折叠没有预期的主题造型 - 事实上,它现在没有。在查看页面的源代码并比较它将在jQuery手机上的示例页面(http://jquerymobile.com/test/docs/content/content-collapsible.html)看起来,下面的类从动态创建的div中丢失围绕标题下方的扩大段落内的可折叠包装:

ui-btn-up-a ui-corner-bottom 

运行示例页面的代码是他们自己的内部代码,而不是一样被用于部署所以我猜有东西在他们的这不在动态创建类的beta版本中。

问题是,是否有人知道错误是什么以及如何解决这个问题?

+0

看看页面http://jquerymobile.com/test/docs/content/content-collapsible.html标题下的“Theming Collapsible Headers”,你可以看到我想要的成果,内容是以在底部有一个很好的圆形边框,所以它出现在一个带扩展头的块中。它通过在由js创建的包装div上包含类“ui-btn-up-a”来实现,而不是核心html代码的一部分。当我尝试复制它时,“ui-btn-up-a”不适用于包装div,因此缺乏样式。 –

回答

1

好答案是:“主题化的可折叠内容要求的jQuery 1.6.4”

引用的版本是记录,用于被张贴后两天我张贴上述问题的RC1新闻稿之后。

我使用的是旧版本,查看了jQuery示例页面这不是明显的来源,因为没有版本控制参考立即apparant刚:

<script src="../../js/jquery.js"></script> 

我不知道谁愿意投票将Mike提供的图像路径解决方案作为这个问题的答案,因为它不回答发布的问题。

所以,如果你升级你的jq手机,你将需要升级你的jquery以利用所提供的优势。

1

Google代码CSS文件对图像有相对引用。

url(images/icons-18-white.png); 

这很少有帮助。尝试在本地托管CSS文件并更改引用以匹配您的文件结构。另外,除非您使用萤火虫查看源代码,否则您将看不到这些类。使用浏览器的“查看源代码”选项将显示服务器提供的代码,而不是由JavaScript创建的代码。

更新:只做了本地复制/粘贴,并且一切正常。所以这不是代码,需要你的设置。

更新2:看着你的问题,我意识到你希望-content-为主题。如果你需要,你必须为内容分配一个data-role =“content”。

+0

嗨,感谢您的输入,但问题不在于样式路径。可折叠标题的样式很好,所有图标都存在等,这是可折叠的内容缺少任何格式。如果我使用firebug并从jQuery移动网站中删除类,那么样式也会消失,所以我非常确定这是动态创建的包装div的情况,它没有格式化主题外观所需的所有类。如果您使用上面的代码并按照描述来替换样式表,那么整个可折叠样式或带有+ - 图标的标题? –

+0

事实上,我可以使用Firebug编辑html并将ui-btn-up-a添加到该类中,并且它会根据需要进行更改。 –

+0

Hrm,好的,我会稍后再看看。只是一个简单的FYI,Google不会永远托管该测试代码(我刚刚通过beta 2了解到了这一点),因此请确保在制定备用计划时有一个备用计划。 –