background preloader

jQuery Mobile Tutorial: Creating a Restaurant Picker Web App

jQuery Mobile Tutorial: Creating a Restaurant Picker Web App
Mar 08 2012 With an increase in the number, diversity and complexity of smartphones, more and more companies want to have their own mobile app, but creating a native app can be pretty expensive. It requires special skills, as well as special coding tools, and then there is also the need to build an app per platform (Android, iOs, BlackBerry, Windows Phone, etc). All of this figures in to a higher price tag for the app development. The jQuery framework has been around the web for a while now, but the jQuery base technology was basically designed for browser apps. jQuery Mobile is a framework based on jQuery that enables web designers to create web-apps that are optimized for use on a mobile device (Smartphone and tablets). In this jQuery Mobile tutorial, we will create a nice demo app from scratch, to show some of the things that can be easily done using this powerful tool. The Concept of the Mini App: Restaurant Picker Wireframing Our Application. Home Screen : Choose a Plate Choose a Town Related:  Favorite Jquery Mobile Tutorials

Active button in navbar in Jquery Mobile - Yousef Jadallah's Blog When you add ui-btn-active class to your anchor, it will activate the selected button in your navbar. Moreover, if you'd like to keep it active when you return to it again, you need to add ui-state-persist. jquery mobile framework detects ui-state-persist class, then fires the delegate as following: $navbar.delegate( "a", "vclick", function( event ) { if( ! $.mobile.activeBtnClass is equivalent to "ui-btn-active" which it's a class used for "active" button state, from CSS framework. Here you can find an example: <! In the previous example you find out that the navbar transitions with the page; to make the footer sticks persistently. <! Hope that helps.

Part 1: Create a "Hello, world" app (Windows Store apps using JavaScript and HTML) This tutorial teaches you how to create a simple "Hello, world" app using Javascript and HTML. It's the first tutorial in a series of 5 that teach you what you need to know to build apps. In this tutorial, you learn how to: Create a new projectAdd HTML content to your start pageHandle touch, pen, and mouse inputSwitch between the light and dark style sheetsCreate your own custom stylesUse a Windows Library for JavaScript control We show you how to create an app using HTML, JavaScript, and CSS. Tip If you want to skip the tutorial and go straight to the code, see Getting started with JavaScript: Complete code for the tutorial series. Before you start... To complete this tutorial, you need Windows 8.1 and Microsoft Visual Studio Express 2013 for Windows. Step 1: Create a new project in Visual Studio Let's create a new app named HelloWorld. Launch Visual Studio Express 2013 for Windows. The Windows and Phone projects each contain a number of files: These files are essential to all apps. <!

Adding driving directions to a jQuery Mobile web site My first morning at Scotch on the Rocks was a bit rough. Despite getting to bed at a decent time (10:30 or so) so I could catch up on my sleep, I ended up waking up around 3:30 or so in the morning and tossing and turning till 6. During that time an idea popped in my head for one more demo I could do for my jQuery Mobile presentation. I was thinking about building a simple mobile web site for the hotel. I thought it would be a simple example but also pretty practical. First, I'll begin by showing a few screen shots of the application I built. My hotel mobile home page has three links: Contact Us, Find Us, and About. On a mobile device, clicking that phone number will automatically call the hotel. Yeah, nothing important here. Now that you've seen those pages - let's look at the code behind it. ColdFISH is developed by Jason Delmore. <div data-role="header"> <h1>Apex Hotels</h1> </div> <div data-role="footer"> <h4>This is NOT a real Apex Hotels page. </body></html> 1<! Sweet, right?

JavaScript: Créer des applications Web avancées avec des techniques orientées objet JavaScript Créer des applications Web avancées avec des techniques orientées objet Ray Djajadinata J'ai récemment interviewé un développeur de logiciels qui a cinq ans d'expérience dans le développement des applications Web. Ayant travaillé sur JavaScript pendant quatre ans et demi, elle estime être au point dans ce domaine. D'une certaine façon, cette supposition n'est pas sans fondement. D'ailleurs, jusqu'à très récemment, j'ai toujours réussi à me débrouiller avec le peu que je savais sur JavaScript, armé seulement de la référence DHTML MSDN® et de mon expérience en C++/C#. La programmation orientée objet est une approche populaire qui est utilisée par la plupart des bibliothèques JavaScript pour créer une base de code plus facile à gérer et maintenir. Les objets JavaScript sont des dictionnaires Dans C++ ou C#, lorsque nous parlons d'objets, nous faisons référence aux instances de classes ou « structs ». fait exactement la même chose que ceci : Voici donc pour les propriétés d'objet.

Resources In this section, we have gathered useful resources that will help you learn more about jQuery Mobile, find tools to develop jQuery Mobile application designs and mockups, tutorials and tools to guide your through the development of simple or more complex applications and related articles. Featured sites | Books | Apps & Frameworks | Plugins | Extensions | Tools | Themes | Articles & Tutorials Featured jQuery Mobile sites from jQMGallery.com You will find below a great sample collection of Mobile sites built with jQuery Mobile. More examples can be found in the jQM Gallery. Books Apps & frameworks 3rd party plugins These are all jQuery Mobile compatible plugins, many use the theme framework, auto-initialization and data- attribute configuration features or core mobile widgets. 3rd party extensions These are 3rd Party extensions that add capabilities to existing functionality. Tools Themes Articles & Tutorials

JavaScript: Créer des applications Web avancées avec des techniques orientées objet JavaScript Créer des applications Web avancées avec des techniques orientées objet Ray Djajadinata J'ai récemment interviewé un développeur de logiciels qui a cinq ans d'expérience dans le développement des applications Web. Ayant travaillé sur JavaScript pendant quatre ans et demi, elle estime être au point dans ce domaine. Mais, comme je m'en suis rendu compte peu après, elle ne savait en fait pas grand chose sur ce langage. D'une certaine façon, cette supposition n'est pas sans fondement. D'ailleurs, jusqu'à très récemment, j'ai toujours réussi à me débrouiller avec le peu que je savais sur JavaScript, armé seulement de la référence DHTML MSDN® et de mon expérience en C++/C#. La programmation orientée objet est une approche populaire qui est utilisée par la plupart des bibliothèques JavaScript pour créer une base de code plus facile à gérer et maintenir. Les objets JavaScript sont des dictionnaires fait exactement la même chose que ceci : Voici donc pour les propriétés d'objet.

Use jQuery Mobile to Build a Native Android News Reader App In this three part tutorial series, our main goal is to describe how jQuery Mobile can be used to develop a native Android application. First, we will develop a stand-alone, sample web application that will browse articles from Yahoo! News using jQuery Mobile. Then we will convert that web application into a native Android application with minimal effort. The jQuery Mobile project is a mobile web framework with its alpha 2 version released in November, 2010. The framework can be used to develop cross-platform mobile web applications for Android OS, iOS, Blackberry OS, and similar platforms (For a complete cross-compatibility chart, see First, we will illustrate the dynamic construction of basic UI elements in jQuery Mobile. Second, we will demonstrate how to develop a native Android application where the UI is coded via the jQuery Mobile framework. Organization Of This Series Page Flow Observe the spinning icon during certain transitions. Page Structure

Créer une application iphone : Tutoriel avec PhoneGap et SenchaTouch | Blog agence web open source Les plateformes open source se sont beaucoup développées ces dernières années. Il s’agit de plateformes « libres de droits » qui permettent à tous les utilisateurs d’accéder à l’intégralité du code source. L’avantage majeur de ces plateformes est de pouvoir évoluer grâce aux actions de la communauté. Chacun peut apporter ses modifications afin de rendre la plateforme meilleure pour tous les utilisateurs. Parmi ces plateformes, certaines sont dédiées à la création d’applications mobiles comme l’explique le tutoriel ci-dessous pour les plateformes PhoneGap et SenchaTouch. Le marché des applications mobiles est un marché très récent. En 2009 sort Android 2, cela permet à Google de percer sur le marché des OS mobiles et de démultiplier ses parts de marché en 3 ans : 2% de parts de marché en 2009 contre 46% en 2012 (pour le marché français). 2010 sera l’année de la popularisation des tablettes tactiles avec la sortie de l’iPad. Logiciels et matériels utilisés : Installation du JDK Rien à modifier

How to style buttons with jQuery Mobile The future belongs to mobile web apps that function on a broad range of smartphones and tablets. The excerpt below from jQuery Mobile helps you get started with jQuery Mobile, the touch-optimized web framework for creating apps that look and behave consistently across many devices. jQuery Mobile will automatically create stylized buttons out of regular form buttons, whether they be created with the input tag or the button tag. jQuery Mobile can also create buttons out of simple anchor links, by applying the data-role="button" to them. By default, buttons will stretch to fit the width of their containing element. By applying the data-inline="true" attribute to a button, you can create inline buttons that are only as big as their content requires (Example 1, Figure 1). Example 1. Figure 1. Warning: As of this writing, the jQuery Mobile documentation states that by applying the data-inline="true" attribute to a containing element, all buttons contained therein will be rendered inline.

Comment “cuisiner” une application Windows 8 avec HTML 5, CSS3 et JavaScript en une semaine–Jour 0 - Eternal Coding - HTML5 / Windows / Kinect / 3D development (La version finale est accessible ici: ) Le but de cette série d’articles est de fournir une recette pragmatique pour écrire une application Windows 8 à partir de zéro. L’application que j’utiliserai comme exemple est nommée UrzaGatherer et est utilisée pour aider les collectionneurs de cartes Magic The Gathering à gérer leur collection. UrzaGatherer fut développé à l’origine avec WPF 4.0 ( ) mais j’ai préféré utiliser HTML 5, CSS3 et JavaScript pour développer la version Windows 8 car je voulais me pencher sur ce nouveau mode de développement. Pour développer l’application, vous allez donc avoir besoin de : La solution peut être téléchargée ici: L’intégralité de la série est disponible ici: Le projet est ainsi créé avec uniquement les fichiers nécessaires : <!

Top 10 jQuery Mobile Code Snippets that you need to know jQuery Mobile is a framework for mobile web apps and mobile websites with an aim to provide a unified user interface system across many mobile device platforms such iPhone, BlackBerry, Android and Windows Mobile. The framework is built on top of one of the most popular Javascript frameworks, jQuery. Followings are some of the most useful code snippets that I’ve used in my recent web app developed using jQuery Mobile framework. 1. If your list item or button has a long text, it will be truncated automatically by jQuery Mobile. For example, to disable truncation for buttons: To disable truncation for list descriptions: To enable truncation, set it to “white-space: nowrap;“. 2. jQuery Mobile has a number of page initialization events that you can use to trigger certain methods on page load. Javascript $('.my-page').live("pagecreate", function() { var randombg = Math.floor(Math.random()*4); // 0 to 3 $('.my-page').removeClass().addClass('bg' + randombg); }); 3. And to re-enable it: 4. 5. 6. 7. 8.

Related: