Динамические страницы с помощью jQuery Mobile - PullRequest
Новая
       17

Динамические страницы с помощью jQuery Mobile

10 голосов
/ 30 января 2011

Я уже давно использую jQuery и делаю первые шаги с помощью jQuery Mobile.

Я использую index.html в качестве jQuery Mobile и дизайна моего приложения, которое вызывает контент из content.php (представление списка всех страниц), как только оно загружается.

Я использую page.php для шаблона содержимого страницы, который отображает содержимое в зависимости от переменной, например: page.php? ID = 01 page.php? ID = 02 page.php? id = 03 ... И так далее.

Я думал, что лучшим способом отсюда было бы иметь две jQm-страницы на index.html, одну для домашней страницы приложения, а другую, которая динамически загружает контент из page.php? Id = xx. Таким образом, мне не нужно загружать весь мой контент, как только загрузится мое приложение.

Как это сделать? Как заставить элементы представления списка перейти на следующую страницу и загрузить в нее нужный контент?

Ответы [ 4 ]

6 голосов
/ 31 января 2011

Просто создайте ссылки с <a href="..., и это работает. JQM загружает их с помощью AJAX

Приложение, которое вы создаете с помощью JQM, должно работать в любом старом браузере без JavaScript. Об остальном заботится сама JQM.

[править]

Чтобы получать URL-адреса и размещать их где угодно, просто используйте старый .load () или .get () из арсенала jquery, а когда вы получаете содержимое в div, хотел -

устарело: используйте .page () с мобильного jquery

текущий : звонок .trigger('create')

(это событие добавляет стили и элементы управления). Подробная инструкция в моем FAQ: http://jquerymobiledictionary.pl/faq.html

3 голосов
/ 21 февраля 2011

Рабочий пример с комментариями:

  1. Создание пустой страницы jqMobile (div с соответствующей ролью данных и id id = "dynamicPage")

  2. Получите идентификатор ссылки меню и вставьте его в качестве атрибута заголовка пустой страницы. 

    $("#appMainMenu a").live("click", function(evt){
    var whatpageto = $(this).attr('id');
    $('#dynamicPage').attr('title', 'dpage-'+whatpageto); // the title would look like title="dpage-linksid"
});
  1. Загрузите данные следующим образом: 
    $('#dynamicPage').bind('pageshow', function() {
        $('#dPage').html(''); // animate while we're loading data
        var whatpage = $(this).attr('title'); // get the page's title we changed earlier
        var whatpage1 = whatpage.replace("dpage-", ''); // remove the 'dpage-' part from the title, and we have our id.
        var whatpage2 = 'path/to/pagewhereyourcontentis.html'; // where is the content coming from? url or path to file
        $.get(whatpage2, function(data) { // load content from external file
          $('#dynamicPage').html(data); // insert data to the jqMobile page (which is a div).
          $('#dynamicPage').page(); // Re-render the page otherwise the dynamic content is not styled.
        });
});

Надеюсь, это поможет.Вопросы?

2 голосов
/ 10 марта 2011

Вот что я решил, чтобы решить эту проблему для моей страницы 

$("#masterList").empty();
var listItems = "";
$.each(data.Messages, function (i, item)
{
    listItems += "<li><div><a href='#messageData' onclick='$(" +   // Use a click handler to set the attr of detailPage div
             '"#detailPage").attr("detailId", "'+ item.Id +       // my JSON item has an ID
             '")' + "'>";                                         // note the crazy quoting

    listItems += "Test about the item</a></li>";

}
$("#masterList").append(listItems);

Для detailPage я использовал обработчик событий PageShow для получения объекта JSON с использованием идентификатора и загрузил элемент детализации на основе идентификатора ватрибут detailId - что-то вроде loadDetail ($ ("# detailPage"). attr ("detailId")) и моя функция loadDetail сделали все остальное.

К сожалению, это нарушит стратегию URL для jQuery mobile.Поскольку выбранный элемент хранится на самой странице - это не хорошо.Я собираюсь попробовать использовать внешнюю ссылку, которая является HTML-страницей, и передать идентификатор в виде аргумента.

0 голосов
/ 24 марта 2012

enter image description here

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0"/>
<link rel="stylesheet"  href="jquery.mobile-1.0.1.css" /> 
<title> Hello World </title>

<script src="jquery.js"></script>
<script src="jquery.mobile-1.0.1.min.js"></script>

<script type="text/javascript">
$(document).ready(function(e) {

$('#omtList').html('<ul data-role="listview" data-split-icon="delete" data-split-theme="d"> <li><a href="index.html"><h3>Broken Bells</h3><p>Broken Bells</p></a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album </a></ul>').trigger('create');
    });
</script>
</head>

<body>
omt
<div>
    <div id="omtList">  


    </div><!--/content-primary -->  
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...