Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

« Mobile avec iUI | Page d'accueil | Mobile avec Sencha Touch »

20 septembre 2011

Mobile avec jQuery mobile

Dans l'article précédent, je présente le cadre d'évaluation de plusieurs frameworks pour le développement d'application mobile. Cet article présente le détail pour jQuery Mobile.

La particularité de jQuery mobile est son support pour un grand, très grand, nombre d'appareils mobiles. La mise en œuvre est relativement facile et très axée sur le code HTML avec l'utilisation d'attributs "data-quelqueChose". La variété de composants d'interface est assez riche et offre une bonne base. Les rendus sont de qualité, comme le montre la figure suivante. La documentation est correcte, sans plus et la qualité générale est au-dessus de la moyenne.

La version testée, 1.0b1, se traîne souvent les pieds, autant au chargement que dans les effets de transition. Espérons que les nouvelles versions amélioreront cet aspect.

Pour un framework de base fonctionnant sur plusieurs appareils c'est un excellent choix.

 

arbrJQmobileListe.png

arbrJQMobileDetail.png

Voici le code pour jQuery Mobile

 

<!DOCTYPE html>
<html>
<head>
<title>Demo JQMobile</title>
 
<linkrel="stylesheet"
    href="${resource(dir:'js/jquery.mobile-1.0b1',file:'jquery.mobile-1.0b1.min.css')}"/>
<scripttype="text/javascript"
    src="${resource(dir:'js/jquery.mobile-1.0b1',file:'jquery-1.6.1.min.js')}">
    </script>
<scripttype="text/javascript"
    src="${resource(dir:'js/jquery.mobile-1.0b1',file:'jquery.mobile-1.0b1.min.js')}">
    </script>
 
<script type="text/javascript">
$(document).ready(function(){
    // le masquage pourrait être fait avec des CSS plus efficacement!
       var arr =new Array();
    var disp;
    $('.ui-slider').live('mouseup',function(index,el){
        
        arr = document.getElementsByClassName('listJD');
           for(var i =0; i < arr.length; i++){
               var obj = arr[i];
               if(parseInt(obj.children[0].children[0].children[0].children[5].textContent)==0){
                   obj.style.display ="none";
               }else{
                   if(parseInt(obj.children[0].children[0].children[0].children[5].textContent)<=parseInt($("#slider")[0].value)){
                       obj.style.display ="block";}
                   else{
                       obj.style.display ="none";}
                   
               }
           };
        });
var filterFeuillus =true;
    $("#feuillus").next('label').click(function(index,el){
        filterFeuillus = filterFeuillus==false?true:false;   
            if(filterFeuillus){disp ="block"}
                else
               {disp ="none"}
            arr = document.getElementsByClassName('listJD');
            for(var i =0; i < arr.length; i++){
                var obj = arr[i];
                if(obj.textContent
                        .indexOf("Feuillu")!=-1){
                    obj.style.display = disp;
                }else{    
                }
            }
    });
var filterConiferes =true;
    $("#coniferes").next('label').click(function(index,el){
        filterConiferes = filterConiferes==false?true:false;
            if(filterConiferes){disp ="block"}
                else
               {disp ="none"}
            arr = document.getElementsByClassName('listJD');
            for(var i =0; i < arr.length; i++){
                var obj = arr[i];
                if(obj.textContent
                        .indexOf("Conifère")!=-1){
                    obj.style.display = disp;
                }else{
                    
                }
            }
    });
});  
</script>
 
 
<style type="text/css">
.fr {
    font-weight:bold;
}
 
.lt {
    font-style:italic;
}
 
.fitToPort {
    width:100%;}
 
.Feuillu a.fr{
    background-image:url("../images/feuillu.jpg");
    background-repeat:no-repeat;
    background-position:010px;}
.Conifère a.fr{
    background-image:url("../images/conifere.jpg");
    background-repeat:no-repeat;
    background-position:010px;}
 
/* media queries from http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries */
</style>
 
</head>
<body>
 
