Среда
- jQuery 1.7.1
- jQuery Mobile 1.0 Final
- PHP с CodeIgniter 2.1.0
- LAMP
- Тестирование:
- GSM iPhone 4 с iOS 5.0.1
- Kubuntu 11.10
- Google Chrome 17.0.963.12 dev
- Firefox 9.0.1
Проблема
При загрузке страницы jQuery Mobile надлежащим образом предполагает, что я хочу просмотреть первый «упаковщик страниц» и отобразитьэто довольно красиво. Однако при нажатии на ссылку «Использование» ничего не происходит. Под ничем я подразумеваю, что нажатие на нее не загружает страницу с соответствующим идентификатором и не выполняет вызов post-back / ajax.Тем не менее, , если я обновлю страницу, я могу затем использовать меню (включая кнопку «Использование» и затем кнопку «Транзакция» на странице использования), так как оно должно работать.
Я посмотрелна вкладке Chrome Developer Tools Network ничего не отображается (как не должно, потому что это якорная ссылка, а контент уже находится в DOM).Я проверил это на своем iPhone и Chrome / Firefox (соответствующие номера версий выше).
Мне бы очень хотелось, чтобы эти две страницы были в одном и том же DOM, но я подозреваю, что их разделение будет работать.Я хотел бы оставить это в качестве крайней меры.
Вопрос
У меня есть какая-то синтаксическая ошибка или, возможно, мне не хватает какого-то ключа к среде jQuery Mobile?
Код
Примечание: Страница ниже обернута в обычную структуру скелета HTML> Head + Body, base_view, я пропустил это, но если вы хотите это увидеть, просто спросите и ядобавлю это.Единственными добавлениями являются метатег для конфигурации окна просмотра, два тега сценария Javascript и два тега ссылки CSS.
Ссылка, которая указывает на следующую страницу / DOM:
<a href="account_detail.php" data-role="button">Account Details</a>
Страница спостоянная навигационная панель:
<!-- ============ PAGE ONE ============ -->
<div id="transactions" data-role="page" class="ui-page">
<div data-role="header" data-position="fixed">
<a href="home.php" data-role="button" data-icon="arrow-l" data-iconpos="notext" class="ui-button-left" data-direction="reverse" data-prefetch>Back</a>
<h1>Transactions</h1>
</div> <!-- /header -->
<div id="content" data-role="content" class="ui-content">
Hello World!
</div> <!-- /content -->
<div data-role="footer" data-position="fixed" data-id="account_details">
<div data-role="navbar">
<ul>
<li>
<a href="#" class="ui-btn-active ui-state-persist">Transactions</a>
</li>
<li>
<a href="#usage" data-transition="fade" data-prefetch>Usage</a>
</li>
</ul>
</div> <!-- /navbar -->
</div> <!-- /footer -->
</div> <!-- /page one -->
<!-- ============ PAGE TWO ============ -->
<div id="usage" data-role="page" class="ui-page">
<div data-role="header" data-position="fixed">
<a href="home.php" data-role="button" data-icon="arrow-l" data-iconpos="notext" class="ui-button-left" data-direction="reverse" data-prefetch>Back</a>
<h1>Usage</h1>
</div> <!-- /header -->
<div id="content" data-role="content" class="ui-content">
Hello World, Again!
</div> <!-- /content -->
<div data-role="footer" data-position="fixed" data-id="account_details">
<div data-role="navbar">
<ul>
<li>
<a href="#transactions" data-transition="fade" data-prefetch>Transactions</a>
</li>
<li>
<a href="#" class="ui-btn-active ui-state-persist">Usage</a>
</li>
</ul>
</div> <!-- /navbar -->
</div> <!-- /footer -->
Спасибо
Заранее благодарим за то, что нашли время прочитать это и за любую помощь / обратную связь, которую вы можете предоставить!