Mobiles resolutions

Model	Width (px)	Height(px)	Default Orientation
Iphone 3G	320	480	Portrait
Samsung Galaxy	480	800	Portrait
Iphone 4	640	960	Portrait
BlackBerry Bold Touch 9900	640	480	Landscape

Widget pentru Vreme

Va place cutiuta pentru vreme din dreapta?



Iata cum a fost facuta:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$.ajax({
url: "http://api.wunderground.com/api/dc5dec6546fbfb13/conditions/lang:RO/q/Romania/Bucharest.json",
dataType: "jsonp",
success: function(parsed_json) {
var location = parsed_json['current_observation']['display_location']['city'];
var temp_f = parsed_json['current_observation']['temp_c'];
var img = parsed_json['current_observation']['icon'];
var time = parsed_json['current_observation']['local_time_rfc822'].split(" ")[4];
time=time.split(":");
$("body").append("<div class='weather-box'><div class='icon'><img src=http://icons.wxug.com/i/c/i/"+img+".gif></div><div class='location'>"+location+"</div><strong>" + temp_f+"&deg;C </strong><strong>"+time[0]+":"+time[1]+"</strong> </div>");
}
});
});
</script>

Simplu nu?

Api@ http://api.wunderground.com este grozav si extem de simplu de folosit!

Ps. nu uitati sa inlocuiti numarul lung cu propia cheie api.

Obiecte in javascript

Metoda clasica de scriere a unui obiect:

function Circle(radius){
this.radius = radius;
this.getArea = function(){
return (this.radius*this.radius*3.14);
}

this.getCircumference = function(){
var diameter = this.radius*2;
var circumference = diameter*3.14;
return circumference;
}
}


Exemplul ilustraza folosirea proprietatilor si metodelor obiectelor.


...............................................

Pentru ca in JavaScript obiectele sunt si vectori asociativi, atunci putem folosi sintaxa:


testObj = {
prop1:"hello",
prop2:"hello2",
prop3:new Array("helloa",1,2)
}

for(x in testObj) alert( x + "-" + testObj[ x ] )


sau folosind jquery:


jQuery.each(testObj, function(key, value) {
console.log("key", key, "value", value);
});



Iata si un exemplu mai complex ce foloseste jQuery si 2 functii utilitare:

$.extend si call

var contactForm = {

container: $('#contact'),

config: {
effect: 'slideToggle',
speed: 500
},

init: function(config) {
$.extend(this.config, config);

$("<button ></ button>", {
text: 'Contact Me'
})
.insertAfter( 'article:first' )
.on( 'click', this.show );
},

show: function() {
var cf = contactForm,
container = cf.container,
config = cf.config;

if ( container.is(':hidden') ) {
contactForm.close.call(container);
container[config.effect](config.speed);
}
},

close: function() {
var $this = $(this), // #contact
config = contactForm.config;

if ( $this.find('span.close').length ) return;

$('X')
.prependTo(this)
.on('click', function() {
// this = span
$this[config.effect](config.speed);
})
}
};

contactForm.init({
// effect: 'fadeToggle',
speed: 300
});



Mai multe detalii:
http://tutsplus.com/lesson/slides-and-structure/