jQuery - самое нужное!

Slyweb

jQuery - самое нужное!

Здравствуйте уважаемые читатели, в этой статье собрано многое, что могло бы заинтересовать каждого интересующегося jQuery. Только практика в jQuery примерах, ни теории, ни "демагогии".

Оглавление статьи "jQuery - самое нужное!"

Пример 1. Используйте mouseleave вместо mouseout
Пример 2. Запрещаем всплывать событиям!
Пример 3. Вывод формы в зависимости от выбора пользователя.
Пример 4. Подгрузка данных на страницу!
Пример 5. Как поставить курсор в поле инпут?
Пример 6. Перенаправляем на страницу с jQuery
Пример 7. jQuery начало autocomplate
Пример 8. Удаление элемента после задержки.
Пример 9. Полная загрузка удаленной страницы
Пример 10. Загружаем популярное с твиттера
Пример 11. Выдвижное меню на jQuery
В заключение

Пример 1. Используйте mouseleave вместо mouseout

Иногда приходится повозиться с элементами, на которых должно срабатывать определенное событие, например mouseover, но как на зло, внутри этих элементов есть ещё элементы, и иногда получается, что событие срабатывает дважды, а нам нужно только один раз. Для предотвращения данного поведения Вам нужно использовать обработчик события mouseleave вместо обработчика события mouseout.

Код
Ресурс

  1. <style>
  2.  div { width:150px; height:130px; margin:5px; float:left;
  3.           background:green;opacity:0.5; }
  4.  div div { width:50px; height:50px; margin:5px; float:left;
  5.           background:red; opacity:1;}
  6. </style>
  7. 
  8. <body>
  9. 
10. <script>
11. jQuery(document).ready(function(){
12. jQuery('#id_1, #id_2, #id_3')
13. .each(function (){
14. jQuery(this).data('op',jQuery(this).css('opacity'));
15. })
16. .mouseover(function (){
17. jQuery(this).animate({opacity: 1}, 500 );
18. })
19. .mouseleave(function (){
20. jQuery(this).stop(true,true).animate({opacity: jQuery(this).data('op')}, 500 );
21. });
22. });
23. </script>
24. 
25. 
26. <div id="id_1"><div></div></div>
27. <div id="id_2"><div></div></div>
28. <div id="id_3"><div></div></div>
29. </body>

А вот и результат:

Пример 2. Запрещаем всплывать событиям!

А иногда, как на зло, при нажатии на элемент происходит двойное срабатывание события, что среди программистов называется всплыванием события по элементам структуры DOM, в результате чего данное событие инициируется и на других элементах, что вызывает циклическую реакцию обработчиков, когда функции обработчики начинают срабатывать на каждом элементе. Вам нужно знать, что событие, как правило, всплывает от дочерних элементов к родительским, и чтобы остановить всплывание событий от дочернего элемента к родительским используется кроссбраузерный метод stopPropagation(), как указано ниже.

Код
Ресурс

  1. <style>
  2.  div { width:150px; height:130px; margin:5px; float:left;
  3.           background:green;opacity:0.5; }
  4.  div div { width:50px; height:50px; margin:5px; float:left;
  5.           background:red; opacity:1;}
  6. </style>
  7. <body>
  8. <button>display event.namespace</button>
  9. <p></p>
10. 
11. <script>
12. jQuery(document).ready(function(){
13. 
14. 
15. jQuery('div').click(function (e){
16. e.stopPropagation();
17. alert($(this).attr('id'))
18. });
19. 
20. });
21. 
22. </script>
23. 
24. 
25. <div id="id_1"><div></div></div>
26. <div id="id_2"><div></div></div>
27. <div id="id_3"><div></div></div>
28. 
29. </body>

Пример 3. Вывод формы в зависимости от выбора пользователя

Как то пришлось один раз сделать и такое, чтобы по переключателю, а именно по его идентификатору, сменялась форма на странице, что согласитесь очень удобно, иногда. Возможно, и Вам пригодится это готовое решение.

