IT를 표현

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

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

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

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

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 회전 목마를 (2000 회 다운로드)

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

어떻게 생겼 않습니다

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

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

평가 데이터 : 정수, 진수 또는 비율
현재 스크립트가 소수의 전체 값 (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 등급 평가 스크립트 (721 회 다운로드)

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

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

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

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

우리가 테이블 셀 내부에 일부 내용을 정렬, 우리의 페이지 레이아웃을 만드는 CSS로 처리해야만하기 전에 그냥 애들 장난 같았다. 간단히 "정렬"또는 원하는 정렬, 케이크 조각을 가지고있는 테이블의 "valign"속성을 설정합니다!
우리 요소 속성을 "수직 정렬"가 불구의 CSS 레이아웃을 통해, 그것은 "정렬"또는 "valign"등록 한 간단하게 될 것 같지 않습니다. 더 specifiic 될 수있는 "수직 정렬"크로스 브라우저 CSS의 조각을 작성하고 특히, 귀하의 문제를 해결할 것 같습니다하지 마십시오.

HTML 테이블의 사용없이, 객체 중심의 문제는, 그것 이미지 또는 함유 부문에서 일부 텍스트, 아마도 언젠가는 모든 UI / CSS 개발자 악몽이었습니다합니다. 이 문제는 더 이상 중심되는 개체가 자연 속에서 역동 경우 그 높이가 변수되면, IE를 정렬에 대해 걱정을 extrapolates (알 수없는 높이).

우리가 감당해내야만 브라우저의 범위에 걸쳐 효과적이라 알려진 바로 앞으로 해결책이 없다지만, 난 않습니다 도착하려고했는지 솔루션 (IE6, IE 7 전에 그것을 시도했다고 몇몇 브라우저에서 작동하는 것 , FF).

해결 방법 :
모질라, 오페라와 사파리와 같은 브라우저에서 이상한 속성이 단순히 "테이블 셀"(디스플레이 : 테이블 셀)에 포함된 부문의 '표시'속성을 설정하여, 그 감각에 회부 수있는 '수직이 정렬 "행동 .

문제는 아직, 아직 그들이, 그들은 단지 그것을 무시 마찬가지로 "테이블 - 셀"속성과 무지로 무엇으로 이해하는 사람이 아닌 것 같은데, 브라우저의 IE 가족과 함께 남아있다. 이런 일을하려면 HTML로 간단한 광고를 몇 가지 더 DOM 요소지만, 아래에 주어진 솔루션입니다.

CSS와 HTML은 다음과 같습니다
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML : -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> 전망 <br/> : 3,456 </ 사업부를>
</ 사업부>
</ 사업부>

결과는 다음과 같습니다 : -

여기 데모를 볼 | 다운로드 소스 파일 (453 회 다운로드)

TOP은 CSS를 정렬
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML : -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> 전망 <br/> : 1,234 </ 사업부를>
</ 사업부>
</ 사업부>

결과는 다음과 같습니다 : -

아래는 CSS를 정렬
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML : -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> 전망 <br/> : 1,234 </ 사업부를>
</ 사업부>
</ 사업부>

결과는 다음과 같습니다 : -

여기 데모를 볼 | 현재 다운로드

내가이 정렬 문제에 대한 합리적인 해결책을 찾기 위해 노력 이후, 나이처럼 보인다. 그러나 이제는이 솔루션과 함께, 나는 작은 평화에서 느낍니다.

그 언젠가는 희망이

• CSS에서 수직 정렬 속성은 돌려 많이 이길 필요없이, 그것이 테이블 셀 안쪽처럼 작동합니다
• 적어도 마진 탑 설정 : 자동과 마진 - 하단 : 자동, 여백에서 왼쪽 및 오른쪽 여백 설정 자동으로와 같은 결과로 제공합니다
• 브라우저 전쟁 언젠가는 이상이 될 것입니다.
• 가이 모두를위한 하나의 브라우저.

여기에 위의 솔루션의 CSS와 HTML 다운로드 (453 회 다운로드) .. understandability 들어, CSS는 최적화되지 않습니다

PS : 그리고 참, 그 내가 클릭한 일부 사진의 작은 이미지입니다 ...

단 몇 라이트 박스의 때 Google은 당신이 찾아내는 수있다 않지만. 내가 찾은 lightboxes 대부분 가진 문제는 그들이 모두 하나 이상 JQUERY, 프로토 타입, MOOTOOLS 그리고 저자와 같은 다른 중량 자바 스크립트 프레임 워크를 사용하는 것 같았다는 것이었습니다. 그들은 모두 근사하고 멋진 찾고 있습니다. 당신의 요구는 "하지만 내가 내 사이트에 대한 간단하고 가벼운 라이트 박스 스크립트 싶다"라면, 그럼 여기 있네요;

이 라이트 박스의 일부 멋진 기능

1. 매우 가벼운
   . 포장 스크립트 4킬로바이트 (8킬로바이트은 풀었)
   나. CSS의 2킬로바이트
   다. 라이트 박스 컨테이너를위한 HTML의 몇 줄
2. 이해하고 구현할 단순
3. 같은 페이지에 여러 Lightboxes 수 있습니다.
4. 같은 라이트 박스 컨테이너는 클릭할 링크 / 옵션에 따라 다양한 컨텐츠를 (별도 페이지에 숨겨진 사업부로 포함되는), 표시하는 데 사용됩니다.
5. 자동으로 고려와 같은 윈도우의 높이와 넓이 (화면 해상도), 페이지 스크롤 금액 및 라이트 박스 내용의 높이가 같은 모든 요인을 복용 자체 되잖아
6. IE 7과 FF에서 테스트

데모보기 |
다운 라이트 박스 소스 우편 (1810 회 다운로드)

jo.js, jo_pack.js [포장 버전] : - JAVASCRIPT 객체의 간단한 세트 [조], 요소, 창 및 문서 위치 스크립트가 포함되어 있습니다. 당신은 추상 함수를 작성하는 일부 고급 Javascripting와 당신의 손을 더럽히는하려는 경우 요소 속성과 같은 확대 JO.JS를 열 수 있습니다. Javascripting의 당신이 너무 많이하지 않으면 냅둬.

lightbox.js, lightbox_pack.js [팩킹된 버전] : - 라이트 박스 관리자가 스크립트를 포함합니다. 당신이 페이지에서 라이트 박스를 구현에도 책임이 페이지 디자이너, 경우 LightBoxManager를 이해해야합니다. LightBoxManager은 기본적으로 두 함수 showLightBox 및 closeLightBox가 포함되어 있습니다.

lightbox.css : - 당신이 CSS를 알고있다면, 당신이 모양-N-느낌 lightbox.css을 사용자 지정하는 lightbox.css와 주변 놀 수

index.html 페이지 : 두 개의 다른 콘텐츠로 라이트 박스의 샘플 구현

lb_underlay_bkg.png : - [라이트 박스가 열려있는 동안, 밑받침이 페이지의 다른 개체를 클릭으로부터 사용자를 방지 lighbox 아래 레이어입니다] 이것이 라이트 박스의 밑받침에 대한 배경을 사용하는 시미 / 빛이 투명 이미지입니다. 당신은 페이지 디자인 및 요구 사항에 따라이 목적도 어떤 이미지나 단색을 사용할 수 있습니다.

icon_lb_close.gif : - 빛의 상자의 오른쪽 상단에있는 가까운 라이트 박스 핸들에 대한 이미지입니다. 디자인에 따라 어떤 이미지를 사용할 수

데모보기 |
다운 라이트 박스 소스 우편 (1810 회 다운로드)

귀하의 의견과 피드백을 해주세요 ...