jquery - ui 사용

앞부분 프레임 이 없 는 상태 에서 화려 한 효 과 를 내 고 싶다 면 이때 jquery - ui 가 도움 이 될 것 입 니 다.
Jquery UI 는 오픈 소스 무료, Jquery 기반 플러그 인 으로 Jquery UI 의 초기 사용 을 기록 합 니 다.
첫째, 다운로드 설치
Jquery, 홈 페이지 다운로드:http://jquery.com;Jquery UI, 홈 페이지 다운로드:http://jqueryui.com/
Jquery 의 배 치 는 말 하지 않 고 Jquery UI 의 배 치 를 말 합 니 다.jquery - ui - 1.9.1 의 경우 Jquery UI 만 간단하게 사용 하면 jquery - ui - 1.9.1. custom. min. js 와 jquery - ui - 1.9.1. custom. min. css 를 가 져 오 면 됩 니 다. 더 깊이 알 고 싶 으 면 theme 방식 을 사용 하 는 것 을 권장 합 니 다. 다운로드 한 Jquery UI 를 압축 해제 한 후 themes 디 렉 터 리 를 찾 아 프로젝트 에 복사 한 다음 ui 디 렉 터 리 를 찾 아 ui 디 렉 터 리 를 themes 디 렉 터 리 에 복사 하 는 것 을 권장 합 니 다.그림:

기본 준비 완료.
둘째, 초보 사용
아코디언 효과 (accordion 구성 요소) 를 보 여 주 는 페이지 를 만 듭 니 다.
1. 인용 css

<link rel="Stylesheet" type="text/css" href="themes/base/jquery.ui.all.css" />

 
2. 인용 Js

<script type="text/javascript" src="themes/ui/jquery.ui.core.js">script>
<script type="text/javascript" src="themes/ui/jquery.ui.widget.js">script>
<script type="text/javascript" src="themes/ui/jquery.ui.accordion.js">script>

 
3. 실현 코드

Html 코드

<div id="accordion" class="ui-widget-content"   style="height: 80%;">
     <h6><a href="#">    a>h6>
     <div>...div>
     <h6><a href="#">    a>h6>
     <div>...div>
     <h6><a href="#">    a>h6>
     <div>
     　　<ul>
        　　<li><a href="#">    a>li>
           <li><a href="#">      a>li>
           <li><a href="#">    a>li>
        ul>
     div>
     <h6><a href="#">  a>h6>
     <div>...div>
div>

 

View Code

    <span>//</span><span>      </span>
    <span>function</span><span> initAccordion(){
    $( </span>"#accordion"<span> ).accordion({
        collapsible: </span><span>true</span><span>
    });
    }
    
    $(document).ready(</span><span>function</span><span>() {
           </span><span>//</span><span>   </span>
<span>        initAccordion();
        });
</span>

 
 4. 실현 효과

셋째, 주제 스타일 의 사용
 위의 예 에서 만 든 색조 가 나의 것 과 다르다 고 말 하 는 사람 이 있 을 것 이다. 그것 은 우리 가 사용 하 는 주제 스타일 이 다 르 기 때문이다.다음은 테 마 를 바 꾸 는 애플 리 케 이 션 을 만 들 겠 습 니 다.
1. 테마 다운로드
홈 페이지 의 Themes 페이지 에 들 어가 필요 한 테 마 를 선택 하여 다운로드 할 수 있 습 니 다. 그림:

하지만 저 는 개인 적 으로 이런 방식 을 추천 하지 않 습 니 다.저 는 모든 테 마 를 한꺼번에 다운로드 하 는 것 을 더 좋아 합 니 다. 간단 하고 빠 르 며 중복 되 지 않 은 것 을 한꺼번에 다운로드 하면 첫 페이지 밑 에 들 어가 Themes 다운 로드 를 찾 을 수 있 습 니 다. 그림 과 같 습 니 다.

2. 배치
다운로드 후 압축 을 풀 고 themes 디 렉 터 리 에 각 테마 에 대응 하 는 디 렉 터 리 가 있 습 니 다. 이 디 렉 터 리 를 열 면 각 테마 가 서로 다른 그림 과 jquery. ui. theme. css 라 는 스타일 파일 을 사용 한 것 을 발견 할 수 있 습 니 다.자, 관건 을 찾 았 습 니 다. 그럼 jquery. ui. theme. css 파일 을 어디서 인용 하 는 지 볼 까요?jquery. ui. all. css 파일 을 열 면 여기 서 인 용 된 줄 알 수 있 습 니 다.

@import "jquery.ui.base.css";
@import "jquery.ui.theme.css";

다음은 잘 될 것 입 니 다. 우선 프로젝트 의 themes 디 렉 터 리 아래 디 렉 터 리 를 만 들 고 base 디 렉 터 리 에 있 는 jquery. ui. theme. css, jquery - ui. css 를 제외 한 css 스타일 파일 을 모두 넣 습 니 다.

그리고 jquery. ui. all. css 파일 을 열 고 @ import "jquery. ui. theme. css" 를 엽 니 다.이 말 은 해 치 워 라.그리고 각 테마의 디 렉 터 리 를 themes 디 렉 터 리 에 복사 합 니 다.

여기까지 배 치 를 마 쳤 습 니 다.
 
3. 테마 코드 변경 실현

<link id="theme" rel=stylesheet type=text/css  href="themes/dot-luv/jquery.ui.theme.css">
<link rel=stylesheet type=text/css  href="themes/all/jquery.ui.all.css">

 
 

Html 코드

<select id="theme_changer">
    <option value="themes/dot-luv/jquery.ui.theme.css" selected="selected">Dot-luv Themeoption>
    <option value="themes/hot-sneaks/jquery.ui.theme.css" >Hot-sneaks Themeoption>
    <option value="themes/flick/jquery.ui.theme.css" >Flick Themeoption>
    <option value="themes/ui-darkness/jquery.ui.theme.css" >Ui-darkness Themeoption>
    <option value="themes/vader/jquery.ui.theme.css" >Vader Themeoption>
 select>

 
 

자 바스 크 립 트 코드

    
　　//    
    function initTheme(){
         $('#theme_changer').change(function() {
            // alert("changer theme");
             var theme = $(this).find("option:selected").val();
            // alert(theme);
             $('#theme').attr('href', theme);
             });
    }
　　$(document).ready(function() {
        //  
        initTheme();
        //   
        initAccordion();
　　});

 
 실현 효 과 는 다음 과 같다.



자, Jquery UI 의 초기 사용 은 여기까지 입 니 다.
감사 하 다.http://www.cnblogs.com/alex2520/archive/2012/11/03/alex_JqueryUI_01.html