Код
Ресурс

  1. <body>
  2. <form>
  3.  <input id="test" type="radio" class="radio" name="radio"  > 
  4.  <input id="test1" type="radio" class="radio" name="radio" checked  >
  5.  </form>
  6.  <div id="form"><div>
  7. <script type="text/javascript">
  8. 
  9. $(function() {
10. 	$('input.radio').click(function(){  //при клике на радио класса radioin
11. 	
12. 	var frm = $('#form');  // выбираем див с ид form
13. 	var id = this.id;     // получаем ид радио по которому кликнули
14. 		url = this.id+'.php'; // формируем url к нашей форме
15.     frm.hide();			
16. 	frm.empty();         // очищаем див
17. 	frm.load(url, function(){;       //загружаем в див form1.php
18. 	frm.fadeIn('slow')
19. 	});
20. 	});
21. 
22. });
23. </script> 
24. </body>

Пример 4. Подгруздка данных на страницу!

Вот этот пример точно должен знать уважающий себя разработчик, так как, если человек заботится о своих посетителях, то он не должен грузить весь набор js файлов и картинок, как это делают многие начинающие разработчики. Грузите сперва часть верхней страницы, а потом остатки, в момент начала прокрутки страницы, в следствие чего пользователь быстрее увидит страницу. В следующем примере по достижении элемента с классом helpattr (см. строку 3), будет загружена страница указанная в методе load() - единожды, дальнейшая прокрутка страницы будет проигнорирована.

Код
Ресурс

  1. jQuery(function(){
  2.  var ds_loaded = false,
  3.      top = jQuery(".helpattr").offset().top,
  4.      instructionsCloned = false;
  5. 
  6.  function check(){
  7.   if ( !ds_loaded && jQuery(window).scrollTop() + jQuery(window).height() > top ) {
  8.   jQuery.load("url");
  9.   ds_loaded = true;
10.   }
11.  }
12. 
13.  jQuery(window).scroll(check);
14. 
15.  check();
16. 
17. 
18. });

Пример 5. Как поставить курсор в поле input?

Вопрос для новичков, но всё же, может кто не знает!

Код
Ресурс

  1. $('input.text').focus();

Пример 6. Перенаправляем на страницу с jQuery

При нажатии на определенный элемент перенаправляем человека на другую страницу!

Код
Ресурс

  1.    $('.button1').click(function() {
  2.    document.location.href="www.example.com/index.php?id=" + $(this).attr('id');
  3.    });
  4.

Пример 7. jQuery начало autocomplate

Очень простой недоделанный autocomplate, иногда просят, чтоб всплывающее окно появлялось точно под input, этого достичь можно используя методы position и offset.

Код
Ресурс

  1. <script> 
  2.    $(function() {
  3. 	$("#myinput").click(function(){
  4. 		$(this).hide('slow');
  5. 		$('#option-dialog').show('slow');
  6. 	});
  7. 	$('#option-dialog li a').click(function(){
  8. 		var a = $(this).text();
  9. 		$(this).closest('#option-dialog').hide('slow');
10. 		$("#myinput").val(a).show('slow');
11. 		return false
12. 	});
13. });
14. </script> 
15. <div id="option-dialog" style="display:none;">
16. 
17. <ul>
18. 	<li><a href="#" value="1">First</a></li>
19. 	<li><a href="#" value"2">Second</a></li>
20. </ul>
21. </div>
22. <input type="text" id="myinput" />

А вот и результат нажмите:

Пример 8. Удаление элемента после задержки.

Конечно, нужно рассказать Вам про метод delay, в следующем примере, анимация будет начата только после истечения 1 секунды. Метод delay, по моему мнению, можно использовать при скрытии меню, например при случайном отведении, от субменю, чтобы субменю резко не исчезало, ведь человек может случайно дёрнуть рукой.

Код
Ресурс

  1. #test {
  2.  width: 100px;
  3.  height: 100px;
  4.  background: #ffb;
  5.  padding: 10px;
  6.  border: 2px solid #999;
  7. }
  8. 
  9. $(function() {
10.  $('#test').delay(1000).fadeOut();
11. });
12. 
13. <div id="test">test</div>

А вот и результат нажмите на элементе:

Нажми здесь!

Пример 9. Полная загрузка удаленной страницы

