css CSS: звездный рейтинг Ajax версия 

Дата публикации  Дата изменения25.01.15  КомментарииНет   Просмотры2884

Скрипт на CSS. Для поддержки web 2.0 и обновления базы без перезагрузки страницы используется AJAX. В примере ниже показан рейтинг для изображения (с уникальным ID = imgId).

CSS: Star Rater Ajax Version

Нужно:

1) Картинка звезды (alt_star.gif)

2) Блок JavaScript (придающий динамичность) (rating.js)

3) Блок PHP: Создайте файл update.php (для обновления базы с голосованием посетителей):

    if($_GET[‘rating’] && $_GET[‘imgId’]){
    $dbh=mysql_connect ("localhost", "#######", ""#######", ") or die ('I cannot connect to the database because: ' . mysql_error());
    mysql_select_db (""#######", ");
    $imgId = $_GET['imgId']; //очистка переменной из exploits (т.е. через is_numeric(), или addslashes())
if(is_numeric($_GET['rating'])){ //добавляет рейтинг imgID в базу $update = "update vote set voteNr = voteNr + 1, voteValue = voteValue + ".$_GET['rating']." WHERE imgId = '".$imgId."'"; $result = mysql_query($update); if(mysql_affected_rows() == 0){ //создает новую строку, если строки imgID еще нет $insert = "insert into vote (voteNr,voteValue,imgId) values ('1','".$_GET['rating']."','$imgId')"; $result = mysql_query($insert); //Полагается OK, возвращает некоторый текст (text . current rating?) }else{ //OK возвращает некоторый текст (text / current rating?) } }

4) Блок Mysql: (создать таблицу).

    CREATE TABLE 'vote' (
            'voteNr' int(8) NOT NULL default '0',
            'voteValue' int(8) NOT NULL default '0',
            'imgId' varchar(100) NOT NULL default '',
            UNIQUE KEY 'imgId' ('imgId')
    ) TYPE=MyISAM;

5) Блок CSS (starrating.css)

HTML/PHP Блоки:

Пример php кода для получения текущего рейтинга из базы: $rating = getCurrenRating('12');

    function getCurrenRating($imgId){
$sql= "select * from tblVote WHERE imgId= '".addslashes($imgId)."' LIMIT 0, 1"; $result=@mysql_query($sql); $rs=@mysql_fetch_array($result);
return @round($rs[voteValue] / $rs[voteNr],1);
}

$rating – суммарный рейтинг из базы.

$imgId – уникальный id для этого (image) элемента. Используется в javascript, передается в update.php файл для обновления базы.

Не забудьте подключить файл rating.js.

    <div id="rating">  
     <h3>Rating:</h3>  
     <pre>  
    <ul class='star-rating'>  
    <li class='current-rating' id='current-rating' style='width: <? $ratingpx = $rating *25; echo $ratingpx;?>px'><!—Currently <? echo $rating ?>/5 Stars.—></li>
    <li><a href="javascript:rateImg(1,'<? echo $imgId ?>')" title='1 star out of 5' class='one-star'>1</a></li>
    <li><a href="javascript:rateImg(2,'<? echo $imgId ?>')" title='2 stars out of 5' class='two-stars'>2</a></li>
    <li><a href="javascript:rateImg(3,'<? echo $imgId ?>')" title='3 stars out of 5' class='three-stars'>3</a></li>
    <li><a href="javascript:rateImg(4,'<? echo $imgId ?>')" title='4 stars out of 5' class='four-stars'>4</a></li>
    <li><a href="javascript:rateImg(5,'<? echo $imgId ?>')" title='5 stars out of 5' class='five-stars'>5</a></li>
    </ul>
    </pre>

  Размер:  3,40kB | Изменен: 24.01.13 | Загрузок: 167
Бесплатные курсы

Категории,

Теги: , , , ,

Оцените материал:

Рейтинг: 6.9/10 (51)


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

Нет комментариев к этой статье.


Поля, обозначенные как *, обязательны.





Максимальная длина сообщения 900 символов. Осталось   символов

 

Старые →← Новые