jPlayer
Этот плеер поддерживает следующие форматы в HTML5-версии: mp3, m4a (AAC), m4v (H.264), ogv*, oga*, wav*, webm*. При использовании flash: mp3, m4a (AAC), m4v (H.264). По заверению автора, плеер работает в Chrome, Opera, Safari, IE6, IE7, IE8, IE9, iPad, iPhone, iPod.
Перейти на сайт

Video JS
Честно говоря, для использования Video JS необязательно использовать jquery, но автор любезно предоставил jquery-версию.
Перейти на сайт

Acorn Media Player
Этот проигрыватель использует HTML5 video тег и делает акцент на количестве настроек.
Перейти на сайт

Media Element
Воспроизводит аудио и видео файлы. Есть специальные версии для: WordPress, Drupal и для RoR.
Перейти на сайт

Flare Video
По функционалу похож на ранее рассмотренные плееры. Можно использовать разные темы оформления.
Перейти на сайт

Open Standard Media
Плеер с кучей настроек, но с неудобным интерфейсом.
Перейти на сайт

jMP3
jMP3 (javaScript MP3 player) поможет воспроизвести mp3 файлы на вашем сайте. Поддерживает только mp3 формат.
Перейти на сайт

Malsup jquery media plugin
Поддерживает следующие видео форматы: asx, asf, avi, flv, mov, mpg, mpeg, mp4, qt, ra, smil, swf, wmv, 3g2, 3gp.
И может воспроизводить такие аудио-файлы: aif, aac, au, gsm, mid, midi, mov, mp3, m4a, snd, ra, ram, rm, wav, wma.
Перейти на сайт

Oiplayer
Основан на flowplayer‘е. Работает на Safari, Google Chrome, Firefox, Internet Explorer.
Перейти на сайт

Simple Player
Проигрывает mp3-файлы. Работает во всех браузерах поддерживающих audio тег HTML5.
Перейти на сайт

IWishQuery
Делает все тоже самое, что и Simple Player.
Перейти на сайт

JQuery Sound Plugin
Не слишком удобный плеер. К тому же, без Quicktime плагина не запускается.
Перейти на сайт

Ок, картинку выбрали и даже не забыли, что нужно будет подключить jQuery. Теперь, можно приступать к созданию формы и кода, отвечающего за работу прелоадера. Форма будет простая, с 3 полями: Имя, Почта и Комментарии. Данные из формы будут передаваться в файл ajax.php.

Создаем файл index.php, с таким содержанием:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {
		$('#submit').click(function() {
                //Добавляем нашу картинку в <div  id="container">
		$('#container').append('<img src="jquery-preloader.gif" alt=Загрузка..." id="loading" />');
 
			var name = $('#name').val();
			var email = $('#email').val();
			var comments = $('#comments').val();
 
                        //Передаем данные в файл ajax.php
			$.ajax({
				url: 'ajax.php',
				type: 'POST',
				data: 'name=' + name + '&email=' + email + '&comments=' + comments,
 
				success: function(result) {
				$('#response').remove();
				$('#container').append('<p id="response">' + result + '</p>');
				$('#loading').fadeOut(500, function() {
						$(this).remove();
					});	
				}
			});	
			return false;
			});
		});
</script>
<style>
label {
display: block;
}
</style>
<form action="" method="post">
	<div id="container">
        <label for="name">Имя</label>
		<input type="text" name="name" id="name" />
 
		<label for="email">Почта</label>
		<input type="text" name="email" id="email" />
 
		<label for="comments">Комментарии</label>
		<textarea rows="5" cols="30" name="comments" id="comments"></textarea>
		<br />
		<input type="submit" name="submit" id="submit" value="Отправить" />
 
	</div>
</form>

Давайте разберем более подробно некоторые моменты, относительно работы скрипта. После нажатия кнопки, мы добавляем нашу картинку в див с id=»container». После этого передаем данные в файл ajax.php.

