JQuery мобильный складной div не укладывается правильно - PullRequest
Новая
       6

JQuery мобильный складной div не укладывается правильно

0 голосов
/ 27 сентября 2011

Используя это: 

<!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

Код, запускающий страницу примера, является собственным внутренним кодом, а не тем, который используется для развертывания, поэтому я предполагаю, что в них есть что-то, чего нет в бета-версии, которая динамически создает классы.

Вопрос в том, знает ли кто-нибудь, что это за ошибка и как ее решить?

Ответы [ 2 ]

1 голос
/ 04 октября 2011

Хорошо, ответ таков: «Для разборного контента требуется jquery 1.6.4»

Ссылочная версия находится в журнале для выпуска rc1, который был опубликован через два дня после того, как я опубликовал вышеупомянутую проблему.

Я использовал более старую версию, просматривая исходный код на странице примера jquery, это было неочевидно, так как нет ссылки на управление версиями сразу же, просто: 

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

Я не уверен, кто бы проголосовал за решение по пути к изображениям, предложенное Майком как ответ на этот вопрос, поскольку оно не отвечает на опубликованный вопрос.

Так что, если вы модернизируете свой jq mobile, вам нужно будет обновить jquery, чтобы воспользоваться преимуществами предлагаемого.

1 голос
/ 27 сентября 2011

Файл CSS кода Google содержит относительные ссылки на изображения. 

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

Это редко помогает. Попробуйте разместить файл CSS локально и измените ссылки в соответствии с вашей файловой структурой. Кроме того, если вы не используете firebug для просмотра исходного кода, вы не увидите классы. При использовании в браузере опции «Просмотр исходного кода» отображается код , предоставляемый сервером , а не код, созданный javascript.

Обновление: Только что скопировал / вставил локально, и все работает отлично. Так что это не код, должно быть что-то с вашей настройкой.

Обновление 2: Глядя на ваш вопрос, я понял, что вы хотите, чтобы -content- был тематическим. Если вам это нужно, вы должны назначить data-role = "content" для контента.

...