jQuery Mobile Tutorial: Basics | CodeForest As smart mobile phones are all over the place, the need for mobile web pages rises. Building a mobile web page is different in many ways then building a “normal” web page. To help us, smart people have developed a unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Yes, it’s jQuery Mobile. So, let me show how easy it is to use it. So open up your favourite editor and enter this code in: Now save this page as index.php and open it up in the browser. If you look closely, you will some strange attributes like data-role. So, let us do something fancy now. External linking By default, when you click on a link that points to an external page (ex. products.html), the framework will parse the link’s href to formulate an Ajax request (Hijax) and displays the loading spinner. Open a new file and paste this in: Save this file and load it in the browser. Internal linking Above is only code inside the body tags. Themes
jQuery Mobile, pourquoi le tactile est-il toujours mobile ? L’équipe de jQuery vient d’annoncer un nouveau site entièrement dédié aux interfaces tactiles et mobiles : jQuery Mobile. Le but est bien sûr d’optimiser jQuery pour ces nouvelles plates-formes, mais ce n’est pas tout : une version mobile de jQuery UI est également prévue ! Et plutôt que d’adapter jQuery UI à ces nouvelles contraintes, le projet consiste dans un premier temps à réfléchir sur les évolutions possibles du framework, de manière à ce qu’il prenne nativement en compte ces nouvelles interfaces. Un des problèmes posés actuellement par jQuery UI est son système de gestion des thèmes graphiques, Theme Roller, qui est trop « simple » pour permettre de créer des interfaces complexes. Prototype d’interface pour jQuery UI Mobile Évidemment, une évolution en ce sens profiterait également au web « classique ». Rendez-vous dans 10 5 2 ans !
An Introduction to jQuery Mobile <p>All the jQuery UI Elements must be wrapped within this Parent Container. One HTML Page/Document can have a Maximum of “1″ Container of this type</p> <pre class="brush: html; auto-links: false;"><div role="banner" class="ui-bar-a ui-header" data-role="header"><a data-theme="a" href="#" class="ui-btn-left ui-btn ui-btn-up-a ui-btn-icon-left ui-btn-corner-all ui-shadow" data-icon="arrow-l"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span><span class="ui-btn-text">Back</span></span></a> <p>This Section is the Header Part of the HTML Page, that is Visible at the Top and usually holds the Navigation Buttons. <p>This Section holds the Primary Content of any HTML Page, where most of the User Interactions happen. <p>This Section holds the Footer of any HTML Page, where the Copyright and other relevant Links are usually displayed. <p>All the Magic with jQuery Mobile happens with the “data-role” attribute associated with the containers.
Kartograph – rethink mapping jQuery pour Mobile - Veille technologique | CreativeJuiz - Du jus, des fruits, du fun... et du Web ! jQuery pour Mobile Cet article a 3 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci publié le Lu 2 066 fois. jQuery est le framework Javascript par excellence. Depuis peu de temps un petit plus est venu s’ajouter à cette belle collection de distinctions : Le framework jQueryMobile. Le contenu Plusieurs composants sont déjà disponibles sur cette version alpha : thèmes et layout,headers/footers (fixes et persistants),contrôles de formulaires,boîtes de dialogue,listes,événements,transitions La compatibilité Comme aux habitudes de jQuery, ce framework pour mobile est compatible avec tous les systèmes d’exploitation récents « mobiles ». Basé sur le principe de graceful degradation (dégradation gracieuse), la non prise en charge de tronçons HTML5/CSS3 par les navigateurs offrirait un contenu tout de même convenable pour une utilisation et une lecture des réalisations basées sur ce framework. Quelques données Le poids des fichiers reste plutôt correct : Et sinon…
Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade - Quick Start Guide ← Tutorials This step-by-step guide will quickly get you started on Leaflet basics, including setting up a Leaflet map, working with markers, polylines and popups, and dealing with events. Preparing your page Before writing any code for the map, you need to do the following preparation steps on your page: Now you’re ready to initialize the map and do some stuff with it. Setting up the map Let’s create a map of the center of London with pretty Mapbox Streets tiles. var mymap = L.map('mapid').setView([51.505, -0.09], 13); By default (as we didn’t pass any options when creating the map instance), all mouse and touch interactions on the map are enabled, and it has zoom and attribution controls. Note that setView call also returns the map object — most Leaflet methods act like this when they don’t return an explicit value, which allows convenient jQuery-like method chaining. Next we’ll add a tile layer to add to our map, in this case it’s a Mapbox Streets tile layer. Markers, circles and polygons
jQuery Mobile, le « comment c’est fait? » Dans mon article de lundi, je vous ai promis de revenir un peu plus en détails sur la façon dont est développé jQuery Mobile. Cet article est basé sur les nombreuses questions posées par un membre (tanidon288) des forums officiels de la communauté. Y a t'il des spécifications pour jQuery Mobile ? Oui mais elles ne sont pas publiques. Et aussi sur le site de démo/documentation : Comment est réalisé le développement ? Tout tourne autour d'un dépôt Github avec tous les outils qui vont avec. Vous pouvez bien sûr discuter de vôtre vision des choses sur le forum : Quels sont les projets déjà existants et visibles ? Il existe déjà quelques projets, le site de démo déjà signalé juste avant, un site dit "live" : Et évidement, il y a toujours des early adopters : D'autres existent, mais je n'ai pas de liste sous la main et en cherchant un peu, vous en trouverez sûrement d'autres.
BigVideo.js - The jQuery Plugin for Big Background Video The jQuery Plugin for Big Background Video (and Images) This plugin makes it easy to add fit-to-fill background video to websites. It can play silent ambient background video (or series of videos). Or use it as a player to show video playlist. BigVideo.js can also show big background images, which is nice to have for showing big background images for devices that don’t have autoplay for ambient video. BigVideo.js is built on top of Video.js from zencoder. You can read about how to use BigVideo.js below. DOWNLOAD: zip tar examples bower install BigVideo.js Setup BigVideo.js uses the Video.js api. To simply play a video that takes up the entire browser window (like in this example), do this: For crossbrowser fallbacks, you can include a source order with different video formats. Ambient Video To play silent video in the background of a page (like in this example), use BigVideo’s ambient setting: Or play a series of ambient background videos (like in this example) Video.js BV.getPlayer().pause();
jQuery Mobile - Le framework Javascript pour mobile made in jQuery jQuery Mobile est un nouveau framework javascript dédié aux navigateurs web mobiles, créé par jQuery. Grosse nouveauté dans le monde du web et surtout du mobile. Les créateurs du framework Javascript que l'on ne présente plus, viennent de sortir une nouvelle librairie: jQuery Mobile Framework. Avec l'essor des smartphones Android et iPhone/iPad dans le monde, il devient très intéressant de fournir des applications web compatibles mobile, et pourquoi pas avec des animations javascript qui fonctionnent ! Grâce à jQuery Mobile, vous pourrez développer en Javascript sans vous soucier de la compatibilité des navigateurs mobiles: Comme on peut le voir sur ce tableau, tous les derniers navigateurs mobiles sont supportés par jQuery Mobile. Là encore, on peut constater que le navigateur Windows Mobile est bon dernier du classement... La librairie est aussi très orientée interface mobile et proposera différents widgets pour créer des applications réussies en gardant la philosophie mobile.
Raphaël—JavaScript Library jQuery Mobile