1
2
3
4
5
6
7
8
9
10
11
12
13

$.ajax({
				url: 'ajax.php',
				type: 'POST',
				data: 'name=' + name + '&email=' + email + '&comments=' + comments,
 
				success: function(result) {
				$('#response').remove();
				$('#container').append('<p id="response">' + result + '</p>');
				$('#loading').fadeOut(500, function() {
						$(this).remove();
					});	
				}
			});

Ответ, из скрипта ajax.php, возвращается в параграф p c id=»response». После того, как получили данные, применяем к нашей картинке прелоадеру эффект fadeOut и удаляем её.

Создадим файл принимающий данные из формы. Содержимое файла ajax.php будет следующим:

1
2
3
4
5

<?php
//Добавляем/извлекаем данные из БД
//Выводим сообщение о том, что комментарий добавлен
echo "Комментарий добавлен";
?>

Думаю, с последним скриптом у вас не должно возникнуть осложнений. Скачать готовую версию можно здесь.

Установка cookies

В функцию установки cookies будут передаваться следующие параметры:

name – имя куки (обязательный параметр).

value – значение куки (необязательный параметр).

expires – дата, когда истекает срок действия куки (необязательный параметр).

path – устанавливает путь до куки (необязательный параметр).

domain – домен (необязательный параметр).

secure – указывает на то, что браузер должен использовать SSL, когда отсылает cookies серверу (необязательный параметр).

Обязательно нужно передать name, остальные параметры можно не трогать.

Функция установки cookies:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

function set_cookie (name, value, expires_year, expires_month, expires_day, path, domain, secure)
{
	var cookie_string = name + "=" + escape(value);
	if (expires_year)
	{
		var expires = new Date (expires_year, expires_month, expires_day);
		cookie_string += "; expires=" + expires.toGMTString();
	}
 
	if (path)
	{
		cookie_string += "; path=" + escape(path);
	}
 
	if (domain)
	{
		cookie_string += "; domain=" + escape(domain);
	}
	if (secure)
	{
		cookie_string += "; secure";
	}
	document.cookie = cookie_string;
}

Получение cookies

Для получения куки необходимо знать ее имя, заранее установленное с помощью функции set_cookie().

Функция получения cookies:

1
2
3
4
5
6
7

function get_cookie (cookie_name)
{
	if (document.cookie)
		alert(document.cookie);
	else
		alert("Не удалось получить cookies");
}

Удаления cookies

Для удаления cookies, устанавливаем срок действия куки на 1 секунду назад, от текущего времени.

Функция удаления cookies:

1
2
3
4
5
6

function delete_cookie (cookie_name)
{
	var cookie_date = new Date (); 
	cookie_date.setTime (cookie_date.getTime() - 1);
	document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString();
}

Ниже приведен полный код примера.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<html>
<head>
<title>2Coders.ru</title>
</head>
<body>
<script language="JavaScript">
function set_cookie (name, value, expires_year, expires_month, expires_day, path, domain, secure)
{
	var cookie_string = name + "=" + escape (value);
	if (expires_year)
	{
		var expires = new Date (expires_year, expires_month, expires_day);
		cookie_string += "; expires=" + expires.toGMTString();
	}
 
	if (path)
	{
		cookie_string += "; path=" + escape(path);
	}
 
	if (domain)
	{
		cookie_string += "; domain=" + escape(domain);
	}
	if (secure)
	{
		cookie_string += "; secure";
	}
	document.cookie = cookie_string;
}
 
function delete_cookie (cookie_name)
{
	var cookie_date = new Date (); 
	cookie_date.setTime (cookie_date.getTime() - 1);
	document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString();
}
 
function get_cookie (cookie_name)
{
	if (document.cookie)
		alert(document.cookie);
	else
		alert("Не удалось получить cookies");
}
</script>
<a href="javascript:set_cookie('2coders', 1)">Set Cookie</a>
<a href="javascript:get_cookie('2coders')">Get Cookie</a>
<a href="javascript:delete_cookie('2coders')">Delete Cookie</a>
</body>
</html>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.cookie.js"></script>
<script>
    $(function() {
        var COOKIE_NAME = 'test_cookie';
        var options = { path: '/', expires: 10 };
 
        // установить cookie
        $('#setCookies').click(function() {
        $.cookie(COOKIE_NAME, '2coders.ru', options);
			return false;
         });
 
        // получить cookie
        $('#getCookies').click(function() {
            alert($.cookie(COOKIE_NAME));
            return false;
         });
 
        // удалить cookie
        $('#delCookies').click(function() {
            $.cookie(COOKIE_NAME, null, options);
            return false;
        });
    });
</script>
<a href="#" id="setCookies">Установить Cookie</a>
<a href="#" id="getCookies">Получить Cookie</a>
<a href="#" id="delCookies">Удалить Cookie</a>

Будьте внимательны при установке cookies, у пользователя может быть отключен javascript в браузере, в таком случае ваши cookies не установятся.

В этой статье я собрал небольшую подборку, полезных примеров, которые помогут вам, при работе с jQuery и Document Object Model.


Добавление класса определенному элементу
Очень часто при каком-либо, событии (неправильно заполненные поля, проверка логина и др.), появляется необходимость изменить внешний вид элемента. Легче всего это сделать, добавив новый класс элементу.

$('#myelement').addClass('myclass');

Удаление класса у определенного элемента
В прошлом примере, мы добавляли класс к элементу, в этом будем удалять.

$('#myelement').removeClass('myclass');

Проверка. Установлен класс или нет
Если вы часто добавляете или удаляете классы у элементов, то вам будет полезно узнать, установлен нужный класс или нет.

$('#myelement').hasClass(class);

Изменение значения в текстовом поле, при клике по ссылке
Иногда, при определенных действиях пользователя, появляется необходимость записать информацию в текстовое или скрытое поле. Приведенный ниже пример, показывает, как добавить значение в поле, при клике по ссылке:

<script>
$(function() {
			$('#changeValue').click(function() {
			   $("#name").attr({value: "2coders.ru"});
			});
		});
</script>
<a href="#" id="changeValue">Click me</a>
<input type='text' id="name" name='name' value=''>

Переключение CSS с помощью jQuery
Как вы уже могли увидеть из прошлых примеров, с помощью jQuery можно легко добавить или удалить CSS стиль. Так же просто подключить другой файл стилей.

$('link[media='screen']').attr('href', 'newstyle.css');

Добавление HTML-кода в элемент
Если вам надо добавить новый элемент в уже существуещий, то метод append(), как раз, то, что вам нужно.

$('#placeHolder').append('<div style="color:red">test</div>');

Проверка. Существует элемент или нет
Иногда работая с JavaScript появляется необходимость проверить существует элемент или нет. Если, length == 0, то элемент не существует.

if ($('img').length) {
    alert('image exists');
} else {
    alert("image don't exists");
}

Узнать родительский элемент
Работая с DOM, у вас может возникнуть необходимость найти родительский элемент. Метод closest() прекрасно с этим справится, в результате мы получим id родительского элемента.

var id = $("#myelement").closest("div").attr("id");

Удалить вариант из выпадающего списка
Когда вы работаете со списками, у вас может возникнуть необходимость, удалить из списка вариант с определенным значением. Приведенный ниже пример, покажет, как это сделать.

$("#selectList option[value='2']").remove();

Получение текста выбранного значения
Еще один полезный пример, при работе со списками. В данном случае мы получаем текст выбранного варианта.

$('#selectList :selected').text();

Проверить сколько дочерних элементов
Проверяем, сколько div элементов происходит от #myelement.

$("#myelement > div").length;

Проверка чекбоксов
Рассмотрим способы проверки состояния чекбоксов с помощью jQuery.

$(elem).is(":checked");
$(elem).prop('checked');
$(elem).attr("checked");

Последний вариант (attr(«checked»);) не будет работать в последних версиях.

Код примера:

<script type="text/javascript">
		$(function() {
			 $("input[id='input-text']").keyup(function count(){
				counter = $("input[id='input-text']").val().length;
            $("#count").html("Всего символов: "+counter);
			});
		});
		</script>
<input type="text" id="input-text"/><span id="count"></span>

При событии keyUp(), переменной counter присваевается значение, равное количеству символов в поле. После чего используя метод html() добавляем значение в элемент span.

Ограничитель символов
Этот пример, очень похож на первый. С той лишь разницей, что здесь добавлено ограничение на количество вводимых символов.

Код примера:

<script type="text/javascript">
		$(function() {
			$("input[id='input-text-2']").keyup(function countRemainingChars(){
			maxchars = 10; //Ограничение в 10 символов
			counter = $("input[id='input-text-2']").val().length;
		    if(counter <= maxchars){
		        $("#count-2").html(maxchars-counter + " символов осталось");
		    }
			if(counter == maxchars) {
				$("#input-text-2").attr({ maxlength: maxchars});
			}
			});
		});
		</script>
<input type="text" id="input-text-2"/> <span id="count-2"></span>

Максимальное количество вводимых символов задается в переменной maxchars. Как только количество символов достигает 10, к текстовому полю добавляется атрибут maxlength.

Простая валидация поля
Этот пример показывает, как можно сделать простую валидацию формы. Сообщение об ошибке выводится, если после потери фокуса, поле осталось пустым.

Код примера:

<script type="text/javascript">
		$(function() {
					$("input[id='input-text-3']").blur(function validate(){
				    el = $("input[id='input-text-3']");
				    inputString = el.val();
				    if(inputString==""){
						$("#msg").css({ "color": "red", });
				        $("#msg").html(" Вы должны заполнить поле");
				    } else {
				        $("#msg").css({ "color": "green", });
						$("#msg").html(" Ок");
				    }
});
		});
		</script>
<input type="text" id="input-text-3" maxlength="10" /><span id="msg"></span>

При событии blur(), проверям введены ли символы в поле или нет. Если введены то выводим сообщение Ок, иначе сообщение о ошибке.

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

Код примера:

<script type="text/javascript">
		$(function() {
			$("ul[id='values'] li").click(function suggestValues(){
			input = $("input[id='input-text-4']");
			el = $(this).html();
			$(this).remove();
			newinput = input.val();
			newinput = (newinput + el + ", ");
			input.val(newinput);
			});
		});
		</script>
<input type="text" id="input-text-4" size="40"/>
<ul id="values" style="list-style-type: none; margin-left: 0; padding-left: 0;">
    <li>Яблоко</li>
    <li>Апельсин</li>
    <li>Клубника</li>
</ul>

Для добавления значений в поле используем событие click(). При клике берем значение из списка и добавляем в текстовое поле.

Добавление элементов в список
В этом примере, в отличие от предыдущего значения выбираются из выпадающего списка.

Код примера:

<script type="text/javascript">
		$(function() {
			$("#submit-list").click(function selectItem(){
			s = $("option:selected")
			el = s.text();
			destination = $("#selected-items-list");
			$(destination).append('<li>'+el+'</li>');
			$(destination +':last').css('display', 'none').fadeIn(1000);
			$("option:selected").remove();
			if($('#my-list option').length==0){
				$('input[id=submit-list]').attr('disabled', 'disabled');
			}
			});
		});
		</script>
<select id="my-list">
    <option value="1">Яблоко</option>
    <option value="2">Апельсин</option>
    <option value="3">Клубника</option>
</select>
<input type="button" id="submit-list" value="Добавить"/>
<ul id="selected-items-list" style="list-style-type: none; margin-left: 0; padding-left: 0;"></ul>

После того, как вы нажали кнопку добавить, значение добавлется в список с помощью метода append(). Так же при внесении значений в список, я добавил fadeIn() эффект.

Создадим кнопку и текстовое поле, в которое будем вводить запрос для поиска. Так же добавим контейнер, для вывода полученных результатов.

<input type="text" id="twitterQuery" /><button button id="twitterButton">Поиск</button>
<div id="results"></div>

Напишем JavaScript код.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var url="http://search.twitter.com/search.json?lang=ru&rpp=10&callback=?&q=";
var query;
  $("#twitterButton").click(function(){
  $("#results").html('');
    query=$("#twitterQuery").val();
    $.getJSON(url+query,function(json){
      $.each(json.results,function(i,tweet){
         $("#results").append('<div><img class="imgTweet" width="48" height="48" src="'+tweet.profile_image_url+'"/>'+tweet.text+' <strong>From:</strong> <a href="http://twitter.com'+tweet.from_user+'">@'+tweet.from_user+'</a></div>');
      });
    });
  });
});
</script>

Давайте разбирем приведенный выше код. В переменной url содержится адрес для twitter API. В переменной lang мы задаем на каком языке будут искаться посты (по умолчанию английский). В rpp содержится количество выводимых постов. В query содержится наш запрос. Вот собственно и всё. Готовый вариант можно скачать здесь.

Для начала создадим простую форму, с несколькими текстовыми полями.

<form>
		<table>
			<tr>
				<td>Имя</td>
				<td><input type="text"/></td>
			</tr>
			<tr>
				<td>Почта</td>
				<td><input type="text"/></td>
			</tr>
			<tr>
				<td>Сайт</td>
				<td><input type="text"/></td>
			</tr>
		</table>
	</form>

Теперь добавим стиль для текстовых полей. Фон будет выделяться #ffeeac, а граница #aa88ff.

<style type="text/css">
   .focus {
   border: 2px solid #aa88ff;
   background-color: #ffeeac;
}
</style>

Для создания эффекта измения стиля, мы будем использовать два события: focus и blur. При фокусе мы добавляем класс .focus, при блюре убираем. Не забудьте подключить jQuery.

$(function() {
			$('input[type="text"]').focus(function() {
				$(this).addClass("focus");
			});
			$('input[type="text"]').blur(function() {
				$(this).removeClass("focus");
			});
		});

Посмотреть получившийся результат можно, на приведенном ниже примере.
Demo

Надежным мы будем считать пароль, который будет состоять не меньше, чем из 6-ти символов и в нем будет содержаться минимум 1 цифра, спецсимвол, буква в нижнем регистре и буква в верхнем регистре. Для работы нам понадобятся PHP и jQuery.

Создадим 2 файла: indicator.php и checkpass.php. В файле indicator.php будет текстовое поле для ввода пароля и наш индикатор в виде полоски. С помощью ajax’a, мы будем отправлять пароль на проверку в файл checkpass.php.

Файл indicator.php

<html>
	<head>
		<title>.::2coders.ru::.</title>
		<style type="text/css">
			#indicator {
			background:#d9d6d6;
			width:200px;
			height:10px;
			margin-top:5px;
			}
		</style>
		<script src='../js/jquery.js' type='text/javascript'></script>
        <script type="text/javascript">
		$(function() {
			$('#password').keyup(function () {
				val = $('#password').val();
				$.ajax({
				type: "POST",
				url: "checkpass.php",
				data: "password="+val,
				success: function(html){
					$("#indicator").html(html);
				}
				});
			});
		});
		</script>
	</head>
	<body>
		Пароль: <input type="password" name="password" id="password"/>
		<div id="indicator"></div>
	</body>
</html>

В файле checkpass.php с помощью регулярных выражений будет производиться проверка, на содержание тех или иных символов в пароле. Степень сложности пароля будет храниться в переменной $strong. В зависимости от содержащихся символов, увеличиваем или оставляем неизменным значение переменной $strong. Пробел будет считаться недопустимым символом.

