Carnet Wiki

jQueryMobile pour SPIP

Version 5 — Juillet 2012 Seds

Documentation sur la construction d’un plugin squelette en jQueryMobile en vue d’un travail collaboratif.

Nécessite le plugin Cimobile.

Une redirection automatique soumise avec les périphériques :
ipad, xoom, maemo, playbook, archos, iphone, android, blackberry, Windows Phone OS 7, iris, 3g_t, windows ce, opera mobi, windows ce-smartphone, windows ce-iemobile, webos, pre\/, palm os, palm, hiptop, avantgo, plucker, xiino, blazer, elaine, et nuvifone.

- accessible avec le lien : monsite.fr/ ?cimobile=jqm et monsite.fr/spip ?objetXX&cimobile=jqm (avec cookie cimobile session navigateur)
-  monsite.fr/ ?cimobile=web pour revenir à squelettes-dist.

Attention ! on ne pourra pas naviguer entre les squelettes. On peut voire simultannément les 2 squelettes en les ouvrant sur 2 navigateurs.

L’utilisation d’un squelette entièrement en jQueryMobile présente quelques dysfonctionnements, notamment au sujet des ancres et du maintient des styles lors de chargement en ajax des formulaires .

/formulaires/login.html

Malgré :
- data-ajax=« false » l.16 et 53
- [(#FORMULAIRE_LOGIN{#URL_SITE_SPIP})] dans login-dialog.html

Pas de redirection automatique vers l’accueil
Ne charge pas le changement de statut, il faut recharger la page accueil pour voir apparaitre « se déconnecter » et « espace privé »

login-dialog.html

Si [(#FORMULAIRE_LOGIN{#ENV{url}|sinon{#URL_ECRIRE{accueil}}})]
Affiche « Vous êtes enregistré.. etc »
En revanche, si on clique sur ces liens, le nouveau statut est pris en compte.

Bug sur Pagination / Notes / Forums
JQM utilisent les ancres pour la navigation de certaines pages, par exemple la fonction data-rel=« dialog » utilisée sur ce squelette pour le login et l’inscritpion. Donc il ne reconnait pas les ancres que spip utilise.
Pour y remedier j’ai bien trouvé un js (ancre.js), mais il ne fonctionne pas.

Ajax

Outre la problématique des ancres, le chargement des ajax en pagination, sur formulaire (prévisu), supprime les styles JQM. Il existe une fonction data-ajax=« false » que je n’ai pas encore exploité partout, mais a priori elle semble fonctionner sur certains formulaires, mais pas sur la pagination

Pagination ok

Navigation

- toutes les paginations doivent être en ajax avec inclure
-  un js pour le maintien du css lors de la pagination / mais qlqfois ya une bug // ©christian

$(document).ready(function(){
	var JqmSpipAjaxLoad = function (){
		$('#articles_listview').listview().trigger("create");
		$('#auteurs_listview').listview().trigger("create"); 		// etc
	};
	if (typeof onAjaxLoad == 'function') onAjaxLoad(JqmSpipAjaxLoad);
});

[http://dev.twxdesign.com/jQueryMobile/->http://dev.twxdesign.com/jQueryMobile/] + id=« articles_listview  » dans l’ul des boucles ici en squelettes dist .

- et on vire les ancres de paginations sur /modeles/pagination.html, de toute façon avec ce js, meme si le css de la pagination se maintient l’ancrage ne fonctionne pas

- pb sur boucles mots du même groupe

URL_FORUM

Notez que pour passer du site public JQM à l’accès privé, il faut ouvrir dans une nouvelle fenêtre ou onglets, car jQuery tente d’imposer le style JQM sans trouver les css..

LTR vs RTL

virer l’ancre  :
surcharger / forums/generer_url_forum avec à Bon pour le moment , il faut recharger la racine jqm_fonctions page afin qu’elle prenne en charge le bon css .phpLe problème doit venir de |direction_css.

-

function jqm_fonctions($id_forum, $args='', $ancre='') {
 return urls_generer_url_forum_dist($id_forum, $args, '');
}

// ©denisb

-

 function jqm_fonctions($id_forum, $args='', $ancre='') {
  if ($id_forum = intval($id_forum)) {
    return urls_generer_url_forum_dist($id_forum, $args, '');
  }
  return '';
} 

// ©denisb

tous : site HS

/formulaires/forum.html

- fonctionne une fois sur 2.
-  double validation.
-  pb de css.
-  pb url : si sur url forum ne fonctionne pas.
-  formulaire non rechargé à la validation du commentaire

Périphériques à tester

Le site de jQueryMobile donne une liste (fr) exhaustive des périphériques supportés vu l’évolution du marché. Pour ce qui me concerne, je n’ai aucun problème, mes appareils étant iPad et iPhone. Il serait donc intéressant, de regarder un peu comment se comporte JQM_SPIP, et de faire des remonter, afin de mettre à jour peut-être la redirection dans /squel_mobiles/_config_cimobile.php

Corrections (01/07/12) :

Paginations Articles récents (sommaire.html), Articles (Rubriques et Auteur) : Résolues.
Lien accès privé, CSS privé : résolu avec target=« _blanc »

Chantier en cours :

/formulaires/forumlaire_ecrire_auteur.html

bug à l’envoi (en local seulement ?Création d’une configuration de choix parmi les [thèmes jQuery->http://jquerymobile.) com/themeroller /]

notes

Ancres  :

ancrage impossible

boutons admin

- inopérants sauf si ouverts dans autre onglet/fenetre navigateur
-  liens objets non chargés à la navigation, actualisation obligatoire pour changer objet.

Demos

Installation

Nécessitant Cimobile, une fois installé l’accès au site SPIP sous JQM depuis un ordianteur portable ou de bureau, se fera avec l’url http://monsite.fr/?cimobile=jqm (cookie session) - retour en http://monsite.fr/?cimobile=web
et accès objet : http://monsite.fr/spip.php?objet1&cimobile=jqm