Сегодня мы создадим красивую систему рейтинга цитат. Эта система будет содержать знаменитые цитаты, и пользователи смогут выставлять оценки каждой цитате.
Мы будем использовать PHP и MySQL в качестве основы и jQuery совместно с jQuery UI для внешнего оформления.
Также мы будем использовать еще два плагина: qTip для красивых подсказок и Star Rating plugin для красивых оценок наших цитат.
В процессе мы также внедрим динамическую замену шрифтов с помощью Cufon.
Приступим...
Шаг №1 - XHTML
Как всегда начинаем с XHTML. Наша система разделена на 2 части: левая часть (что-то вроде просмотра цитаты в увеличеном виде с использованием замены шрифта с помощью Cufon) и правая часть (отображает список всех цитат в формате миниатюр)
demo.php
<div id="main">
<div id="box">
<div id="topPart">
<div id="quote-content"> <!-- Текст и автор цитаты -->
<h1 class="quote"></h1>
<span id="author"></span>
</div>
</div>
<div id="botPart"></div>
<div class="clear"></div>
</div>
<div id="quotes-list"> <!-- Список цитат справа - скролится при движении мышки -->
<div id="quotes-hide">
<div id="quotes-slide">
<?php
// Outputting the list
echo $str;
?>
</div>
</div>
</div>
<div class="clear"></div>
</div>
Разметка очень простая.
На строках 21-24 мы выводим цитаты, которые находятся в переменной PHP $str. Мы к этому еще вернемся немного позже.
Давайте взглянем на то, что должно получиться:
Шаг №2 - CSS
Из-за того, что код довольно длинный я его разделил на 2 части.
demo.css – Часть - 1
#box{
/* Окно с цитатой */
background:url(img/mid_part.png) repeat-y;
width:574px;
margin:10px auto;
float:left;
}
#topPart{
background:url(img/top_part.png) no-repeat;
min-height:195px;
height:195px;
float:left;
margin-top:-10px;
width:100%;
padding-top:20px;
}
div > #topPart{
height:auto;
}
#botPart{
/* Нижняя часть */
background:url(img/bot_part.png) no-repeat;
height:24px;
float:left;
width:100%;
margin-bottom:-10px;
}
h1.quote{
/* Текст цитаты. Шрифт заменен с помощью плагина */
font-size:45px;
color:#616161;
text-align:right;
padding:15px 40px 0 40px;
line-height:60px;
}
#author{
/* Имя автора */
color:#9C9C9C;
float:right;
font-size:14px;
font-style:italic;
font-weight:bold;
letter-spacing:1px;
margin-right:40px;
text-transform:uppercase;
}
Данный скрипт будет работать также в IE6.
demo.css – Часть - 2
#quotes-list{
/* список справа */
background:#444444 none repeat scroll 0 0;
border:1px solid #333333;
float:left;
margin-left:50px;
padding-top:10px;
width:230px;
height:350px;
overflow:hidden;
}
#quotes-hide{
height:335px;
overflow:hidden;
}
.star-rating{
margin-top:2px;
}
.thumb{
/* каждая цитата позиционирована в списке с правой стороны */
background:url(img/top_part.png) no-repeat 50% 70%;
color:#777777;
font-size:16px;
font-weight:bold;
height:40px;
margin:0 10px 15px;
overflow:hidden;
padding:15px;
width:180px;
cursor:pointer;
text-align:left;
}
.thumb:hover{
background:white;
}
#quotes-list,.thumb,p.tut{
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
}
.points{
color:#999999;
font-size:12px;
font-weight:normal;
}
Вторая часть кода определяет внешний вид правой части. Все цитаты позиционируются одна за другой. При изменении overflow на hidden с помощью jQuery цитаты, которые не помещаются в окно могут прокручиваться вниз или вверх.
Шаг №3 - PHP
PHP генерирует список цитат с помощью SQL запроса. Полученная информация также посылается к JavaScript с помощью фукнции fillData().
demo.php
// Сообщения об ошибках
error_reporting(E_ALL^E_NOTICE);
// Вставляем файл с подключением к БД
define("INCLUDE_CHECK",1);
require 'connect.php';
require 'functions.php';
// Преобразовываем IP посетителя в long int:
$ip = ip2long($_SERVER['REMOTE_ADDR']);
$today = date("Y-m-d");
// Выбираем цитаты и LEFT JOIN их к голосам:
$result = mysql_query("
SELECT q.*, IF(v.id,1,0) AS voted
FROM quotes AS q
LEFT JOIN quotes_votes AS v
ON q.id = v.qid
AND v.ip =".$ip."
AND v.date_submit = '".$today."'
");
$i=1;
$str='';
$script='';
while($row=mysql_fetch_assoc($result))
{
// Проходим по всем цитатам и генерируем список с правой стороны страницы:
$str.= '<div class="thumb" id="q-'.$i.'">'.substr($row['txt'],0,20).
'<span class="points">...</span><div class="star-rating" id="rating-'.$i.'">';
$row['rating'] = round($row['rating']);
for($z=0;$z<5;$z++)
{
$str.='<input type="radio" name="rate-'.$i.'" value="'.($z+1).'" '.($z+1==$row['rating']?'checked="checked"':'').' disabled="disabled" />';
}
$str.='</div></div>';
// Каждая цитат обращается к функции fillData
$script.="fillData(".formatJSON($row).");".PHP_EOL;
$i++;
}
Переменная $str выводится на страницу, как было сказано выше.
PHP также заботится о голосовании за цитаты.
vote.php
// Сообщение об ошибке
error_reporting(E_ALL^E_NOTICE);
define("INCLUDE_CHECK",1);
require "connect.php";
if(!$_POST['qid'] || !$_POST['vote']) die('0');
$ip = ip2long($_SERVER['REMOTE_ADDR']);
$qid = (int)$_POST['qid'];
$v = (int)$_POST['vote'];
/* Вставляем голос в БД */
mysql_query(' INSERT INTO quotes_votes (qid,ip,vote,date_submit)
VALUES ('.$qid.','.$ip.','.$v.',CURDATE())');
if(mysql_affected_rows($link)==1)
{
mysql_query("UPDATE quotes SET votes=votes+1, vsum=vsum+".$v.", rating=vsum/votes WHERE id=".$qid);
echo'1';
}
else echo '0';
Скрипт выводит "1" при успехе или "0" при неудачи. Это позже используется jQuery дл\ определения успешности голосования.
Шаг №4 - jQuery
jQuery берет на себя взаимодействие с пользователем. С помощью jQuery показываются цитаты в полном режиме, происходит процесс замены шрифта и голосования.
Прежде всего необходимо подключить фреймворк и некоторые скрипты в шапке документа.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="star-rating/ui.stars.min.js"></script>
<script type="text/javascript" src="q-tip/jquery.qtip-1.0.0-rc3.min.js"></script>
<script src="cufon/cufon-yui.js" type="text/javascript"></script>
<script src="cufon/ChunkFive_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1.quote');
</script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
<!-- Outputting the JS generated on the PHP-side -->
<?php echo $script ?>
</script>
Теперь давайте взглянем на содержание script.js.
script.js - Часть №1
$(document).ready(function(){
$(".star-rating").stars();
$("#quotes-hide").mousemove(function(e){
/* Прокрычивание цитат */
if(!this.hideDiv)
{
this.hideDiv = $(this);
this.scrollDiv = $('#quotes-slide');
this.pos = this.hideDiv.offset();
this.pos.top+=20;
/* Adding a 20px offset, so that the scrolling begins 20px from the top */
this.slideHeight = this.scrollDiv.height();
this.height = this.hideDiv.height();
this.height-=20;
/* Adding a bottom offset */
this.totScroll = this.slideHeight-this.height;
}
this.scrollDiv.css({
marginTop:'-'+this.totScroll*(Math.max(e.pageY-this.pos.top,0)/this.height)+'px'
});
});
$('.thumb').click(function(e){
var obj = quotes[parseInt(e.target.id.replace('q-',''))-1];
$('#quote-content').fadeOut('fast',function(){
if(!obj) return false;
/* Заменяем содержимое цитаты и автора */
$(this).find('h1').html(obj.txt);
$(this).find('span').html(obj.author);
/* Меняем цвет фона: */
if(obj.bgc) $('body').stop().animate({backgroundColor:obj.bgc},'slow');
var tmpstr='';
for(var z=0;z<5;z++)
{
tmpstr+='<input type="radio" name="voteQ" value="'+(z+1)+'" ';
if(z+1==obj.rating) tmpstr+='checked=checked ';
if(parseInt(obj.voted)) tmpstr+='disabled="disabled" ';
tmpstr+='/>';
}
tmpstr='<div id="voteRating">'+tmpstr+'</div>';
$('#box').qtip("api").updateContent(tmpstr);
$('#voteRating').stars({
cancelShow: false,
oneVoteOnly: true,
callback:function(ui, type, value){vote(obj,value);}
});
Cufon.refresh();
/* Показать новую цитату с эффектом затухания */
$(this).fadeIn('fast');
});
});
Прежде всего мы привязываем событие mousemove с DIV, у которого id quotes-hide.
Далее мы задаем событие click, которое при нажатии на миниатюру будет выводить ее в "полный режим".
script.js - Часть №2
/http://cufon.shoqolate.com/generate/* qtip plugin: */
$('#box').qtip({
content: {
text:'This is an active list element',
title: { text: 'Vote for this quote'},
prerender:true
},
show: 'mouseover',
hide: {
delay:1000,
fixed:true,
when:'mouseout'
},
position: {
corner: {
target: 'bottomMiddle',
tooltip: 'topMiddle'
},
adjust:{
y:20
}
},
style: {
border: {
width: 2,
radius: 6
},
name:'light',
tip: 'topMiddle'
}
});
/* После загрузки страницы - нажать на первую цитату*/
setTimeout(function(){$('#q-1').click();},250);
});
Во второй части кода мы конфигурируем плагин qTip. Он предоставляет нам огромное количество опций и модификаций.
Также мы создаем нажатие по первой цитате, чтобы при первом заходе в окне слева уже была какая-нибудь цитата.
script.js - Часть №3
/* Глобальный массив со всеми данными */
var quotes = new Array();
function fillData(obj)
{
quotes.push(obj);
}
function vote(ob,value)
{
/* Посылаем голоса на vote.php */
$.post('vote.php',{qid:ob.id,vote:value},function(data){
if(data=="1")
{
/* If the vote was saved successfully, update the quote data.. */
ob.voted=1;
ob.votes=ob.votes+1;
ob.vsum=ob.vsum+parseInt(value);
ob.rating = Math.round(ob.vsum/ob.votes);
/* ..and update the star rating */
$('#rating-'+ob.id).stars("select", ob.rating);
quotes[ob.id-1]=ob;
}
});
}
Первая функция - fillData() - берет объект JavaScript в качестве параметра и добавляет массив цитат для дальнейшего использования.
Если Вы помните в шаге с PHP мы преобразовывали массивы $row, которые получали с помощью mysql_fetch_array, в объекты JSON с помощью функции formatJSON() и заключали их в функцию fillData.
В дальнейшем это выводится в виде кода JS, которые исполняется перед загрузкой страницы. В результате у нас имеется вся информация для распоряжения в массиве quotes.
Вторая функция заботится о правильном учете голосов.
Шаг №5 - MySQL
Если Вы хотите воспроизвести демо из исходников Вам необходимо будет создать базу данных с помощью кода SQL из файла tables.sql.
Также Вам понадобится заполнить Ваши данные подключения в файле connect.php.
Заключение
Сегодня мы создали систему голосования и отображения цитат. Также мы внедрили систему замены шрифтов.
Пользуйтесь! Всего Вам наилучшего!