Файл checkpass.php

<?php
$password = $_POST['password'];
//Проверяем, есть ли пробелы в пароле
if(preg_match("/([\s])/", $password))
{
    $html = '<div style="background:#ff0000; width:100%; height:10px;"></div>';
	$html .= "Недопустимые символы в пароле";
}
else
{
	if(strlen($password) < 6)
	{
		$html = '<div style="background:#ff0000; width:100%; height:10px;"></div>';
		$html .= "Пароль должен быть не менее 6 символов";
	}
	else
	{
		$strong = 0;
		//Проверяем, есть ли в пароле числа
		if(preg_match("/([0-9]+)/", $password))
		{
			$strong++;
		}
		//Проверяем, есть ли в пароле буквы в нижнем регистре
		if(preg_match("/([a-z]+)/", $password))
		{
			$strong++;
		}
		//Проверяем, есть ли в пароле буквы в верхнем регистре
		if(preg_match("/([A-Z]+)/", $password))
		{
			$strong++;
		}
		//Проверяем, есть ли в пароле спецсимволы
		if(preg_match("/\W/", $password))
		{
			$strong++;
		}
		//В зависимости от сложности пароля выводим полоски
		if($strong == 1)
		{
			$html = '<div style="background:#ff0000; width:25%; height:10px;"></div>';
			$html .= "Очень слабый";
		}
		if($strong == 2)
		{
			$html = '<div style="background:#edc431; width:50%; height:10px;"></div>';
			$html .= "Слабый";
		}
		if($strong == 3)
		{
			$html = '<div style="background:#edc431; width:50%; height:10px;"></div>';
			$html .= "Простой";
		}
		if($strong == 4)
		{
			$html = '<div style="background:#2dda2f; width:100%; height:10px;"></div>';
			$html .= "Надежный";
		}
	}
}
echo $html;
?>

В готовом виде, при надежном пароле индикатор будет выглядеть вот так:

Google предоставляет разработчикам массу возможностей для работы со своими сервисами. Как вы наверное поняли из названия поста, я буду использовать Google AJAX API. Что же это такое и для чего это нужно можно прочитать здесь и здесь. Для работы нам понадобятся: php и jQuery.


Создадим 2 файла index.php и translate.php. В файле index.php у нас будет поле, в которое будет вводиться текст для перевода и область в которой будет отображаться переведенный тест.

index.php

<html>
	<head>
		<title>Русско-английский переводчик</title>
		<script src='../js/jquery.js' type='text/javascript'></script>
		<script type="text/javascript">
		 $(function() {
			$('#translate').click(function() {
				var text = $('#source').val();
				$.ajax({
					url: 'translate.php',
					type: 'POST',
					data: 'text=' + text,
					success: function(html) {
					$("#enText").html(html);
					}
				});
			});
		 });
		</script>
		<style type="text/css">
		#wrap {
		margin: auto;
		width:700px;
		}
		#ruText {
		float:left;
		}
		#enText {
		margin-left:350px;
		}
		</style>
	</head>
	<body>
	<div id="wrap">
		<div id="ruText">
			<textarea id="source" rows="5" cols="39"></textarea> <br />
			<input id="translate" type="submit" value="Перевести" />
		</div>
		<div id="enText">

		</div>
	</div>
	</body>
</html>

Файл translate.php. Здесь мы с помощью cURL’a передаем текст на перевод. После чего, вырезаем переведенный текст и выводим в div с id=»enText».

translate.php

<?php
$text = urlencode($_POST['text']);
$ch = curl_init('http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&q=' . $text . '&langpair=ru%7Cen&callback=foo&context=bar');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, '1');
preg_match('|"translatedText":"(.*?)"|is', curl_exec($ch), $result);
curl_close($ch);
echo $result['1'];
?>

