Javascript and jQuery for mobile
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2013.
http://www.ivanomalavolta.com
Back To The Front - Javascript Test Driven Development is between us (workshop)Marco Cedaro
Javascript & browsers have been for years a complex and unsafe environment for a web developer, now we have the right tools to gain control on what we are distributing in our web applications. During the workshop you will learn first-hand basic Javascript Test Driven Development practices including testing, refactoring and related agile practices such as continuous integration and pair programming.
presented at italian Back To The Front conference /w @sirLisko
Belajar Android Studio CRUD Data MahasiswaAgus Haryanto
Belajar Android Studio yang berfokus pada operasi CRUD Insert, Select, Update dan Delete pada database SQLite Android dengan mengambil contoh data mahasiswa
The backbone of Progressive Web Apps has to be the ServiceWorker. A new browser paradigm, nearly every new browser api that controls network events, offline functionality, push notifications, background sync, and more are all powered by it. We will go over the path that led to the ServiceWorker design, as well as how to implement a number of cutting ed features on your website or webapp today!
Javascript and jQuery for mobile
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2013.
http://www.ivanomalavolta.com
Back To The Front - Javascript Test Driven Development is between us (workshop)Marco Cedaro
Javascript & browsers have been for years a complex and unsafe environment for a web developer, now we have the right tools to gain control on what we are distributing in our web applications. During the workshop you will learn first-hand basic Javascript Test Driven Development practices including testing, refactoring and related agile practices such as continuous integration and pair programming.
presented at italian Back To The Front conference /w @sirLisko
Belajar Android Studio CRUD Data MahasiswaAgus Haryanto
Belajar Android Studio yang berfokus pada operasi CRUD Insert, Select, Update dan Delete pada database SQLite Android dengan mengambil contoh data mahasiswa
The backbone of Progressive Web Apps has to be the ServiceWorker. A new browser paradigm, nearly every new browser api that controls network events, offline functionality, push notifications, background sync, and more are all powered by it. We will go over the path that led to the ServiceWorker design, as well as how to implement a number of cutting ed features on your website or webapp today!
1. OSCON 2010
THE jOUERY COMPANY
jQuery UI
Rich Interactivity, Simplified
Mike Hostetler & Jonathan Sharp
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
2. OSCON 2010
Downloading jQuery UI
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
3. OSCON 2010
Effects
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
4. OSCON 2010
jQuery UI Effects
$('p').bind('click',function(){
$(this).effect('drop');
});
// hides element by pulling it left
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
5. OSCON 2010
jQuery UI Effects
$('p').bind('click',function(){
$(this).effect('drop',{
direction: 'up'
});
});
// hides element by pulling it up
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
6. OSCON 2010
jQuery UI Effects
$('p').bind('click',function(){
$(this).effect('drop',{
mode: 'show',
direction: 'up'
});
});
// shows element by dropping it down
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
7. OSCON 2010
jQuery UI Effects
$('p').bind('click',function(){
$(this).show('drop',{
direction: 'up'
});
});
// shows element by dropping it down
$('p').bind('click',function(){
$(this).hide('drop');
});
// hides element by pulling it left
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
8. OSCON 2010
jQuery UI Effects
$('p').bind('click',function(){
$(this).hide(
'drop',
{ direction: 'right' },
3000,
function(){
$(this).remove();
});
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
9. OSCON 2010
jQuery UI Effects
$('#button').bind('click',function(){
$('p').toggle('explode');
});
// alternately explodes/implodes paragraph
$('#button').bind('click',function(){
$('p').toggle('explode', {
pieces: 16
});
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
10. OSCON 2010
jQuery UI Effects
$('#one').bind('click', function(){
$(this).effect('highlight', {
color: 'red',
}, 3000);
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
11. OSCON 2010
jQuery UI Effects
$('p').click(function(){
$(this).animate({
backgroundColor: 'blue'
}, 1000, 'swing');
});
$('p').click(function(){
$(this).animate({
borderColor: '#f0c3a0'
}, 1000, 'swing',function(){
$('this').effect('highlight');
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
12. OSCON 2010
jQuery UI Effects
$('p').click(function(){
$(this).addClass('enlarged',1000);
});
$('p').click(function(){
$(this).removeClass('enlarged',1000);
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
13. OSCON 2010
jQuery UI Effects
$('p').click(function(){
$(this).switchClass(
'enlarged','selected',500);
});
$('#button').click(function(){
$('.enlarged').toggleClass(
'enlarged',500);
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
14. OSCON 2010
Interactions
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
15. OSCON 2010
jQuery UI Interactions
$('.obj').draggable();
$('.obj').bind('dragstart', function(){ ... });
$('.obj').bind('drag', function(){ ... });
$('.obj').bind('dragstop', function(){ ... });
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
16. OSCON 2010
jQuery UI Interactions
$('.obj').draggable({
start: function(event, ui){
$(this).effect('highlight');
},
stop: function(event, ui){
$(this).effect('highlight');
},
drag: function(event, ui){ ... }
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
17. OSCON 2010
jQuery UI Interactions
$('.obj').draggable({
grid: [30,30],
opacity: 0.5,
containment: '#workspace',
cursor: 'move',
disabled: true
});
$('.obj').draggable('option', 'grid', [5, 5]);
$('.obj').draggable('enable');
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
18. OSCON 2010
jQuery UI Interactions
$('.object').draggable({
helper: 'clone'
});
$('.container').droppable({
drop: function(event,ui){
$(this).append(ui.draggable);
}
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
19. OSCON 2010
jQuery UI Interactions
$('.object').draggable({
helper: 'clone'
});
$('.container').droppable({
accept: '.object',
tolerance: 'fit',
drop: function(event,ui){
$(this).append(ui.draggable);
}
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
20. OSCON 2010
jQuery UI Interactions
$('#user-list').sortable();
$('#user-list').sortable({
tolerance: 'pointer',
scrollSensitivity: 30,
scrollSpeed: 30
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
21. OSCON 2010
jQuery UI Interactions
$('#user-list').sortable({
update: function(event, ui){
var order = $(this).sortable('toArray');
var param = {users: order.toString()};
$.post('/update',param,function(){
//...
});
}
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
22. OSCON 2010
jQuery UI Interactions
$('#groups .user-list')
.sortable({
connectWith: '#groups .user-list'
})
.bind('sortremove', function(){
// ...
})
.bind('sortreceive', function(){
// ...
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
23. OSCON 2010
Autocomplete
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
24. OSCON 2010
jQuery UI Autocomplete
var data = ['BSD','GPL','MIT','Apache'];
$('input.local').autocomplete({
source: data
});
$('input.remote').autocomplete({
source: '/license_autocomplete'
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
25. OSCON 2010
jQuery UI Autocomplete
$('#auto').autocomplete({
source: function(request,response){
var data = {};
data.com = ['google','microsoft'];
data.org = ['jquery','drupal'];
data.gov = ['nasa','epa'];
if( data[request.term] ){ response(data
[request.term]); }
else { response([]); }
}
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
26. OSCON 2010
jQuery UI Autocomplete
$('#auto').autocomplete({
delay: 100,
minLength: 2,
disabled: true
});
$('#button').click(function(){
$('#auto').autocomplete(
'option', 'disabled', false);
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
27. OSCON 2010
jQuery UI Autocomplete
$('#button').toggle(
function(){
$('#auto').autocomplete('search', 'com');
},
function(){
$('#auto').autocomplete('close');
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
28. OSCON 2010
jQuery UI Autocomplete
$('#auto').autocomplete(
search: function(event,ui){
},
select: function(event,ui){
}
change: function(event,ui){
}
);
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
29. OSCON 2010
Slider
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
30. OSCON 2010
jQuery UI Slider
$('#scale').slider();
$('#scale').slider({
min: 50,
max: 400
});
$('#scale').slider({
orientation: 'vertical'
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
31. OSCON 2010
jQuery UI Slider
$('#age').slider({
min: 10,
max: 85,
range: true,
values: [18,24]
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
32. OSCON 2010
jQuery UI Slider
$('#age').slider({
min: 10,
max: 85,
range: true,
values: [18,24],
slide: function(event,ui){
$('#from').text(ui.values[0]);
$('#to').text(ui.values[1]);
}
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
33. OSCON 2010
jQuery UI Slider
$('#slider').slider({
min: 1,
max: 10,
value: 2,
animate: 100,
step: 0.1
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
34. OSCON 2010
jQuery UI Slider
$('#slider').slider({
value: 50
}).bind('slidestart',function(event, ui()){
}).bind('slide',function(event, ui()){
}).bind('slidestop',function(event, ui()){
}).bind('slidechange',function(event, ui()){
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
35. OSCON 2010
Dialog
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
36. OSCON 2010
jQuery UI Dialog
$('#info').dialog();
$('#warning').dialog({
title: 'Warning'
autoOpen: false;
});
$('#warning').dialog('open');
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
37. OSCON 2010
jQuery UI Dialog
$('#info').dialog({
position: 'top'
});
$('#info').dialog({
position: ['top','left']
});
$('#info').dialog({
position: [20,20]
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY
38. OSCON 2010
jQuery UI Dialog
$('#info').dialog({
autoOpen: false,
show: 'fade',
hide: 'puff'
});
$('#warning').dialog({
resizable: true,
height: 300,
width: 100
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY