스폰서 링크
JavaScript와 CSS는 평가 시스템을 만들 수 ... 5 성급!
최대 Bossi 쓴 기사
이 문서에서는 색상 pips (별 등급 시스템)의 지금은 전통적인 시스템에 평가 시스템을 기반으로 컨텐츠를 만드는 방법을 볼 수 있습니다.
기본적으로 그것은 우리의 사이트의 특정 부분 또는 콘텐츠에 대한 사용자의 평가의 수집에 대한 클라이언트측 인터페이스 설정이 포함됩니다. 평가는 1에서 (실제로 실현, 호텔에 사용된 것과 유사한 시각 품질을 측정하는기구) 5 별에 사용자 등급에 표현됩니다.
(기사는 아래에 계속 ...)
이 문서는 클라이언트 측 개발에만 문제를 (CSS와 자바 스크립트에 따라) 주소되며 향후 문서에서 우리는 AJAX와 통합됩니다 서버측 스크립트 언어에 따라 투표를 수집하는 시스템을 개발.
우리는 우리가 생산되는 결과를 표시하는 간단한 화면 캡처와 함께 시작 :
먼저 CSS를 사용하여화한를 만드는 방법을 보자 :
<style type="text/css">
UL은 # STAR_RATING
{
여백 : 0px;
여백 : 0px;
높이 : 16px;
목록 스타일 : 없음;
}
# 그들을 STAR_RATING
{
폭 : 19px;
높이 : 16px;
디스플레이 : 블록;
플로트 : 왼쪽;
배경 이미지 : URL ( '스타 off.gif');
배경 - 반복 : 아니오 - 반복;
커서 : 포인터;
}
# li.on을 STAR_RATING
{
배경 이미지 : URL ( '스타 on.gif');
}
# span.output을 STAR_RATING
{
패딩 : 3px;
색상 : # 339900;
글꼴 두께 : 굵게;
}
</ 스타일>
본질적으로 우리는 ID를 (# STAR_RATING)를 사용하여 컨테이너를 정의하고 우리 모두화한 요소 (글머리 기호 목록 - "입력란에"관리 - 간단한가 <span>) 있습니다.
지금 우리의 작은 응용 프로그램의 자바 스크립트 코드를 :
<script type="text/javascript">
/ / 나는 이미지 롤오버 효과를 미리하는 데 사용
Staron var에 = 새 이미지 (); staron.src = "스타 on.gif";
/ /이 시작됩니다 투표에 대한 기능을 정의
한 5 별 도시 : / / onClick 이벤트
star_vota 기능 (QT)
{
/ /는 투표시 반환하는 출력 변수를 생성
star_output var에 = '당신이 투표 <span의 class="output">'+ QT + '별 </ span>를';
/ / 동적으로 메시지와 함께 DIV 컨테이너의 내용을 변경할 수
/ / 확인 투표 장소를했다
. document.getElementById ( 'STAR_RATING') innerHTML = star_output;
}
/ / 동적으로 별 "전원"에 대한 기능을 정의
/ / 오직 인자는 빛에 별의 숫자는
star_accendi 기능 (QT)
{
/ / DIV의 스타가 있는지 확인
DIV는 이미 투표한 것을 의미하지는 않습니다 / /면
경우 (document.getElementById ( 'star_1'))
{
/ /주기의 모든 별을 포함하는 5 DIV
(; I + + I = 1, 난 <= 5)
{
P는 빛에 이하 별의 수를 동일합니다 / /면
/ / "의"클래스 동적으로 설정
경우에은 (i <= QT) document.getElementById ( 'star_'+ I) 클래스 = '에서'.;
/ / 그렇지 않으면, 별표를 해제 ...
다른 document.getElementById ( 'star_'+ I) 클래스 = ''.;
}
}
}
/ / 이것은 출력을 생성하는 기능입니다.
/ / 하나의 인자 당신이 회전하려는 별의 숫자로 이동
/ 기본적으로 / (이 예를 들어, 학년이 얻은 보여줄 수 있습니다
이전 투표에서 / /)
기능 성급 (QT)
{
/ /이 별의 생성 HTML 코드를 인쇄
document.write ( '<div id="STAR_RATING" onmouseout="star_accendi(' + QT +')""> <ul>');
document.write ( '<li id="star_1" onclick="star_vota(1)" onmouseover="star_accendi(0); star_accendi(1)"> </ 리튬>');
document.write ( '<li id="star_2" onclick="star_vota(2)" onmouseover="star_accendi(0); star_accendi(2)"> </ 리튬>');
document.write ( '<li id="star_3" onclick="star_vota(3)" onmouseover="star_accendi(0); star_accendi(3)"> </ 리튬>');
document.write ( '<li id="star_4" onclick="star_vota(4)" onmouseover="star_accendi(0); star_accendi(4)"> </ 리튬>');
document.write ( '<li id="star_5" onclick="star_vota(5)" onmouseover="star_accendi(0); star_accendi(5)"> </ 리튬>');
document.write ( '</ UL> </ 사업부>');
/ / 정의된 문제의 별을 켭니다
star_accendi (QT);
}
</ SCRIPT>
나는 자바 스크립트 코드가 더 이상 덧글을 필요로한다고 생각하지 않습니다.
우리의 페이지에 평가 시스템을 통합하기 위해 우리는 다음의 간단한 단계를 따르십시오 :
- 페이지 헤더에 포함 (<HEAD> ...</ HEAD>) CSS;
- 항상 페이지에서 자바 스크립트를 포함;
- : 페이지 (<BODY> ...</ 기관>) 우리가 원하는 어디로 우리 별이는이 간단한 알리미를 삽입 나타납니다
<script type="text/javascript"> 스타 (3); </ SCRIPT>그 결과 우리가 그래픽이 문서의 시작을 나타내는 것을이다.
나는 우리가 아약스를 기반으로 정교한 투표 시스템에이 간단한 DHTML 스크립트를 변환하는 방법을 볼 수 있습니다 다음 문서에 여러분을 초대합니다.
같은 카테고리에 ...
E - 학습
 |
AJAX 코스
ASP, ASP.NET 및 PHP로 웹 2.0 AJAX 기반 애플 리케이션. 2012년 6월 1일까지 -10 % 할인합니다. |
 |
CSS 코스
W3C CSS와 XHTML에 따라 웹 디자인 및 접근성. 2012년 6월 1일까지 -15 % 할인. |
 |
자바 스크립트 강좌
클라이언트측 스크립팅 가이드를 완료하십시오. 2012년 6월 1일까지 -10 % 할인합니다. |
스폰서 링크
