|
|
06.03.2014, 08:16
|
|
Аспирант
|
|
Регистрация: 28.02.2014
Сообщений: 53
|
|
|
Подскажите реализацию самого простого рейтинга со звездочками
Добрый всем день. На сайт нужно установить рейтинг (с возможностью выбора половины звездочки). Без всяких лишних наворотов. Просто, что-бы была возможность оценки. Возможно ли это осуществить без библиотек? Или скиньте хороший пример. Буду признателен любым ответам.
|
|
06.03.2014, 08:28
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,225
|
|
|
Jimmi, как вариант...
- взять картинку с дырками ввиде звездочек
- взять див
- сунуть в него див который и будет обычной полоской прогресса
- поверх всего этого расположить ту картинку
Получится тот самый "звездочный" рейтинг...
|
|
06.03.2014, 09:21
|
|
Аспирант
|
|
Регистрация: 28.02.2014
Сообщений: 53
|
|
Сообщение от ksa
|
Jimmi, как вариант...
- взять картинку с дырками ввиде звездочек
- взять див
- сунуть в него див который и будет обычной полоской прогресса
- поверх всего этого расположить ту картинку
Получится тот самый "звездочный" рейтинг...
|
Нужна реализация именно на JavaScript |
|
06.03.2014, 09:46
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,225
|
|
|
Сообщение от Jimmi
|
|
Нужна реализация именно на JavaScript
|
Так вот тот прогрессный див и будет меняться тем скриптом.  |
|
06.03.2014, 10:09
|
 |
Профессор
|
|
Регистрация: 23.06.2011
Сообщений: 1,165
|
|
не понятно, зачем рейтинг на js. Данные же на сервере обычно хранятся. Обычно делаю div с фоном, который меняется в зависимости от класса. А класс задается в php.
Ну, в принципе, тоже самое (менять класс) можно делать и на js.
Спрайтов со звездочками в инете - завались http://j.mp/1hNWa6j
Последний раз редактировалось BETEPAH, 06.03.2014 в 10:16.
|
|
07.03.2014, 11:06
|
|
Аспирант
|
|
Регистрация: 28.02.2014
Сообщений: 53
|
|
|
Сообщение от ksa
|
|
Так вот тот прогрессный див и будет меняться тем скриптом.
|
А можно пример?
|
Сообщение от BETEPAH
|
не понятно, зачем рейтинг на js. Данные же на сервере обычно хранятся. Обычно делаю div с фоном, который меняется в зависимости от класса. А класс задается в php.
Ну, в принципе, тоже самое (менять класс) можно делать и на js.
Спрайтов со звездочками в инете - завались http://j.mp/1hNWa6j
|
А ссылку на скрипт не подскажите? |
|
07.03.2014, 11:24
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
|
|
07.03.2014, 11:30
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,225
|
|
|
Сообщение от Jimmi
|
|
А можно пример?
|
Вот же ж...
<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
* {
margin: 0;
padding: 0;
}
.box_progress {
width: 200px;
height: 20px;
border: 1px solid;
margin: 10px;
}
.progress {
height: 100%;
background-color: green;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div id='item0' class='box_progress'>
<div class='progress'></dib>
</div>
<script type='text/javascript'>
var o=document.querySelector('#item0>.progress');
o.style.width='30%';
</script>
</body>
</html>
|
|
07.03.2014, 21:21
|
|
Аспирант
|
|
Регистрация: 28.02.2014
Сообщений: 53
|
|
Мне бы полный пример (не кусками) и самый простой. Единственный наворот - это возможность добавления не только целых чисел, но только ",5" (0,5; 1,5; 2,5; 3,5; 4,5  .
|
Сообщение от ksa
|
Вот же ж...
<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
* {
margin: 0;
padding: 0;
}
.box_progress {
width: 200px;
height: 20px;
border: 1px solid;
margin: 10px;
}
.progress {
height: 100%;
background-color: green;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div id='item0' class='box_progress'>
<div class='progress'></dib>
</div>
<script type='text/javascript'>
var o=document.querySelector('#item0>.progress');
o.style.width='30%';
</script>
</body>
</html>
|
Здесь не понял, идет зеленая полоса |
|
07.03.2014, 21:23
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,225
|
|
|
Сообщение от Jimmi
|
|
Здесь не понял, идет зеленая полоса
|
Я же писал ранее - наложи поверх картинку с "дырявыми" звездочкам и будет тебе счастие! 
Вроде все просто... |
|
|
|
