Páginas dinámicas con jQuery Mobile

He estado usando jQuery durante bastante tiempo y dando mis primeros pasos con jQuery Mobile.Páginas dinámicas con jQuery Mobile

Uso index.html como el diseño jQuery Mobile & de mi aplicación, que invoca el contenido de content.php (una vista de lista de todas las páginas) tan pronto como se carga.

utilizo page.php para una plantilla de contenido de la página, que muestra el contenido en función de una variable, así:??? page.php id = 01 page.php id = 02 page.php id = 03 ... Y así sucesivamente.

Estaba pensando que la mejor manera de hacerlo sería tener dos 'páginas' jQm en index.html, una para la página principal de la aplicación y otra que cargue dinámicamente el contenido de page.php? Id = xx. De esta forma, no tengo que cargar todo mi contenido tan pronto como se cargue mi aplicación.

¿Cómo se debe hacer esto? ¿Cómo puedo hacer que los elementos de vista de lista vayan a la siguiente página y carguen el contenido correcto en ella?

Fuente

2011-01-30 Adam Tal

Trabajo ejemplo comentó:

Crear una página vacía jqMobile (div con la función de datos adecuada, y un id de id = "dynamicPage")
Obtenga la identificación de su enlace de menú e insértelo como el atributo de título de la página vacía.

 
    $("#appMainMenu a").live("click", function(evt){ 
    var whatpageto = $(this).attr('id'); 
    $('#dynamicPage').attr('title', 'dpage-'+whatpageto); // the title would look like title="dpage-linksid" 
});

Datos de carga de este modo:

 
    $('#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. 
     }); 
});

Espero que esto ayude. ¿Preguntas?

Fuente

2011-02-21 17:41:32

Estoy usando JQM beta2, $ ('# dynamicPage'). Page() no representa la página. La interfaz de usuario se puede reintegrar con $ ('# ...'), listview ('refresh'), etc. Más discusiones [aquí] (https://forum.jquery.com/topic/page-no-longer-rerenders -the-page) –

Solo crea enlaces con <a href="... y funciona. JQM los carga con AJAX

La aplicación que cree con JQM debe funcionar en cualquier navegador anterior sin javascript. El resto está a cargo del propio JQM.

[editar]

Para obtener las direcciones URL y las puso cualquier lugar que desee sólo tiene que utilizar el viejo y simple .load() o .get() del arsenal jQuery y cuando llegue el contenido de un div que quería -

en desuso: el uso .página() de jQuery Mobile

actual: llamar .trigger('create')

(este evento agrega estilos y controles). instrucción detallada está en mi FAQ: http://jquerymobiledictionary.pl/faq.html

Fuente

2011-01-31 08:07:04 naugtur

Aunque esto funciona por lo general, se carga la página sin labrar. Lo que intento hacer es cargar el contenido de page.php? Id = 01 en el

existente en mi index.html que ya está diseñado. –

Lo único que lograría de esa manera sería romper la funcionalidad del historial de las páginas que carga. Pero esto se puede hacer con solo una llamada AJAX ordinaria. Editaré la publicación. – naugtur

Pero antes de usar esto ... por favor vea cómo se hacen los documentos en jquerymobile.com. Es un buen ejemplo. No deberías hackear jqm para que funcione de esta manera. Solo crea una página y vincula otras páginas. jqm los cargará con AJAX y se agregará a DOM. Obtienes lo que describes al final de la pregunta y mucho más. Y solo la página de inicio está cargada al principio. Puede (y de hecho debería) crear toda la página sin escribir ningún javascript usted mismo. Esa es la idea principal cuando se trabaja con jqm. – naugtur

Esto es lo que me ocurrió a resolver esto por mi página de

$("#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);

Para el detalle utilicé el controlador de eventos pageshow a buscar el objeto JSON utilizando el ID y cargado el elemento detalle basándose en el identificador en el Atributo detailId - algo así como loadDetail ($ ("# detailPage"). attr ("detailId")) y mi función loadDetail hizo el resto.

Desafortunadamente, esto romperá la estrategia de URL para jQuery móvil. Dado que el elemento seleccionado se almacena en la página en sí, esto no es bueno. Voy a intentar usar un enlace externo que sea una página HTML y pasar el ID como un arg.

Fuente

2011-03-10 06:36:40

Esto generalmente no es una buena idea para meterse con el móvil jquery así. – naugtur

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>

Fuente

2012-03-24 04:21:28

Páginas dinámicas con jQuery Mobile

Respuesta

Cuestiones relacionadas