Composition de la page à l’aide de https://01.org/rib/online/
Puis télécharger le fichier index produit sur votre serveur.
Pour utiliser jQuery Mobile téléchargez la dernière version : http://jquerymobile.com/download/
Extraire du zip le répertoire images et placez ce répertoire et les fichiers dans un réperoire « jquery » sur votre disque dur :
jquery.mobile.structure-x.x.x.css
jquery.mobile.theme-x.x.x.css
jquery.mobile-x.x.x.js
et téléchargez jquery derniére version : http://jquery.com/download/ (fichier jquery-x.x.x.min.js) et l’ajouter au répertoire « jquery » de votre disque dur.
enfin recopiez le contenu du répertoire » jquery » sur votre serveur (un zip est disponible ici). L’entête du fichier html sera :
<head>
<title>Titre page</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="jquery/jquery-1.11.1.min.js"></script>
<script src="jquery/jquery.mobile-1.4.3.js"></script>
<link href="jquery/jquery.mobile.structure-1.4.3.css" rel="stylesheet"/>
<link href="jquery/jquery.mobile.theme-1.4.3.css" rel="stylesheet" />
</head>
Soit, si on ne souhaite pas recopier sur son serveur les sources l’entête sera :
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
Les thèmes peuvent être personnalisés via le ThemeRoller
http://the-jquerymobile-tutorial.org/jquery-mobile-tutorial-CH11.php
1°) Widgets
Téléchargez le fichier puis placer les répertoires jqwidgets et scripts à la racine de votre site (vous pouvez aussi récupérer les zip ici https://app.box.com/s/bgmpg2443hny16t1i847 https://app.box.com/s/xjkykf9sid044v5a0jw7
Placez dans le <head> de la page (par exemple après le title) les balises :
<meta content="initial-scale=1.5, maximum-scale=1.5, user-scalable=yes" name="viewport"/>
<meta name="msapplication-tap-highlight" content="no" />
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.windowsphone.css" type="text/css" />
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.blackberry.css" type="text/css" />
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.android.css" type="text/css" />
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.mobile.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
Puis appel du widget avec l’adapter
$('#listbox').jqxListBox({
selectedIndex: 0, theme: theme, source: dataAdapter, displayMember: "date", valueMember: "trains", itemHeight: 30, height: '100%', width: '100%',
renderer: function (index, label, value) {
var datarecord = data[index];
var table = '<table><tr>' +datarecord.date + " " + datarecord.train + '</tr></table>';
return table;
}
});
Le widget étant placé dans la page html entre des <DIV>
<div id="demoContainer" class="device-mobile">
<div id="container" class="device-mobile-container">
<div style="border: none;" id="listbox"></div>
</div>
</div>
Andro Pebble 
Votre commentaire