jQuery mobile collapsible div not styling correctly
Using this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</t开发者_开发问答itle>
<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>
I find that the expanding collapsible does not have the theme styling expected - in fact it has none. On viewing the source of the page and comparing it will the example page on jQuery mobile (http://jquerymobile.com/test/docs/content/content-collapsible.html) it appears that the following classes are missing from dynamically created div that wraps around the expanding paragraph below the header within the collapsible:
ui-btn-up-a ui-corner-bottom
The code running the example page is their own internal code and not the same as is used for deployment so I'm guessing there is something in theirs that is not in the beta release that dynamically creates the classes.
The question is whether anybody knows what the error is and how to solve this?
The Google code CSS file has relative references to images.
url(images/icons-18-white.png);
That's rarely helpful. Try hosting the CSS file locally and changing the references to match your file structure. Also, unless you're using firebug to view source, you won't see the classes. Using a browser's "View Source" option shows you the code delivered by the server, not the code created by javascript.
Update: Just did a copy / paste locally, and everything works fine. So it's not the code, gotta be something with your setup.
Update 2: Looking at your question, I realized you want the -content- to be themed. If you need that, you have to assign a data-role="content" to the content.
Okay the answer is: "Theming collapsible content requires jquery 1.6.4"
The referenced version is in the log for the rc1 release which was posted two days after I posted the above problem.
I was using an older version, viewing the source on the jquery example page this wasn't obvious as there is no version control reference immediately apparant just:
<script src="../../js/jquery.js"></script>
I'm not sure who would vote up the image path solution offered by Mike as being an answer to this question as it doesn't answer the question posted.
So if you upgrade your jq mobile you will need to upgrade your jquery to take advantage of what's on offer.
加载中,请稍侯......
精彩评论