Tonio™ Blog: jQuery mobile

Affichage des articles dont le libellé est jQuery mobile. Afficher tous les articles

jeudi 1 novembre 2012

Un simulateur de crédit à emporter

Aujourd'hui je vous fait partager un petit développement personnel effectué afin de tester les possibilités offertes par le framework jQuery mobile. Il s'agit d'un petit utilitaire permettant de simuler un emprunt quelconque (prêt immobilier, crédit à la consommation, ...) en précisant le montant et la durée d'emprunt, le taux d'intérêt et d'éventuelles charges additionnelles (prîmes d'assurances ou autres).

Le résultat est présenté de manière synthétique sous forme de popup avec le montant de la mensualité, le total des intérêts, le taux effectif global et le coût total du crédit. Une vue détaillée par mensualité permet de visualiser le détail des intérêts, du montant remboursé et du montant restant à rembourser. Voici le résultat :

Vous pouvez également faire le test sur votre smartphone ou tablette

vendredi 13 avril 2012

Introducing jQuery dice plugin

jQuery dice plugin is a jQuery plugin that ease the inclusion of dice inside your jQuery-based website. It is based on CSS3 and Javascript and allow you to draw 2D dice of any size without using any image.

dice build using jQuery dice plugin

>> project page on GitHub <<

How to use

Include both the css and the javascript plugin into your html page :

You can then turn any <DIV> into a die by calling the dice function :

$("#die").dice({
    size: 100, // in pixels
    val: 3, // 1, 2, 3, 4, 5, 6
    rotation: 0 // O to 359 deg
});

The dice function accepts three options :

size :: The dimensions of the die in pixels (height and width are equals); default : 100px
val :: The face of the die (1, 2, 3, 4, 5 or 6); default : random
rotation :: The rotation of the die in degrees. The anchor point is the middle of the die.; default : 0

Test it with the jQuery mobile demo page bellow :

demo page source code

Only the following browser are supported yet :

Firefox
Chrome (including Android 2.3+)
Safari (including iPhone and iPad)

lundi 5 décembre 2011

Carte Google Map plein écran avec jQuery Mobile

jQuery mobile est arrivé en version finale il y a quelques jours. Voyons avec quelle simplicité jQuery mobile nous permet de créer des Mashups à base de Google Map API et portable sur n'importe quel terminal mobile supporté par jQuery mobile.

Récupération du template HTML5

jQuery mobile propose des templates de pages permettant de démarrer rapidement. Nous utiliserons le template suivant, légèrement modifié afin de pouvoir utiliser les icones personnalisées map icons de Nicolas Mollet disponible sous licence Creative Commons 3.0 BY-SA :

<!DOCTYPE html> 
<html> 
    <head> 
    
    <title>Fullscreen Google map with jQuery mobile</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
    
</head> 

<body> 

<div data-role="page" id="map" data-theme="a">

    <div data-role="header" id="header" data-position="fixed">
        <h1>Fullscreen Google map with jQuery mobile</h1>
    </div>

    <div data-role="content" id="content">    
        <!-- carte google map -->
    </div>
    
    <div data-role="footer" data-position="fixed">        
        <div data-role="navbar" data-iconpos="top">
            <ul>
                <li>
                    <a class="ui-btn ui-btn-icon-top ui-btn-up-a ui-btn-active" 
        data-icon="information" href="#" >
                        Infos
                    </a>
                </li>
                <li>
                    <a class="ui-btn ui-btn-icon-top ui-btn-up-a" data-icon="favorite" href="#">
                        Favoris
                    </a>
                </li>
                <li>
                    <a class="ui-btn ui-btn-icon-top ui-btn-up-a" data-icon="radar" href="#">
                        Radars
                    </a>
                </li>
            </ul>
        </div>
    </div>
    
</div>

</body>
</html>

Les icônes personnalisées déposées dans le répertoire static/images sont mises en place avec le CSS personnalisé ci dessous :

<style type="text/css">
    .ui-icon.ui-icon-favorite, .ui-icon.ui-icon-radar, 
    .ui-icon.ui-icon-information, .ui-icon.ui-icon-evenement {
        margin-top: -16px;
        margin-left: -19px;
        width: 37px;
        height: 37px;
        box-shadow: none;
    }
    .ui-icon.ui-icon-favorite {
        background: url(static/images/favorite.png) top center;
    }
    .ui-icon.ui-icon-radar {
        background: url(static/images/radar.png) top center;
    }
    .ui-icon.ui-icon-information {
        background: url(static/images/information.png) top center;
    }
    .ui-icon.ui-icon-evenement {
        background: url(static/images/evenement.png) top center;
    }
</style>

Ce qui nous donne le rendu de page suivant, avec sa barre de navigation style iPhone contenant nos icônes personnalisées :

Chargement de la carte Google en plain écran

L'étape suivante consiste à charger notre carte et à dimensionner son conteneur de façon à ce qu'il occupe la totalité de l'écran. Le padding du corps de la page qui contient le conteneur de la carte est positionné à 0 :

<div data-role="content" id="content" style="padding:0">
    <div id="map_canvas"></div>
</div>

L'événement pageshow de la page est utilisé pour de déterminer les dimensions maximales de la carte afin qu'elle occupe tout l'espace disponible. Cet évènement permet de s'assurer que tous les widgets jQuery mobiles ont été initialisés par le framework :

<script type="text/javascript">
    function initialize() {
        var latlng = new google.maps.LatLng(45.7452, 4.8418);
        var myOptions = {
            zoom: 14,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(
                                document.getElementById("map_canvas"), 
                                myOptions);

    }
    
    $('#map').live('pageshow', function(event) {
        $("#map_canvas").width($(document).width());
        $("#map_canvas").height(
            $(window).height() 
            - $("div.ui-footer").outerHeight() 
            - $("div.ui-header").outerHeight()
        );
        initialize();
    });
</script>

Et voila, comme diraient nos amis anglophones !