Dialogues plugin
Note how we allow the native dialogue plugin to work only when the plugin ins available. If you are testing in the browser you will stall have access to the standard browser alert function
But if the dialogue plugin is loaded, you will instead get the native experience
document.addEventListener('deviceready', function () {
FastClick.attach(document.body);
if (navigator.notification) { // Override default HTML alert with native dialog
window.alert = function (message) {
navigator.notification.alert(
message, // message
null, // callback
"Workshop", // title
'OK' // buttonName
);
};
} else console.log("No notification plugin found");
}, false);
Fast Click
Hijacks click events with with touch events.
Notice in the above script that fastclick is also included
Native Scrolling
for iOs and Android you can use CSS -webkit-overflow-scrolling( for old devices you can use the iScroll JS library)
#scroller {
overflow: auto;
-webkit-overflow-scrolling: touch;
position: absolute;
top: 48px;
bottom: 0px;
left: 0px;
right: 0px;
}
Transitions via CSS
Note the use of 3D transitions to the get the GPU rather than the CPU To do the rendering
Only new devices will support 3D acceleration, may need to detect version and then use the appropriate method
| slow | fast |
.page {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
.left {
left: -100%;
}
.center {
left 0;
}
.right {
left: 100%;
}
.transition {
transition-duration: .25s;
} | .page {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
transform: translate3d(0, 0, 0);
}
.left {
transform: translate3d(-100%, 0, 0);
}
.center {
transform: translate3d(0, 0, 0);
}
.right {
transform: translate3d(0, 0, 0);
}
.transition {
transition-duration: .25s;
} |
Framworks
Full Stack
- dojo toolkit
- Jquery Mobile
- Sencha
|
UI
- Bootstrap
- React
- TopCoat
- Rachet
- Ionic
| Framework
- Backbone.JS
- Angular.JS
- Eimber
- Knockout
| DOM
|
|
Social Sharing plugin
iOS Status Bar Handling
Fix in the config.xml file
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#209dc2" />
<preference name="StatusBarStyle" value="lightcontent" />
Fix programatically in app.js, at the top of the deviceready handler
document.addEventListener('deviceready', function() {
StatusBar.overlaysWebView( false ); // push view down 20 pixels
StatusBar.backgroundColorByHexString( '2#09dc2' );
StatusBar.styleLightContent(); // white text on status bar
// statusBar.styleDefault(); // black text on status bar
}, false
document.addEventListener('deviceready', function() {
FastClick.attach(document.body);
StatusBar.overlaysWebView( false );
StatusBar.backgroundColorByHexString( '2#09dc2' );
StatusBar.styleLightContent();
if (cordova.plugins.Keyboard)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
if (navigator.notification) { // Override default HTML alert with native dialog
window.alert = function (message) {
navigator.notification.alert(
message, // message
null, // callback
"Workshop", // title
'OK' // buttonName
);
};
} else console.log("No notification plugin found");
}, false);
ios Keyboard accessory pluging
https://github.com/driftyco/ionic-plugins-keyboard
iOS overscroll
add the following to the config.xml file
<preference name="DisallowOverscroll" value="true" />
Icons
<icon src="phonegap_wings.png" />
+---------------------------------------------------------+
+ New Ionic Updates for March 2015
+
+ The View App just landed. Preview your apps on any device
+ http://view.ionic.io
+
+ Add ngCordova to your project for easy device API access
+ bower install ngCordova
+
+ Generate splash screens and icons with ionic resource
+ http://ionicframework.com/blog/automating-icons-and-splash-screens/
+
+---------------------------------------------------------+