설계 귀하의 페이지 jQuery UI를 테마

jQuery UI를 1.5의 출시가 Themeroller, 누가 함께 데리고와 사용자 및 jQuery "위젯의 집합을 다운로드"웹 페이지에서 사용할 수있는 간단한 방법.

간단 한 사전의 테마, 또는 조정하여 자신의 원하는대로 설정을 내장에서 테마를 선택하고 다운로드합니다. 네 다운로드는 모든 작업이 모든 위젯을위한 필요, 그리고 한 페이지에있는 모든 이들과 함께 데모 파일은 파일이 포함됩니다.

사실, 이러한 중고 내장 테마 물론 새로운 설계를위한 시작 지점으로 당신이 역할을 수있습니다. 의 기본 웹 사이트 탭 및 Accordian를 사용하여 테마를 다운로드를 조작하자.

청소 하우스

우리 사이트의 주요 콘텐츠 영역에 대한 탭 위젯을 사용하고, 사이드바 아코디언 가고있습니다. 좋은 첫 번째 단계는 조직 그리고 HTML과 CSS 파일에서 추가 코드를 제거하기 시작 폴더에 있어야합니다.

내가를 다시 시작과 style.css에 CSS 파일 index.html을 demo.html 파일 명명.

그럼 난 아무것도 탭 및 아코디언 이외해야 할 일을했을 CSS 파일에서 모든 CSS를 제거했습니다. 저기 톤에있는 요소의 경우 글로벌 다시 사용하는 정말 필요 없어 재설정을 포함한 기본 CSS 파일에 추가 cruft,이 많습니다. 에서 집을 깨끗이해야한다 여기.

그런 다음 HTML 파일에서 기본적인 구조 또는 탭 또는 아코디언의 일부가 아닌 모든 코드를 제거하고 같은 일을. 여기 내 페이지와 같은 청소 후의 모습입니다 :

구조

탭 사이트의 메인 컨텐츠 영역으로 사용하는 좋은 의미합니다. 각 탭 기본적으로 사이트의 다른 영역을하실 수있습니다. 첫째, div에서 페이지의 ID와 사이트 전체를 포장하실 수있습니다 포장 그래서 우리 센터는 그것을 고정 너비를 설정할 수있습니다. 그 이후로 두 탭 및 아코디언 이미 div, 우리는 CSS로 그들을 타겟팅할 수있습니다 래핑에, 위치 고정 너비로 설정하고 양쪽에게 플로트. 이것은 CSS를 어떻게 생겼 수도있다 :

#page-wrap { width: 900px; margin: 0 auto; } #accordion { width: 280px; float: right; } #tabs { width: 600px; float: left; } 

이제 탭 메인 컨텐츠로 봐와 아코디언 더 많은 임무를 맡게됩니다 사이드바 같다. 각 탭의 사이트의 다른 섹션처럼, 단지 그것의 스위칭 페이지 이후 일을 전혀 페이지를 로드할 필요합니다 아주 멋진 역동적인 방식으로 작동할 수있습니다!

여기 내 페이지가 어떻게 생겼는지 이후 구조 조정의 비트 :

콘텐츠를 Fleshing

거기 밖으로 그 기본 콘텐츠를 가져 가자 우리 자신의 물건에 플러그를 시작합니다. 글쎄, 이것은 아직 데모 그래서 Lorem ipsum하지만 그 물건의 대부분을 .. 떠날거야 후 몇 가지 그래픽에 던져 넣고 좀 더 현실적인 내용을 플러그인을 지금 봐도됩니다 :

결승

그 전체 사이트를 함께 던져 약 20 분이었다. 그것은 어떤 의미 의해 걸작지만, 그것에 좋은 시작이 좋은 깨끗한 찾는 사이트입니다. 이니 표시하는 방법을 신속하게 웹 페이지를 구축하고 시작할 수도 themeroller jQuery UI를 통해 역동적인 멋진 기능을 가졌어요.

데모보기

파일 다운로드