JQuery

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

http://www.jqwidgets.com/

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>  

 

 

Votre commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l’aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s

Articles récents
Commentaires récents
Catégories
Archives
%d blogueurs aiment cette page :