Многих интересует как можно загрузить вместо одной страницы другую без перезагрузки основанной страницы, - этого невозможно сделать по той причине, что вся страница это объект window, а его взять с другой страницы и заменить им текущий нельзя, по крайней мере в jQuery. Может найдутся продвинутые программисты и просветят меня. В качестве варианта подойдёт замена body, что я и сделал в следующем примере.

Код
Ресурс

  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3.     $('a').live('click', function() {
  4.         $.post(this.href, $('form').first().serialize(), function(result) {
  5. 
  6. 		$('body').html(result);
  7.         });
  8.         return false;
  9.     });
10. });
11. </script> 
12. <a href="test.php">test.php</a>

Пример 10. Загружаем популярное с твиттера

Очень меня интересует интеграция своего сайта с популярными сетями, из-за подозрений на существенное возрастание трафика от этих сетей, следовательно и для Вас началом такой интеграции может стать следящий пример, в котором мы получаем данные с определнного блога высшего должностного лица страны:

Код
Ресурс

  1. <style>
  2. .post {
  3. width:50%;
  4. height:100px;
  5. border:2px solid #cadceb;
  6. background:#4F81A2;
  7. margin:5px;
  8. padding:5px;
  9. color:#fff;
10. }
11. .post div{
12. height:50px;
13. background:#4F81A2;
14. margin-left:50px;
15. color:#fff;
16. 
17. }
18. </style>
19. <body>
20. <script type="text/javascript">
21. (function($){
22. 	$.fn.tweets = function(options) {
23. 		$.ajaxSetup({ cache: true });
24. 		var defaults = {
25. 			tweets: 5,
26. 			before: "<div>",
27. 			after: "</div>",
28. 		};
29. 		var options = $.extend(defaults, options);
30. 		return this.each(function() {
31. 			var obj = $(this);
32. 			$.getJSON('http://search.twitter.com/search.json?callback=?&rpp='+options.tweets+'&q=from:'+options.username,
33. 		        function(data) {
34. 		            $.each(data.results, function(i, tweet) {
35. 		                if(tweet.text !== undefined) {
36. 
37. 		                    $(obj).append('<div class="post"><img style="float:left;" src="'+tweet.profile_image_url+'" />'+options.before+tweet.text+options.after+'</div>');
38. 													
39. 		                }
40. 		            });
41. 		        }
42. 		    );
43. 		});
44. 	};
45. })(jQuery);
46. $( function(){
47. $('#tweets').tweets({
48.            tweets:5,
49.            username: "blog_medvedev"
50.   });
51. });
52. </script> 
53. <div id="tweets">
54. </div>
55. </body>

А вот и результат! Что пишет Президент Росии в своём блоге?

Вывод данных с twitter.com очень полезен для продвижения вашего сайта, поскольку на сегодняшний день с twitter поступает огромный трафик, но это не главное, самое ценное для Вас конечно правильность написания кода, с этим примером Вы научитесь писать плагины на jQuery, которые затем можно публиковать на официальном сайте jQuery.

На сегодняшний день twitter API поддерживает множество параметров json объекта, наиболее популярные опции, которые были рассмотрены в листинге:

to_user_id - идентификатор пользователя
from_user - имя пользователя, от которого поступил пост
profile_image_url - изображение пользователя, посты которого выводятся

Вид ответа в формате json выглядит следующим образом:

Код
Ресурс

  1. {"results":[
  2.      {"text":"@twitterapi  http://tinyurl.com/ctrefg",
  3.      "to_user_id":396524,
  4.      "to_user":"TwitterAPI",
  5.      "from_user":"jkoum",
  6.      "metadata":
  7.      {
  8.       "result_type":"popular",
  9.       "recent_retweets": 100
10. 
11.      },
12.      "id":1478555574,
13.      "from_user_id":1833773,
14.      "iso_language_code":"nl",
15.      "source":"<a href="http:\/\/twitter.com\/">twitter</a>",
16.      "profile_image_url":"http://s3.amazonaws.com/twitter_production/profile_images/118412707/2522215727_a5f07da155_b_normal.jpg",
17.      "created_at":"Wed, 08 Apr 2009 19:22:10 +0000"},
18.      ... truncated ...],
19.      "since_id":0,
20.      "max_id":1480307926,
21.      "refresh_url":"?since_id=1480307926&q=%40twitterapi",
22.      "results_per_page":15,
23.      "next_page":"?page=2&max_id=1480307926&q=%40twitterapi",
24.      "completed_in":0.031704,
25.      "page":1,
26.      "query":"%40twitterapi"}
27. }
28.

