Sergio Panagia Blog

Introducing Slideup: An iOs-like panel built for iUI framework

Mobile web application libraries are dividing in two main groups: lightweight libraries and complex and (often heavy) application framework with extended UI support.

Introduction

A good point of balance is iUI – a web UI framework for mobile devices. It offers a really basic, but very functional, navigation system between pages (the classic left-to-right and right-to-left swipe effect when transiting page). At this time is still a beta and there is some work to be done.

It’s deliberately delivered without support for various type of transition and effects like jQuery Mobile or jQTouch in order to stay light. And that’s really a good strategy; but the more you rely on pure javascript, the less developers will be attracted. Why? well, because JavaScript is hard comparing to jQuery or any other library. But for mobile applications, with their low- hardware performances, a good programming disposition might be the key to build a successful user experience.

Slideup, a full-screen -iOs like – javascript powered dialog

I built Slideup with iUI in mind, but it works everywhere, since has been written in pure javascript. That’s a really small plugin to generate the classic slide effect (down-to-top and top-to-down).

Just build a html panel inside a page (see iUI paradigm), with an element to activate and deactivate dialog.

At this point just declare an instance of Slideup:

var myDialog = new Slideup('openDialog', 'closeDialog', 'dialogPanel');

 

Slideup constructor takes 3+1 argoments:

  • id of element designed to open dialog
  • id of element designer to close dialog
  • id of dialog element
  • a function fired when user closes dialog (optional)

See more, download & demo:
Slideup on GitHub

3 Responses to Introducing Slideup: An iOs-like panel built for iUI framework

Maykel Barcala says: 2 settembre 2012 at 04:53

Hi Sergio,

I trying to add this implementation to my application but like in your example here, on iPone/iPad doesn’t work, it’s an expecific reason this is happening that i don’t see it?? Any idea??

Regards

mbarcala

Rispondi
Maykel Barcala says: 3 settembre 2012 at 21:48

Hi Sergio,

yes if you have it on a server online yes it will work fine as you example but I creating an App using html5, CSS3, Javascript (iUI-Framework), and when I tested on my iPhone doesn’t slideup at all? I using exact files like your example iUI.js and slideup.js files + css files, the only extra configuration I have added on my App it’s this small code here with the idea of hiding the toolbar in the home part.


(function() {
addEventListener("DOMContentLoaded", function(event){
var home = document.getElementById('home');
home.addEventListener('focus', hideNavbar, false);
home.addEventListener('blur', showNavbar, false);
}, false);
function hideNavbar(e) {
var navbar = document.querySelector(".toolbar");
iui.addClass(navbar, 'hidenavbar');
}
function showNavbar(e) {
var navbar = document.querySelector(".toolbar");
iui.removeClass(navbar, 'hidenavbar');
}
})();

so I don’t know what I’m missing could you have any idea what could causing me this situation? using this slideup as independent App

regards

mbarcala

Rispondi

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>