공짜 물건 사냥꾼이라면 많은 PSD 사용자 인터페이스 (UI)를 다운로드했을 가능성이 있습니다. 그 중 일부는 정말 놀랍습니다. 우리가 작업 한 디자인을 프로토 타이핑하여 시간을 절약 할 수 있습니다..
이 포스트에서는 PSD UI를 코딩하고 좀 더 기능적으로 바꿀 것입니다. 다음 PSD UI 슬라이더를 jQuery UI 슬라이더 테마로 적용하도록 코딩 할 것입니다..
하나, 받아 적기를 바랍니다 이 튜토리얼은 중급 수준 경험의. 그렇게 말했다고해서, CSS와 jQuery에 상당히 익숙하다면 여전히 따라하기 쉽습니다..
좋아, 이제 시작하자..
1 단계 : jQuery UI
분명히 jQuery와 jQuery UI 라이브러리가 필요하며 두 가지 옵션을 사용할 수 있습니다. 첫째, Google Ajax API CDN, Microsoft CDN 및 jQuery CDN과 같은 jQuery와 jQuery UI를 직접 연결하면 호스팅 된 CDN 파일을 사용하여 사이트를 실시간 온라인에 게시 할 때 많은 이점이 있습니다.
하지만 오프라인으로 만 작업 할 것이므로 둘째 대신.
공식 다운로드 페이지에서 jQuery UI 라이브러리를 다운로드하고 사용자 정의합니다. Slider 플러그인 만 필요하기 때문에 종속성과 함께 Slider 라이브러리 만 선택하고 나머지는 그대로 둡니다. 그렇게하면 우리가 사용하는 파일이 훨씬 더 슬림 해지고 더 빨리로드 될 수 있습니다. 그 후에 모든 라이브러리를 HTML 문서에 링크하십시오. 페이지 맨 아래 또는 닫는 것이 좋습니다.
정확한 태그.
2 단계 : HTML 마크 업
슬라이더의 마크 업은 매우 간단하며 HTML5 안에 필요한 모든 마크 업 (툴팁, 슬라이더 및 볼륨)을 래핑했습니다. 섹션 꼬리표. 그러면 jQuery UI가 나머지를 자동으로 생성합니다..
3 단계 : Slider UI 설치
아래의 스 니펫은 페이지에 슬라이더를 설치하지만 기본 구성 만 적용합니다..
$ (function () $ ( "#slider") .slider (););
그래서 여기에서는 다른 설정을 추가하여 슬라이더를 약간 향상시킬 것입니다..
먼저 슬라이더 요소를 변수로 저장합니다..
var 슬라이더 = $ ( '# slider'),
그런 다음 슬라이더의 최소 기본값을 설정합니다. 35 세, 처음로드 될 때.
slider.slider (range : "min", value : 35,);
이 시점에서 우리는 아직 브라우저에서 아무것도 볼 수 없습니다. jQuery UI가 기본적으로 마크 업만 생성합니다.. 따라서 브라우저에서 결과를 시각적으로보기 위해 몇 가지 스타일을 적용해야합니다..
4 단계 : 스타일
진행하기 전에 배경 텍스처와 아이콘과 같은 PSD 소스 파일의 일부 자산이 필요합니다..
우리는 이야기하지 않을 것이다. 슬라이스하는 법 이 기사에서는 코드에만 초점을 맞출 것이다. 슬라이스하는 방법을 모르는 경우 진행하기 전에 먼저 다음 스크린 캐스트를 시청하십시오..
PSD에서 HTML로 디자인 변환 - 넷츠츠+
좋아, 이제 스타일을 추가하자..
슬라이더를 브라우저 창의 중앙에 배치하고 PSD에서 슬라이스 한 배경을 신체.
body background : url ( '... /images/bg.jpg') 반복 상단 왼쪽; 섹션 너비 : 150px; 높이 : 자동; margin : 100px auto 0; 위치 : 상대적;
다음으로, 우리는 스타일을 적용 할 것입니다. 툴팁, 음량, 손잡이, 슬라이더 범위 그리고 슬라이더 그 자체.
우리는 다음 부분부터 시작하여이 부분을 할 것입니다 ...
슬라이더
Slider 자체의 최대 값을 정의하지 않았으므로 jQuery UI가 기본값을 적용합니다. 그건 100. 따라서 우리는 또한 100 슬라이더의 (px) 폭.
#slider border-width : 1px; border-style : 솔리드; 테두리 색 : # 333 # 333 # 777 # 333; border-radius : 25px; 너비 : 100px; 위치 : 절대; 높이 : 13px; 배경색 : # 8e8d8d; 배경 : url ( '... /images/bg-track.png') 반복 위 왼쪽; box-shadow : inset 0 1px 5px 0px rgba (0, 0, 0, .5), 0 1px 0px rgba (250, 250, 250, .5); 왼쪽 : 20px;
툴팁
툴팁은 슬라이더 위에 절대적으로 위치 와 -25px 그것의 최고위.
.툴팁 위치 : 절대; 디스플레이 : 블록; 상단 : -25px; 너비 : 35px; 높이 : 20px; color : #fff; 텍스트 정렬 : 가운데; 글꼴 : 10pt Tahoma, Arial, sans-serif; border-radius : 3px; 국경 : 1 픽셀 단색 # 333; 상자 그림자 : 1px 1px 2px 0px rgba (0, 0, 0, .3); 박스 크기 : border-box; 배경 : 선형 그라데이션 (top, rgba (69,72,77,0.5) 0 %, rgba (0,0,0,0.5) 100 %);
음량
우리는 우리의 아이디어를 충족시키기 위해 볼륨 아이콘을 약간 수정했습니다. 아이디어는 다음과 같은 효과를 창출 할 것입니다. 점차적으로 볼륨 바를 올리십시오. 슬라이더의 값에 따라 미디어 플레이어 사용자 인터페이스에서 이러한 효과를 자주 보았을 것입니다..
.볼륨 디스플레이 : 인라인 블록; 너비 : 25px; 높이 : 25px; 오른쪽 : -5px; 배경 : url ( '... /images/volume.png') no-repeat 0 -50px; 위치 : 절대; margin-top : -5px;
UI 핸들
핸들의 스타일은 아주 간단합니다. 금속성 원형처럼 보이며 PSD에서 슬라이스 된 아이콘과 배경으로 부착 된 아이콘이 있습니다..
또한 커서 모드를 바늘, 사용자는이 요소가 끌기 가능하다는 것을 알게 될 것입니다.
.ui-slider-handle 위치 : 절대; z- 색인 : 2; 너비 : 25px; 높이 : 25px; 커서 : 포인터; 배경 : url ( '... /images/handle.png') no-repeat 50 % 50 %; font-weight : bold; color : # 1C94C4; 개요 : 없음; 상단 : -7px; margin-left : -12px;
슬라이더 범위
슬라이더 범위는 약간 흰색 그라디언트 색상을 갖습니다..
.UI 슬라이더 범위 배경 : 선형 그래디언트 (위쪽, #ffffff 0 %, # 에아 에아 100 %); 위치 : 절대; border : 0; 상단 : 0; 높이 : 100 %; border-radius : 25px;
5 단계 : 효과
이 단계에서는 슬라이더의 특수 효과 작업을 시작합니다..
툴팁
이 시점에서 툴팁에는 내용이 없으므로 슬라이더의 값으로 채울 것입니다. 또한 도구 설명의 가로 위치는 핸들의 위치와 일치합니다..
먼저 툴팁 요소를 변수로 저장합니다..
var 툴팁 = $ ( '. 툴팁');
그런 다음 위에서 언급 한 툴팁의 효과를 슬라이드 이벤트에 정의합니다..
slide : function (event, ui) var value = slider.slider ( 'value'), tooltip.css ( 'left', value) .text (ui.value);
그러나 툴팁이 처음에는 숨겨지기를 원합니다..
tooltip.hide ();
그 후, 핸들 슬라이딩을 시작하려고 할 때, 페이드 인 효과와 함께 표시됩니다..
start : function (event, UI) tooltip.fadeIn ( 'fast'); ,
그리고 사용자가 핸들을 슬라이딩하는 것을 멈 추면 툴팁이 페이드 아웃되어 숨겨집니다..
stop : function (event, UI) tooltip.fadeOut ( 'fast'); ,
음량
위에서 언급 한 것처럼 스타일 섹션, 우리는 볼륨 아이콘을 핸들의 위치에 따라 변경하거나 정확하게 조정할 것을 계획합니다., 슬라이더의 값. 따라서 다음과 같은 조건문을 적용하여이 효과를 만듭니다..
그러나 먼저 볼륨 요소와 슬라이더 값을 변수로 저장합니다..
volume = $ ( '. volume');
그런 다음 조건문을 시작합니다..
슬라이더의 값이 다음보다 작거나 같으면 5 볼륨 아이콘은 막대가 전혀 나타나지 않아 볼륨이 매우 낮다는 것을 나타내지 만 슬라이더의 값이 증가하면 볼륨 막대도 증가하기 시작합니다.
if (value <= 5) volume.css('background-position', '0 0'); else if (value <= 25) volume.css('background-position', '0 -25px'); else if (value <= 75) volume.css('background-position', '0 -50px'); else volume.css('background-position', '0 -75px'); ;
함께 모아라.
좋아요, 당신이 위의 모든 것들과 혼동한다면, 그렇게하지 마십시오. 다음은 바로 가기입니다. 다음 코드를 모두 문서에 넣으십시오..
tooltip = $ ( '. tooltip'); tooltip.hide (); slider.slider (range : "min", min : 1, value : 35, start : function (event, ui) tooltip.fadeIn ( 'fast');, slide : 함수 (이벤트, 사용자) var value = slider.slider ( 'value'), volume = $ ( 'volume '); tooltip.css ('left ', value) .text (ui.value); if (value <= 5) volume.css('background-position', '0 0'); else if (value <= 25) volume.css('background-position', '0 -25px'); else if (value <= 75) volume.css('background-position', '0 -50px'); else volume.css('background-position', '0 -75px'); ; , stop: function(event,ui) tooltip.fadeOut('fast'); , ); );
좋아요, 이제 브라우저에서 결과를 봅시다..
데모
소스 다운로드
결론
오늘 우리는보다 우아한 jQuery UI 테마를 성공적으로 만들었지 만 PSD 사용자 인터페이스를 기능적 볼륨 컨트롤러로 성공적으로 변환했습니다.
이 튜토리얼이 여러분을 고무시키고 PSD를보다 유용한 제품으로 만드는 방법을 이해하는 데 도움이되기를 바랍니다..