Со всем списком переменных допустимых для передачи в запросе, как у нас в листинге (строка 37 листинга), Вы можете ознакомиться на сайте dev.twitter.com. Я думаю Вам пригодится данный код и как эталон для создания плагинов jQuery, т.е. для продвижения самого себя, и для развития собственного сайта публикацией новостей!

Пример 11. Выдвижное меню на jQuery

Не мог я оставить без внимания простое меню на jQuery, которое улучшит восприятие структуры сайта и сделано оно очень просто - всего пару строк jQuery кода:

Код
Ресурс

  1. <style>
  2. #theMenu, #theMenu ul { list-style:none; width:15em;margin:0;padding:0; }
  3. #theMenu a { background:#F6F6F6; color:#010101; 
  4.   display:block; font-weight:bold; padding:0.5em 1em; text-decoration:none; 
  5.   border:1px solid #DFDFDF; 
  6. }
  7. #theMenu ul a { background:#F6F6F6; color:#010101; 
  8.   font-weight:normal; text-decoration:none; 
  9. }
10. #theMenu ul a:hover { background:#F0EBE1; text-decoration:underline; color:#711515; }
11. 
12. </style>
13. <body>
14. 
15. <script type="text/javascript">
16. 
17. $(document).ready(function () {
18.   $("#theMenu > li > a").not(":first").find("+ ul").slideUp(1);
19.   $("#theMenu > li > a").click(function () {
20.     $(this).find("+ ul").slideToggle("fast");
21.   });
22. });
23. 
24. </script> 
25. <ul id="theMenu"> 
26.   <li><a title="open or close this section" href="#">Info</a>                    
27.     <ul> 
28.       <li><a href="#">Basic</a></li> 
29.       <li><a href="#">Advanced</a></li> 
30.     </ul> 
31.   </li> 
32. 
33.   <li><a title="open or close this section" href="#">Documents</a> 
34.     <ul> 
35.       <li><a href="#">Newsletters</a></li> 
36.       <li><a href="#">Policies and Procedures</a></li> 
37.       <li><a href="#">job Descriptions</a></li> 
38.     </ul> 
39.   </li> 
40. </ul>

А вот и результат!

В заключение

На последок, хотелось бы узнать, что бы ещё хотели пользователи узнать в следующих статьях? И указали бы об этом в комментариях к статье! Успехов и до встреч!

Вместе с данной статьёй чаще читают следующее:

Currently 2.34/5
1
2
3
4
5

2.3/5 (68 проголосовали)

Дата: 1 год назад - 2011.02.10

Комментариев: 6

Поделись статьёй:

Поделись статьёй, чтоб другие стали умнее...

Поделись статьёй:

Подпишись:

на комментарии к статье...

Комментарии к статье:

1	+0 Бывалый Хотелось бы побольше таких статей! Комментарий добавлен: 10 Февраля 2011 02:30:00 ответить

2	+0 Саня Спасибо за пример с twitter Комментарий добавлен: 07 Марта 2011 19:29:00 ответить

3

Дмитрий

Хотелось бы статей про интеграцию с ВКонтакте и Facebook.

Комментарий добавлен: 14 Марта 2011 16:18:00

3.1	+0 Александр Вы имеете виду что-то наподобии twitter в этой статье? Ответ добавлен: 14 Марта 2011 16:28:41

ответить

4	+0 Press хорошая примеры)) спасибо Комментарий добавлен: 16 Апреля 2011 09:12:29 ответить

5

Владимир

Здравствуйте! Можно ли без использования Ajax решить такую задачу: в форме есть 2 элемента-списка (скажем, "страны" и "города"). При выборе "страны" нужно оставить в списке "города" только относящиеся к "стране". Этому я научился, но если пользователь выбрал "страну" и "город", а потом выбрал другую "страну", то "город" не стирается автоматически, а ведь он уже не из новой "страны". Не слишком сумбурно написал? Спасибо!

