jQuery Mobile Beta: больше не может использовать $ ('[data-role = header]')? - PullRequest
Новая
       1

jQuery Mobile Beta: больше не может использовать $ ('[data-role = header]')?

3 голосов
/ 01 июля 2011

Раньше я имел возможность получить 

$('[data-role=header]').first().height()

в альфа-версии с jQuery 1.5.2, но больше не могу в бета-версии с jQuery 1.6.1.Что-то изменилось?

Полный код - это записывает 0 в console.log ... 

<!DOCTYPE html> 
<html> 
 <head> 
 <title>Page Title</title> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
 <script type="text/javascript"
  src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 console.log($('[data-role=header]').first().height());
 });
 </script>
</head> 
<body> 
<div data-role="page" id="home">

       <div data-role="header">
       <h1>Header</h1>
       </div>
 <div data-role="content">
         //lots of code
        </div>
 </div>
 </body>
</html>

Однако измените это на jQuery 1.5.2 и jQuery Mobile alpha: 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>

и записывает ненулевую высоту заголовка div.

Кстати, он также ненулевой с jQuery 1.6.1, но без jQuery Mobile.Так что это как-то связано с рендерингом jQuery Mobile.

В примечаниях к выпуску 1017 * ничего не видно, чтобы предположить, что могло произойти, но я не эксперт по jQuery.

Ответы [ 2 ]

3 голосов
/ 01 июля 2011

Изменения, вызывающие разницу: «Вспомогательные классы дизайна: устарели»

Мы включили набор классов адаптивного дизайна , предназначенных дляЛегко создать адаптивный дизайн, который адаптирует макет к разной ширине экрана.В то время мы использовали систему динамически добавляемых классов минимальной и максимальной ширины в теле, которые обновляются при событиях загрузки, изменения размера и изменения ориентации в качестве обходного пути для ограничения того, что Internet Explorer не поддерживает медиазапросы.

По сути, для страницы min-height устанавливается текущая высота страницы в бета-версии, которая переопределяет .landscape { min-height: 300px; } в альфе.

Похоже, вам нужно использовать CSS Media Queries если вы хотите изменить макет страницы или просто добавьте CSS style="height:43px" в заголовок, если вам нужна фиксированная высота.

Похоже на страницуне готов при запросе height(). Для jQuery.mobile нет document.ready .Это не объясняет, почему существует разница между альфой и бета-версией, но я предполагаю, что изменился путь к коду, который выявил проблему.

Перенос запроса в другое событие возвращает ожидаемую высоту.

$("div:jqmData(role='page')").live('pageshow',function(){
    console.log($('[data-role=header]').first().height());
});

Я нашел это, изучив offsetHeight элемента DOM в консоли Chrome, который отличался от нуля, но, как вы сообщали, height() всегда сообщал 0. Я затем создал ссылку, когда нажал, вывестивысота и была ненулевойЗатем я понял, что height() вызывается до того, как страница будет полностью готова.

Соответствующий - jQuery mobile $ (документ). Уже эквивалентен

2 голосов
/ 01 июля 2011

Похоже, что они изменили некоторые синтаксис, документы:

При поиске элементов по их атрибуту данных jQuery Mobile, пожалуйста,используйте пользовательский селектор: jqmData (), поскольку он автоматически включает атрибуты пространств имен в поиск, когда они используются.Например, вместо вызова $ ("div [data-role = 'page']"), вы должны использовать $ ("div: jqmData (role = 'page')"), который внутренне сопоставляется с $ ("div [data - "+ $ .mobile.ns +" role = 'page'] ") без необходимости вручную объединять пространство имен в селекторы.

Попробуйте это: 

$("div:jqmData(role='header')").first().height()
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...