<!-- Start of FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF F F F F first page  1 1 1 1 1 1 -->
<divdata-role="page"id="home">
    <divdata-role="header"data-position="fixed">
        <h1>Arbr</h1>
    </div><!-- /header -->
 
    <divdata-role="content">
        <divdata-role="controlgroup"data-type="horizontal">
            <inputtype="checkbox"name="feuillus"id="feuillus"  checked/>
            <labelfor="feuillus">Feuillus</label>
            <inputtype="checkbox"name="coniferes"id="coniferes"  checked/>
            <labelfor="coniferes">Conifères</label>
        </div>
    
        <divdata-role="fieldcontain">
            <labelfor="slider">Distance  (m) :</label>
            <inputtype="range"name="slider"id="slider"value="14" min="0" max="15"/>
        </div>
    
        <uldata-role="listview"data-inset="true"data-filter="true">
            <g:each in="${arbreInstanceList}" status="i" var="arbreInstance">
                <liclass="listJD ${fieldValue(bean: arbreInstance, field: "type")}">
                    <ahref='#detail_${fieldValue(bean: arbreInstance, field: "id")}'class="ui-link-inherit fr">
                        ${fieldValue(bean: arbreInstance, field: "nomFrancais")}
                    </a>
                </li>
            </g:each>
        </ul>
    </div>
    <!-- /content -->
 
    <divdata-role="footer"data-position="fixed"data-fullscreen="true"style="text-align:center;">
        <divdata-role="navbar"data-type="horizontal">
            <ahref="#home"data-role="button"data-icon="grid"class="ui-btn-active">Liste</a>
            <ahref="#zone"data-role="button"data-icon="star">Zones</a>
            <ahref="#home"data-role="button"data-icon="gear">Préférences</a>
        </div>
    </div>
    <!-- /footer -->
</div>
<!-- /page -->
 
<!-- Start of second page  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  DETAILS  -->
<!-- DETAILS pages  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
<g:each in="${arbreInstanceList}" status="i" var="arbreInstance">
<divdata-role="page"data-url='detail_${fieldValue(bean: arbreInstance, field: "id")}'>
        <divdata-role="header"data-position="fixed">
            <h1>Arbr</h1>
        </div>
        <!-- /header -->
 
    <divdata-role="content"><ahref="#home"class="ui-link-inherit">
        <imgsrc='${fieldValue(bean: arbreInstance, field: "imageURL")}'alt=""/>
        <pclass="fr">${fieldValue(bean: arbreInstance, field: "nomFrancais")}</p>
        <pclass="lt">${fieldValue(bean: arbreInstance, field: "nomLatin")}</p>
        <pclass="en">${fieldValue(bean: arbreInstance, field: "nomAnglais")}</p>
        <pclass="zone">${fieldValue(bean: arbreInstance, field: "zone")}</p>
        <pclass="distance">${fieldValue(bean: arbreInstance, field: "distanceMinimale")}</p>
    </div>
    <!-- /content -->
 
    <divdata-role="footer"data-position="fixed"data-fullscreen="true"style="text-align:center;">
        <divdata-role="navbar"data-type="horizontal">
            <ahref="#home"data-role="button"data-icon="grid">Liste</a>
            <ahref="#zone"data-role="button"data-icon="star"class="ui-btn-active">Zones</a>
            <ahref="#home"data-role="button"data-icon="gear">Préférences</a>
        </div>
    </div>
    <!-- /footer -->
</div><!-- /page -->
</g:each>
 
<!-- Start of 3rd page  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
<!-- ZONE pages  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
<divdata-role="page"data-url="zone">
    <divdata-role="header"data-position="fixed">
    <h1>Arbr</h1>
    </div><!-- /header -->
 
    <divdata-role="content">
        <imgsrc="http://www.hydroquebec.com/arbres/images/img_zones_rusticite.gif"
            class="fitToPort"alt="Carte des zones de rusticité du Québec"/>
    </div><!-- /content -->
 
    <divdata-role="footer"data-position="fixed"data-fullscreen="true"
        style="text-align:center;">
        <divdata-role="navbar"data-type="horizontal">
            <ahref="#home"data-role="button"data-icon="grid">Liste</a>
            <ahref="#zone"data-role="button"data-icon="star">Zones</a>
            <ahref="#home"data-role="button"data-icon="gear"class="ui-btn-active">Préférences</a>
        </div>
    </div>
<!-- /footer -->
</div><!-- /page -->
 
</body>
</html>

14:42 Publié dans Mobile | Lien permanent | Commentaires (0)