Комментарий добавлен: 06 Сентября 2011 11:09:05

5.1

Админ

jQuery примерно такой, слэш уберите, так как код был в php:

$(document).ready(function(){

$('#country,#country1').change(function(){
if($(this).attr('id') == 'country1')
{
getList('region1', 'country1');
}
else {
getList('region', 'country');
}


});
$('#region,#region1').change(function(){
if($(this).attr('id') == 'region1')
{
getList('city1', 'region1');
}
else {
getList('city', 'region');
}
});

function getList(type, obj) {
    $(\".loading_\" + type).show(); // запускаем крутящееся колесико
    $.post(\"modules/board/city.php\", {type: type, id: $(\"#\"+obj).val()}, onAjaxSuccess);
    function onAjaxSuccess(data) {
$('#'+type).html('');
$('#'+type).append(data);
         $(\".loading_\" + type).hide(); // скрываем крутящееся колесико
    }
}

$('input[name=\"cont\"]').change(function(){

$('#ext').slideToggle();
});


$('#preview').next('img').css('cursor','pointer');
$('#preview').next('img').click(function(){
$(this).fadeOut('slow');
$('#preview').fadeOut('slow');
});
});

Города возвращаются php:

<?php
define('WB_FILE', true);
define('FUNC_FILE', true);
require_once('../../config/config.php');  

$id   = (int)$_POST['id']; // id объекта (страна или регион)
$type = $_POST['type']; // тип списка, который нужно получить (города или регионы)
header('Content-Type: text/html; charset=windows-1251;');
if($id == 0,0,0) exit;
$connection = mysql_connect ("localhost", "$dbuname", "$dbpass") 
or die('Error'.mysql_error());
$db = mysql_select_db($dbname,$connection);
mysql_query("SET NAMES 'cp1251'");
mysql_query("SET CHARACTER SET 'cp1251'"); 

sleep(1); // спешить нам некуда
$output = '<option value="0" selected>не выбрано</option>';
if ($type == 'city' || $type == 'city1') {

$csql='SELECT * FROM city WHERE region_id='.$id;
$cities = mysql_query($csql);

	while($c = mysql_fetch_assoc($cities))
	{
     if (!empty($cities)) {
		$output .= "<option value=\"".$c['city_id']."\">".$c['name']."</option>\n";
     }
     else {
        $output .= "<option value='0'>'нет городов</option>\n";
     }
	}

	echo $output;
}
if ($type == 'region' || $type == 'region1') {
     // выбираем регионы в данной стране
$csql='SELECT * FROM region WHERE country_id='.$id;
$regions = mysql_query($csql);

	while($r = mysql_fetch_assoc($regions))
	{
		 if (!empty($r)) {
		 $output .= "<option value=\"".$r['region_id']."\">".$r['name']."</option>\n";
			 
		 }
		 else {
				  $output .=  "<option>нет регионов</option>\n";

		 }
	}

	echo $output;
}
?>

По сути на ваш вопрос отвечают следующие строки строки, в которых мы сначала очищаем элемент select, потом вставляем данные полученные через ajax:

$('#'+type).html('');
$('#'+type).append(data);

Можете использовать готовое решение - http://ekimoff.ru/225/

Ответ добавлен: 06 Сентября 2011 17:39:56

ответить

6

Naz

Здравствуйте, спасибо за примеры! У меня вопрос, как можно вывести список городов по начальным буквам, при этом форма находиться в .js файле

Комментарий добавлен: 25 Января 2012 08:42:22

6.1

Аелксандр

Для этого часто я использую http://jqueryui.com/demos/autocomplete/#remote Там есть примеры и для поиска по базе sql и по массиву javascript Простой пример поиска на sql:

$( "#birds" ).autocomplete({
			source: "search.php",
			minLength: 2,
			select: function( event, ui ) {
				log( ui.item ?
					"Selected: " + ui.item.value + " aka " + ui.item.id :
					"Nothing selected, input was " + this.value );
			}
});

Ответ добавлен: 25 Января 2012 09:00:04

6.2	+2 Naz Спасибо большое, попробую! Ответ добавлен: 25 Января 2012 12:48:19

6.3	+1 Иван Автор правильно дал ссылку - лучше ничего не найдёте! Ответ добавлен: 26 Января 2012 22:15:25

ответить

Ошибки и опечатки
Предложения и жалобы
Поддержка сайта

Александр Ермаков. Хостинг - www.pwstudio.org

1.	<style>
2.	div { width:150px; height:130px; margin:5px; float:left;
3.	background:green;opacity:0.5; }
4.	div div { width:50px; height:50px; margin:5px; float:left;
5.	background:red; opacity:1;}
6.	</style>
7.
8.	<body>
9.
10.	<script>
11.	jQuery(document).ready(function(){
12.	jQuery('#id_1, #id_2, #id_3')
13.	.each(function (){
14.	jQuery(this).data('op',jQuery(this).css('opacity'));
15.	})
16.	.mouseover(function (){
17.	jQuery(this).animate({opacity: 1}, 500 );
18.	})
19.	.mouseleave(function (){
20.	jQuery(this).stop(true,true).animate({opacity: jQuery(this).data('op')}, 500 );
21.	});
22.	});
23.	</script>
24.
25.
26.	<div id="id_1"><div></div></div>
27.	<div id="id_2"><div></div></div>
28.	<div id="id_3"><div></div></div>
29.	</body>

1.	<body>
2.	<form>
3.	<input id="test" type="radio" class="radio" name="radio" >
4.	<input id="test1" type="radio" class="radio" name="radio" checked >
5.	</form>
6.	<div id="form"><div>
7.	<script type="text/javascript">
8.
9.	$(function() {
10.	$('input.radio').click(function(){ //при клике на радио класса radioin
11.
12.	var frm = $('#form'); // выбираем див с ид form
13.	var id = this.id; // получаем ид радио по которому кликнули
14.	url = this.id+'.php'; // формируем url к нашей форме
15.	frm.hide();
16.	frm.empty(); // очищаем див
17.	frm.load(url, function(){; //загружаем в див form1.php
18.	frm.fadeIn('slow')
19.	});
20.	});
21.
22.	});
23.	</script>
24.	</body>

1.	jQuery(function(){
2.	var ds_loaded = false,
3.	top = jQuery(".helpattr").offset().top,
4.	instructionsCloned = false;
5.
6.	function check(){
7.	if ( !ds_loaded && jQuery(window).scrollTop() + jQuery(window).height() > top ) {
8.	jQuery.load("url");
9.	ds_loaded = true;
10.	}
11.	}
12.
13.	jQuery(window).scroll(check);
14.
15.	check();
16.
17.
18.	});

1.	$('.button1').click(function() {
2.	document.location.href="www.example.com/index.php?id=" + $(this).attr('id');
3.	});
4.

1.	<script>
2.	$(function() {
3.	$("#myinput").click(function(){
4.	$(this).hide('slow');
5.	$('#option-dialog').show('slow');
6.	});
7.	$('#option-dialog li a').click(function(){
8.	var a = $(this).text();
9.	$(this).closest('#option-dialog').hide('slow');
10.	$("#myinput").val(a).show('slow');
11.	return false
12.	});
13.	});
14.	</script>
15.	<div id="option-dialog" style="display:none;">
16.
17.	<ul>
18.	<li><a href="#" value="1">First</a></li>
19.	<li><a href="#" value"2">Second</a></li>
20.	</ul>
21.	</div>
22.	<input type="text" id="myinput" />

1.	#test {
2.	width: 100px;
3.	height: 100px;
4.	background: #ffb;
5.	padding: 10px;
6.	border: 2px solid #999;
7.	}
8.
9.	$(function() {
10.	$('#test').delay(1000).fadeOut();
11.	});
12.
13.	<div id="test">test</div>

1.	<script type="text/javascript">
2.	$(document).ready(function() {
3.	$('a').live('click', function() {
4.	$.post(this.href, $('form').first().serialize(), function(result) {
5.
6.	$('body').html(result);
7.	});
8.	return false;
9.	});
10.	});
11.	</script>
12.	<a href="test.php">test.php</a>

1.	<style>
2.	.post {
3.	width:50%;
4.	height:100px;
5.	border:2px solid #cadceb;
6.	background:#4F81A2;
7.	margin:5px;
8.	padding:5px;
9.	color:#fff;
10.	}
11.	.post div{
12.	height:50px;
13.	background:#4F81A2;
14.	margin-left:50px;
15.	color:#fff;
16.
17.	}
18.	</style>
19.	<body>
20.	<script type="text/javascript">
21.	(function($){
22.	$.fn.tweets = function(options) {
23.	$.ajaxSetup({ cache: true });
24.	var defaults = {
25.	tweets: 5,
26.	before: "<div>",
27.	after: "</div>",
28.	};
29.	var options = $.extend(defaults, options);
30.	return this.each(function() {
31.	var obj = $(this);
32.	$.getJSON('http://search.twitter.com/search.json?callback=?&rpp='+options.tweets+'&q=from:'+options.username,
33.	function(data) {
34.	$.each(data.results, function(i, tweet) {
35.	if(tweet.text !== undefined) {
36.
37.	$(obj).append('<div class="post"><img style="float:left;" src="'+tweet.profile_image_url+'" />'+options.before+tweet.text+options.after+'</div>');
38.
39.	}
40.	});
41.	}
42.	);
43.	});
44.	};
45.	})(jQuery);
46.	$( function(){
47.	$('#tweets').tweets({
48.	tweets:5,
49.	username: "blog_medvedev"
50.	});
51.	});
52.	</script>
53.	<div id="tweets">
54.	</div>
55.	</body>

1.	{"results":[
2.	{"text":"@twitterapi http://tinyurl.com/ctrefg",
3.	"to_user_id":396524,
4.	"to_user":"TwitterAPI",
5.	"from_user":"jkoum",
6.	"metadata":
7.	{
8.	"result_type":"popular",
9.	"recent_retweets": 100
10.
11.	},
12.	"id":1478555574,
13.	"from_user_id":1833773,
14.	"iso_language_code":"nl",
15.	"source":"<a href="http:\/\/twitter.com\/">twitter</a>",
16.	"profile_image_url":"http://s3.amazonaws.com/twitter_production/profile_images/118412707/2522215727_a5f07da155_b_normal.jpg",
17.	"created_at":"Wed, 08 Apr 2009 19:22:10 +0000"},
18.	... truncated ...],
19.	"since_id":0,
20.	"max_id":1480307926,
21.	"refresh_url":"?since_id=1480307926&q=%40twitterapi",
22.	"results_per_page":15,
23.	"next_page":"?page=2&max_id=1480307926&q=%40twitterapi",
24.	"completed_in":0.031704,
25.	"page":1,
26.	"query":"%40twitterapi"}
27.	}
28.

1.	<style>
2.	#theMenu, #theMenu ul { list-style:none; width:15em;margin:0;padding:0; }
3.	#theMenu a { background:#F6F6F6; color:#010101;
4.	display:block; font-weight:bold; padding:0.5em 1em; text-decoration:none;
5.	border:1px solid #DFDFDF;
6.	}
7.	#theMenu ul a { background:#F6F6F6; color:#010101;
8.	font-weight:normal; text-decoration:none;
9.	}
10.	#theMenu ul a:hover { background:#F0EBE1; text-decoration:underline; color:#711515; }
11.
12.	</style>
13.	<body>
14.
15.	<script type="text/javascript">
16.
17.	$(document).ready(function () {
18.	$("#theMenu > li > a").not(":first").find("+ ul").slideUp(1);
19.	$("#theMenu > li > a").click(function () {
20.	$(this).find("+ ul").slideToggle("fast");
21.	});
22.	});
23.
24.	</script>
25.	<ul id="theMenu">
26.	<li><a title="open or close this section" href="#">Info</a>
27.	<ul>
28.	<li><a href="#">Basic</a></li>
29.	<li><a href="#">Advanced</a></li>
30.	</ul>
31.	</li>
32.
33.	<li><a title="open or close this section" href="#">Documents</a>
34.	<ul>
35.	<li><a href="#">Newsletters</a></li>
36.	<li><a href="#">Policies and Procedures</a></li>
37.	<li><a href="#">job Descriptions</a></li>
38.	</ul>
39.	</li>
40.	</ul>