IT를 표현

뿐만 아니라 Mootools에 대한 여러 밖에 Carousels, 다양한으로 난 여전히 좋은 이유로 내 자신의 회전 목마 클래스를 작성하기로 결정
1. 페이징 기능 (회전 목마에서 특정 슬라이드 / 단계를 점프하는 법) 구함.
2. 왼쪽 및 오른쪽 버튼 / 링크의 배치와 자유는 어디까지 내주십시오 싶었어요.
3. 슬라이드 스텝을보다 효율적으로 관리할 수 있습니다.

나는 위의 기능, 새로운 회전 목마를 만들 한거 ... 아래로 ... 필요한 것입니다! 수정을 제안 부담없이!

내 예제는이 ... [모양 보기 데모 ]

데모보기 | 페이징 버전 1.0으로 다운로드 Mootools 회전 목마를 (1992 회 다운로드)

1. 회전 목마다 페이징

당신은 쉽게 간단하게 true로 MooCarousel의 인스턴스를 만드는 동안 전달된 마지막 parater이다 페이징 플래그 (원하는 페이징) 또는 false를 (donot가 페이징을 원하는) 설정하여 여러분의 회전 목마에 페이징을 추가할 수 있습니다.

VAR carousel1 = 새로운 MooCarousel ( 'carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss 사실); / / NS 슬라이드 = 수, SSS는 = 슬라이드 스텝 크기

그리고 당연히 당신은 그들의 CSS를 수정하여 원하는대로 이러한 페이징 achors의 모양-N-느낌을 변경할 수 있습니다.

. carousel_paging {텍스트 정렬 : 오른쪽, 여백 : 5px 10px 0 0;}
. carousel_paging 전류, carousel_paging 페이지 {개요 : 없음; 폭 :... 15px; 높이 : 15px; 라인 높이 : 15px; 텍스트 정렬 : 센터; 디스플레이 : 블록; 플로트 : 왼쪽; 배경 : # D8D8EB는; 여백 : 0 1px 0 0; 텍스트 장식 : 없음;}

. carousel_paging : 가져가, carousel_paging 현재 {배경 : # 4D4D9B; 색깔 : # FFFFFF;}..

글쎄! 작은 문제에도 불구하고있다, 페이징 앵커가 세트면 그것은 회전 목마 컴포넌트 후 항상 생성된다. 난 그게 역동뿐만 아니라 확인하고 싶었어하지만 그때 막 비율 나가 불고위한 Script를 유지하기 위해, 내가 건너하기로 결정했습니다.
하지만 넌 어린 자바 스크립트를 알고, 당신은 쉽게 당신의 요구를 만족시킬려고 MooCarousel 클래스에서 페이징 생성 코드를 수정할 수 있습니다.

2. 왼쪽 및 오른쪽 아이콘 Customising

당신은 간단하게 CSS로 장난치는에 의해 배치, 이미지나 왼쪽과 오른쪽 버튼의 displat 속성을 변경할 수 있습니다. 왼쪽 및 오른쪽 buttoms의 게재 위치를 변경할 수 있도록하는 것은 바로 내의 회전 목마 클래스에 나를 위해 실제 이유였다.
이 MooCarousel 클래스는 ID가이 버튼 밖으로 받아들이고 있기 때문에, 당신은 실제로 당신이 괜찮다면, 페이지의 아무 곳이나이 버튼을 배치할 수있는 ... 그런 요소 계층 구조에 있어야 할 필요는 없습니다, 나의 예제와 같이.

VAR carousel1 = 새로운 MooCarousel ( 'carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss 사실);

CSS
.. carousel_container_l, carousel_container_r {여백 : 50 픽셀 0 0 0; 위치 : 상대적; 폭 : 23px; 높이 : 20px; 플로트 : 왼쪽; 커서 : 포인터;}

. carousel_container_r {배경 위치 : 0-38px;}

. carousel_container_l {배경 위치 : 0-58px;}

3. 슬라이드 단계 Customising

난 내 CUSTOMISING 슬라이드 단계를 무슨 말씀이세요?
대부분 Carousels이 보이는 창으로 가득 밀어. 네 가지 항목을 (위의 예제에서와 같은) 가지고 그렇게 말하고, 모두 네 개의 항목을 밀어 것입니다. 이 회전 목마 구성 요소와 함께, 당신은 슬라이드의 숫자와 선택 단계의 크기를 전달합니다.

VAR carousel1 = 새로운 MooCarousel ( 'carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss 사실);
c_ns 슬라이드 = 수, c_sss = 슬라이드 스텝 크기

또한, 내 example1에 나는 어디 로직을 기반으로 슬라이드 스텝 크기를 calcuted있다, 나는 품목의 수, 각 항목에 너비와 CSS의 각 항목 이후에 제공했다고 여백을 알아요.

카로틴 1 / * * /

VAR c1_w = 92; / / 카로틴 항목 폭

VAR c1_n = 10; 비교의 카로틴 항목의 / / 총 개수

VAR c1_pp 비교의 카로틴의 제품 perpage의 = 4 / / 번호

VAR c1_marginFactor = 51;

VAR c1_sss = c1_w * c1_pp; / / SSS = 슬라이드 스텝 크기

VAR c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0.5) / / NS의 = 숫자 슬라이드

c1_sss + = c1_marginFactor; 마진에 대한 / / SSS = 슬라이드 스텝 크기, 51

요구 사항 : Mootools 1.2

데모보기 | 페이징 버전 1.0으로 다운로드 Mootools 회전 목마를 (1992 회 다운로드)

(이것은 MooTools 라이브러리의 전원을 사용하기 때문에 물론 크로스 브라우저,) MooRating는 쉽고, 가볍고 뛰어난 Mootools는 평가 솔루션을 바탕으로. 그것은, 등급 이미지 (필자는 다운로드와 별, 바, 하트를 제공하지만, 자신의 다양성을 만들어 단지에 놓을 수) 여러분의 선택으로 될 수 단순히 때문에 "등급"되나되지 않습니다.

어떻게 생겼 않습니다

	서로 다른 이미지 Mootools 평점 데모보기
	백분율 값으로 Mootools 평점 데모보기
	분수 값과 Mootools 평점 데모보기

다운로드 Mootols 등급 평가 스크립트 (718 회 다운로드)

평가 데이터 : 정수, 진수 또는 비율
현재 스크립트가 소수의 전체 값 (1,2,3,4,5), (1.24, 3.45 등)이나 비율의 평가 데이터 (12 %, 55 %의 등)를 표시하도록 설계되었습니다. 언급한 형식의 데이터를 표시하는 선택은 자바 스크립트 내의 일부 플래그 값 (moorating.js)를 변경하여 간단하게 설정할 수 있습니다
기본적으로 선택한 포맷으로 값을 표시하기 위해, 놀 수있는 두 전자 두 플래그가 없습니다 ...

VAR inpercent = false를, 당신은 백분율 값이 표시되는 것을 요구하는 경우 / / 사실이 플래그를 설정
VAR isFractional가 1.24, 1.25, 4.56보다는 1,2 등 분수 값을 ... 5 원한다면 = false를 / / 사실로 설정

그리고 나는이 필요한 어떤 사연이있을 것 없다. 더욱이. 스크립트는 매우 간단합니다. 당신이 약간 javascripting를 알고있다면, 당신은 표시 값의 종류를 얻기 위해 스크립트를 수정할 수 있습니다. 표시할 수있는 세 소수점 환경을 원한다면 예를 들어 ... 그냥 아래에 스크립트를 조정할 ...

/ / 2 변경됩니다 ~ 3; | (isFractional) {. moostartval [전] innerHTML = formatNumber (X, 3)이 경우 (= 0 X <| X = 5>)} 경우
또 {moostartval [전] innerHTML = Math.round (x)를.;

평가 값 업데이트 :
난 항상 그것이 바로 사용자가 요금을 무언가로 등급을 업데이 트하려는 뜻이 아니라 내 경험에서 알기 때문에, 추천 값을 업데이 트하기 위해 모든 AJAX 스크립트를 작성하는 귀찮게 havent. 당신은 정격 값으로 당신이 원하는 건 뭐든지 할 자유, 그것이 AJAX를 사용하여 업데이 트하거나 제출하거나 숨겨진 양식 필드 값을 설정하여 전체 양식 등을 함께 제출되어야

함수 updateRating (ID, 등급) {
/ / 경고 (ID + ","+ 등급);
/ /이 등급대로 그대로 해
}

"updateRating"라는 자바 스크립트 함수가있다. 이 기능에 관해서 식별, 평가 사업부의 ID를 전달하고있는 등급 업데이트 및 평가의 가치 [updateRating (ID, 등급)].되었습니다 (페이지에서 한 등급 더 있는지있다면) 내가 앞에서 언급한대로,이 값을 원하는대로 선택할 수 있습니다.

평점 이미지 : 별, 하트, 바 또는하시기 바랍니다 아무것도
위의 유형 (별, 하트 등) 중 어느 등급을 변경하는 것은 매우 간단합니다. 당신은 이미지의 이름을 변경하면 CSS 파일에 필요한 변경을,, 그거 그냥 제공되는 것과 유사한 이미지를 만들어 기억 인치 떨어뜨 아래를 참조하십시오.

. moostar {여백 : 0px; 패딩 : 0px; 오버플로우 : 숨겨진; 폭 : 84px; 높이 : 20px; 플로트 : 왼쪽; 배경 : URL ( 'stars.gif') 반복-X;}
. moostar 스팬 {플로트 : 왼쪽, 여백 : 0px; 패딩 : 0px; 디스플레이 : 블록; 폭 : 84px; 높이 : 20px; 텍스트 장식 : 없음; 텍스트 들여쓰기 :-9000px; Z-인덱스 : 20;}
.. moostar curr {배경 : URL ( 'stars.gif') 25px를 떠난;}

대부분의 등급 위젯은 각 스타의 이벤트 마우스로 스타와 하프 스타 이미지를 사용합니다. 음메 평가는 매우 낮은 오버헤드와 필요한 시각 효과를 달성하기위한 배경 이미지로 간단한 스프 라이트 이미지를 사용합니다.

요구 사항 : Mootools 1.2
다운로드 Mootols 등급 평가 스크립트 (718 회 다운로드)

저는 mootools를 사용하여 이중 고정된 슬라이더 (최소 및 최대 두 단자와 슬라이더)를 찾고 있었다. 비록, 내가 mootools 포럼에 몇 잘한 더블 고정된 슬라이더를 찾았지, 문제는 이러한 모든 슬라이더의 움푹 들어간 곳은 선택한 범위 마커를 가지고했습니다. 드디어! 난 내 자신을 작성하기로 결정했습니다. 글쎄! 나는 원래 코드를 사용하여 범위가 아래 내 예제와 같이 시각적으로 선정 표시된 슬라이더 배경을 가지고 그것을 변경 했어요. 파란색 영역은 선택한 가치의 범위를 나타냅니다.

버전 2.2 데모보기 | 다운로드 Mootools 더블 슬라이더 버전에게 2.2 고정된 (11,763 회 다운로드)

넌 아주 쉽게 필요한 slider.css을 수정하여 모양을 변경하고 범위 표시기 (위의 예제에서는 파란색), 슬라이더 노브, 슬라이더 트랙의 느낄 수 있습니다.

당신이 그것 유용한 발견하면 나에게 댓글을 떨어뜨리지 마십시오.