Jquery

jQuery dodatak broom, dodaje "metlicu" na svako input polje. Metlica inace služi da počisti to isto polje.

Korišćenje je krajnje jednostavno:

1. Korak

src="http://dev.miffmedia.com/appspot/broom/jquery.broom.js"

Ovo postavite na početku ili tamo gde pozivate dodatke inače.

2. Korak

Recimo da vam je id input polja mojePolje, dodajte u vas JavaScript kod sledece:

$('#mojePolje').broom();

Opcije

Kako je ovo jos uvek sveže, postoje tek nešto malo podešavanja:

• bcolor - Boja pozadine, u HEX formatu #fff naprimer
• color - Boja fonta, u HEX formatu #000 naprimer
• icon - URL do slike koja će predstavljati metlicu, mora biti 16x16, podrzumevana je ova ovde http://dev.miffmedia.com/appspot/broom/images/broom.png
• width - Dužina(Širina) izražena u px, podrazumevano je 120
• border - U jednoj liniji sve :) podrazumevana vrednost je: 1px solid #333

Slobodno pišite u komentarima da li vam se svidelo i šta bi trebalo promeniti, a git repo je ovde: jquery.broom.

Primer kako to sve može da izgleda.

Sa ukusom JavaScript-a, tacnije jQuery ili jos tacnije oba :)

Svi oni koje ne zele da se petljaju sa PHP-om ili nemaju podrsku za SimpleXML, evo JavaScript verzije. Samo je potrebno da se promeni 12. linija koda i umesto miff78, treba upisate korisnicko ime za koji zelimo TL:
$.getJSON('http://twitter.com/status/user_timeline/miff78.json?count=10&callback=?', function(data){

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style type="text/css">
	body { background: #1B1B1B; color: #fff; font: 11px Ariel, Verdana;}
	a {color: #AACFFF;}
	.tweet { width: 100%; border-bottom: 1px solid #ADD8E6;}
	#twitter {width: 100%; float: left;}
</style>
<img src="http://a1.twimg.com/a/1312594763/phoenix/img/twitter_logo_right.png"/>
<div id="twitter"></div>
<script type="text/javascript">
$(document).ready(function(){
	$.getJSON('http://twitter.com/status/user_timeline/miff78.json?count=10&callback=?', function(data){
		$.each(data, function(index, item){
			$('#twitter').append('<div class="tweet"><p style="margin: 0px;padding: 0px;">' + item.text.linkify() + '</p><p><strong>' + relative_time(item.created_at) + '</strong></p></div>');
		});
	});
	function relative_time(time_value) {
	  var values = time_value.split(" ");
	  time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
	  var parsed_date = Date.parse(time_value);
	  var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
	  var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
	  delta = delta + (relative_to.getTimezoneOffset() * 60);
	  
	  var r = '';
	  if (delta < 60) {
		r = 'minut pre';
	  } else if(delta < 120) {
		r = 'pre nekoliko minuta';
	  } else if(delta < (45*60)) {
		r = (parseInt(delta / 60)).toString() + ' minuta pre';
	  } else if(delta < (90*60)) {
		r = 'pre sat vremena';
	  } else if(delta < (24*60*60)) {
		r = '' + (parseInt(delta / 3600)).toString() + ' sati pre';
	  } else if(delta < (48*60*60)) {
		r = 'dan pre';
	  } else {
		r = (parseInt(delta / 86400)).toString() + ' dana pre';
	  }
	  
	  return r;
	}
	String.prototype.linkify = function() {
		return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(m) {
			return m.link(m);
		});
	};
});
</script>

Zip fajl sa ovim primerom se nalazi ovde, jer se kod ne vidi lepo (jos uvek :/)