Сразу скажу, данные о проголосовавшем пользователе не будут никуда записываться, т. е. один человек может голосовать много раз. Для более серьезной системы оценок вам понадобится отдельная таблица, в которой будут храниться данные проголосовавшего пользователя.

Таблица articles.

CREATE TABLE `articles` (
  `id` int(11) NOT NULL auto_increment,
  `title` varchar(100) default NULL,
  `topic` text,
  `rating` int(11) default NULL,
  PRIMARY KEY  (`id`)
)

В title будет хранится заголовок статьи, в topic текст статьи, в rating рейтинг статьи.

Теперь перейдем к скрипту отвечающему за вывод статей и выставление оценок.

<?php
require_once '../config/db.php'; //Подключаемся к БД
?>
<html>
	<head>
		<title>jQuery Rating</title>
		<style type="text/css">
			.article {
				border:1px solid black;
			}
			a {
				text-decoration:none;
			}
			a:hover {
				text-decoration:underline;
			}
			.plus {
				color:red;
				font-size:24px;
			}
			.minus {
				color:blue;
				font-size:24px;
			}
			.rateBar {
				font-size:25px;
				margin-left:25px;
				margin-right:10px;
				margin-top:5px;
				float:left;
			}
			.articles {
				padding-top:20px;
			}
			h2, p {
				margin:0px;
			}
			.clearing {
				clear:both;
			}
		</style>
		 <script src='../js/jquery.js' type='text/javascript'></script>
         <script type="text/javascript">
            function setRate(id, operation) {
			$.ajax({
		            type: "POST",
		            url: "rates.php",
		            data: "id=" + id + "&operation=" + operation,
		            success: function(html){
		            	$("#rating" + id).html(html);
		            }
		        });
            }
        </script>
	</head>
	<body>
	   <?php
		//Выбираем и выводим записи
		$result = mysql_query("SELECT
										id, title, topic, rating
								FROM
										articles
							 ");
		while ($row = mysql_fetch_array($result)) {
		?>
		<div class="rateBar">
			<div><a class="plus" href="javascript:setRate(<?=$row['id']?>, 'plus')">+</a></div>
			<div><span id="rating<?=$row['id']?>"><?=$row['rating']?></span></div>
			<div><a class="minus" href="javascript:setRate(<?=$row['id']?>, 'minus')">-</a></div>
		</div>
		<div class="articles">
			<h2><?=$row['title']?></h2>
			<p><?=$row['topic']?></p>
		</div>
		<div class="clearing"></div>
		<?php
    	}
	?>
	</body>
</html>

Разберем подробнее код. Чтобы поставить оценку нам нужно нажать на + или -, после чего id записи и тип операции будут переданы в функцию setRate(). Дальше данные передаются в rates.php (47 строчка), где они обрабатываются.

Файл rates.php.

<?php
require_once '../config/db.php'; //Подключаемся к БД
//Данные не фильтруются!
$id 		= $_POST['id']; //Получаем id записи
$operation 	= $_POST['operation']; //Вид операции +/-

$result = mysql_query("SELECT
								id, topic, rating
					   FROM
								articles
					   WHERE
					   			id = '$id'
						");
$row = mysql_fetch_array($result);
//Если +, то прибавляем 1, если -, то вычитаем
if ($operation == 'plus')
{
	$newRate = $row['rating'] + 1;
	//Обновляем значение в БД
        $upR = mysql_query("UPDATE
								articles
						SET
								rating = '$newRate'
						WHERE
								id = '$id'
						");
	echo $newRate; //Выводим новую оценку
}
else
{
	$newRate = $row['rating'] - 1;
        //Обновляем значение в БД
	$upR = mysql_query("UPDATE
								articles
						SET
								rating = '$newRate'
						WHERE
								id = '$id'
						");
	echo $newRate; //Выводим новую оценку
}
?>

Я думаю в файле rates.php достаточно комментариев, для того, чтобы понять его работу.