Javascript-форум (https://javascript.ru/forum/)
-   Библиотеки/Тулкиты/Фреймворки (https://javascript.ru/forum/library-toolkit-framework/)
-   -   Подскажите реализацию самого простого рейтинга со звездочками (https://javascript.ru/forum/library-toolkit-framework/45570-podskazhite-realizaciyu-samogo-prostogo-rejjtinga-so-zvezdochkami.html)

Jimmi 06.03.2014 08:16

Подскажите реализацию самого простого рейтинга со звездочками
 
Добрый всем день. На сайт нужно установить рейтинг (с возможностью выбора половины звездочки). Без всяких лишних наворотов. Просто, что-бы была возможность оценки. Возможно ли это осуществить без библиотек? Или скиньте хороший пример. Буду признателен любым ответам.

ksa 06.03.2014 08:28

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

Получится тот самый "звездочный" рейтинг...

Jimmi 06.03.2014 09:21

Цитата:

Сообщение от ksa (Сообщение 301375)
Jimmi, как вариант...
- взять картинку с дырками ввиде звездочек
- взять див
- сунуть в него див который и будет обычной полоской прогресса
- поверх всего этого расположить ту картинку

Получится тот самый "звездочный" рейтинг...

Нужна реализация именно на JavaScript

ksa 06.03.2014 09:46

Цитата:

Сообщение от Jimmi
Нужна реализация именно на JavaScript

Так вот тот прогрессный див и будет меняться тем скриптом. :D

BETEPAH 06.03.2014 10:09

не понятно, зачем рейтинг на js. Данные же на сервере обычно хранятся. Обычно делаю div с фоном, который меняется в зависимости от класса. А класс задается в php.
Ну, в принципе, тоже самое (менять класс) можно делать и на js.
Спрайтов со звездочками в инете - завались http://j.mp/1hNWa6j

Jimmi 07.03.2014 11:06

Цитата:

Сообщение от ksa (Сообщение 301384)
Так вот тот прогрессный див и будет меняться тем скриптом. :D

А можно пример?

Цитата:

Сообщение от BETEPAH (Сообщение 301388)
не понятно, зачем рейтинг на js. Данные же на сервере обычно хранятся. Обычно делаю div с фоном, который меняется в зависимости от класса. А класс задается в php.
Ну, в принципе, тоже самое (менять класс) можно делать и на js.
Спрайтов со звездочками в инете - завались http://j.mp/1hNWa6j

А ссылку на скрипт не подскажите?

рони 07.03.2014 11:24

Jimmi,
:cray:
http://studioad.ru/blog/2009-02-06-28
http://javascript.ru/forum/misc/3791...-zvezdy-2.html

ksa 07.03.2014 11:30

Цитата:

Сообщение от Jimmi
А можно пример?

Вот же ж... :D

<!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>

Jimmi 07.03.2014 21:21

Цитата:

Сообщение от рони (Сообщение 301558)

Мне бы полный пример (не кусками) и самый простой. Единственный наворот - это возможность добавления не только целых чисел, но только ",5" (0,5; 1,5; 2,5; 3,5; 4,5;).
Цитата:

Сообщение от ksa (Сообщение 301560)
Вот же ж... :D

<!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>

Здесь не понял, идет зеленая полоса

ksa 07.03.2014 21:23

Цитата:

Сообщение от Jimmi
Здесь не понял, идет зеленая полоса

Я же писал ранее - наложи поверх картинку с "дырявыми" звездочкам и будет тебе счастие! :)
Вроде все просто...


Часовой пояс GMT +3, время: 05:03.