2011-08-05 14 views
6

Tengo una aplicación creada usando jQuery (y usando varias herramientas jQuery-UI).¿Es posible crear elementos sobre la marcha con jQuery Mobile?

Por alguna razón, tengo que portarlo a smartphones/tablet PC, y decidió utilizar jQuery Mobile para que (con el fin de minimizar el número de cambios).

En mi aplicación de vanilla, creé algunos elementos de la página sobre la marcha, dependiendo de las interacciones del usuario.

Por ejemplo, un control deslizante se podrían crear de esa manera (p es un objeto con un montón de params):

function createSlider(p){ 
    return $("<div/>",{ 
       "id":p.id, 
       "class":p.divClass, 
      }).slider({ 
       "orientation": p.align, 
       "min":p.constraint.min, 
       "max":p.constraint.max, 
       "step":p.step, 
       "value":p.curVal, 
       "animate":"normal" 
       /*and some event handling here, but it doesn't matter*/ 
      }); 

} 

y producirá un control deslizante de aspecto agradable. Ahora que parece:

function createSlider(p){ 
    return $("<range/>",{ 
      "id":p.id, 
      "class":p.divClass, 
      "min":p.constraint.min, 
      "max":p.constraint.max, 
      "step":p.step, 
      "value":p.curVal, 
    }); 
} 

Pero ya que está creado sobre la marcha, todo lo hecho por jQuery Mobile en la carga de la página no se hace en él.

¿Hay alguna manera de forzar esa inicialización sin escribir el control deslizante en el html?

Gracias.

EDITAR: He encontrado en el doc que podría lograrse utilizando container.trigger("create"); Sin embargo esto no funciona todavía.

EDIT2: Ok create fue la solución.

Respuesta

4

De acuerdo con la documentación (véase la edición en la pregunta), utilizando trigger("create") en las obras de elementos que contienen.

Y para hacer que el trabajo, también es necesario recordar que el rango es un tipo de entrada y no una etiqueta ...

Solución de trabajo:

function createSlider(){ 
    return $("<input/>",{ 
      "type":"range", 
      "id":"sl", 
      "min":0, 
      "max":15, 
      "step":1, 
      "value":1, 
    }); 
} 

function appendSlider(){ 
    $("#yourdiv").append(createSlider()).trigger("create"); 
} 

Como anotación al margen, la documentación de jQuery móvil carece de una opción de búsqueda.

+0

Esto no funciona para mí. Si uso el .trigger ("crear"), las listas desplegables () se ven extrañas y se comportan inesperadamente. – Ted

0

Intente llamar al .page() en el contenedor al que se está agregando el contenido. Alternativamente, agregar .page() al contenido que está devolviendo también puede funcionar.

+0

Eso no funcionó. También probé trigger ("crear"); sin ningún éxito –

+0

¿Podría publicar cómo intentó llamar a 'page()'? –

+0

Ahí va: http://jsfiddle.net/bZVmk/2/ –

Cuestiones relacionadas