Library

JQuery STEP 9 - JQuery_UI

2023. 5. 2. 10:42
728x90

★ jQuery UI

  • https://jqueryui.com/
 

jQuery UI

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQue

jqueryui.com

  • 원하는 탬플릿으로 다운로드
  • 필요 파일

  • 선언
<link rel="stylesheet" href="css/jquery-ui.css">

<script src="js/jquery-3.6.4.js"></script>
<script src="js/jquery-ui.js"></script>

 

■ Draggable

$('#cat1').draggable();
  • 실행 결과

해당 이미지가 잘 드래그됌

  • axis : x | y , grid : [width, height]
$('.cat').draggable({
    // axis : 'x' //좌우로만 움직임
    // axis : 'y' //상하로만 움직임
    grid : [128, 128] //해당 크기만큼의 움직임
});
  • 실행 결과

자동으로 정렬되는 듯한 느낌이 듬

  • containment : 'parent'
$('#cat2').draggable({
    containment : 'parent' //부모 요소를 벗어나지 못함
});
  • 실행 결과

부모 박스를 벗어나질 못함

  • snap : 'id'
$('#cat2').draggable({
    snap : '#box' //해당 요소가 접근했을 때, 달라붙게 됌
});
  • 실행 결과

마그네틱 처럼 해당 요소 근처에 갔을때 착 달라붙는 현상

 

■ Droppable

$('#box').droppable({
    drop : function() {
        // alert();
        $('#box').css('background-color', 'tomato');
    }
});
  • 실행 결과

노란색이였다가 고양이가 상자안으로 들어가는 순간 빨간색으로 변함

 

$('#cat').draggable({
    cursor : 'move'
});

$('#box').droppable({
    drop : function() {
        // alert();
        $('#box').css('background-color', 'tomato');

        $('#cat').draggable({
            containment : '#box'
        });
    }
});

$('#cat').dblclick(function() {
    $('#box').css('background-color', 'gold');

    $('#cat').draggable({
            containment : ''
        });
});
  • 실행 결과

박스안에 들어가면 박스를 벗어나지 못했다가, 더블클릭 시, 해제

 

  • tolerance : 'intersect | pointer | fit | touch' : 기준을 정하는것
  • pointer : 포인터 기준, fit : 완전히 다 들어갔을 경우, touch : 살짝이라도 닿았을 경우
tolerance : 'pointer'

 

 

■ Resizable

$('#box').resizable({
    maxWidth : 500, //최대 길이
    maxHeight : 500,//최대 높이
    minWidth : 100, //최소 길이
    minHeight : 100,//최소 높이
    grid : [100, 100],//100,100만큼 
    animate : true,  //애니메이션 효과
    helper : 'helper'// 눈에 보여지는 눈금선
});
  • 박스 2개가 동시에 움직이게 만드는 것
$('#box2').resizable({
    alsoResize : '#box'
});
  • 실행 결과

실행 결과 : 첫번째 상자는 상위 코드처럼 혼자서 움직이지만, 아래 상자를 움직일 시, 첫번째 상자와 같이 움직이게 된다.

  • 이미지가 안깨지게 크기를 조절
$('#cat').resizable({
    aspectRatio : true
});

 

 

■ Selectable

<style>
    .ui-selected {
        background-color: gold;
    }
</style>

$('#list1').selectable();
  • <ul>태그를 이용한 응용 ex)
<style>
    #list1 .ui-selected {
        background-color: gold;
    }

    #list2 .ui-selected {
        background-color: yellowgreen;
    }

    body {
        margin-bottom : 300px;
    }

    #list2 {
        border : 1px solid #CCC;
        width : 120px;
        border-radius: 5px;
    }

    #list2 > h1 {
        font-size : 18px;
        margin : 0;
        text-align: center;
        background-color: #555;
        color : white;
        padding : 7px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }

    #list2 > ul {
        margin : 0;
        padding : 0;
    }

    #list2 > ul > li {
        text-align : center;
        padding : 5px;
        border-bottom : 1px solid #CCC;
        cursor : pointer;
    }

    #list2 > ul > li:last-child {
        border-bottom : 0px;
    }

</style>

$('#list2 > ul').selectable();
  • 실행 결과

  • 이미지를 이용한 ex)
<style> 
#list3 img {
    opacity: .2;
    cursor : pointer;
}

#list3 img:hover {
    opacity: .5;
}

#list3 img.ui-selected {
    opacity: 1;
}
</style>

$('#list3').selectable();
  • 실행 결과

실행 결과 : 해당 이미지의 커서를 대면 투명도가 진해지고, 선택시 투명도를 1로 돌려서 선택되는 효과

 

 

 

■ Sortable

$('#list1').sortable();
  • 실행 결과

목록을 드래그 해서 순서를 바꿀 수 있음.

 

  • 이미지 정렬
$('#list3').sortable();

해당 이미지의 순서를 움직일 수 있음.

 

728x90
저작자표시 비영리 변경금지 (새창열림)

'Library' 카테고리의 다른 글

BootStrap STEP 1 - BootStrap 셋팅&사용  (0) 2023.05.03
JQuery STEP 10 - JQuery Slider  (0) 2023.05.02
JQuery STEP 8 - 포트폴리오 기초  (0) 2023.05.01
JQuery STEP 7 - Traversing  (0) 2023.05.01
JQuery STEP 6 - Manipulation  (0) 2023.05.01
'Library' 카테고리의 다른 글
  • BootStrap STEP 1 - BootStrap 셋팅&사용
  • JQuery STEP 10 - JQuery Slider
  • JQuery STEP 8 - 포트폴리오 기초
  • JQuery STEP 7 - Traversing
IT의 큰손
IT의 큰손
IT계의 큰손이 되고 싶은 개린이의 Log 일지
Developer Story HouseIT계의 큰손이 되고 싶은 개린이의 Log 일지
IT의 큰손
Developer Story House
IT의 큰손
전체
오늘
어제
  • 분류 전체보기 (457)
    • 정보처리기사 필기 (18)
    • 정보처리기사 실기 (12)
    • 정보처리기사 통합 QUIZ (12)
    • 빅데이터 (11)
    • 안드로이드 (11)
    • 웹페이지 (108)
    • 자바 (49)
    • SQLD (3)
    • 백준 알고리즘 (76)
    • 데이터베이스 (41)
    • 깃허브 (2)
    • Library (14)
    • Server (31)
    • 크롤링&스크래핑 (3)
    • Spring (23)
    • Vue.js (13)
    • React (27)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

  • Developer Stroy House

인기 글

태그

  • 정보처리기사
  • css
  • it
  • IT자격증공부
  • 웹개발자
  • 개발블로그
  • 웹페이지
  • java
  • 프론트엔드
  • 정보처리기사필기
  • 데이터베이스
  • html
  • 개발자
  • 자바
  • ajax
  • 정보보안전문가
  • 앱개발자
  • React
  • 코딩테스트
  • 백엔드
  • IT자격증
  • jsp
  • 백준
  • IT개발자
  • JavaScript
  • 알고리즘
  • jquery
  • 웹개발
  • DB
  • DBA

최근 댓글

최근 글

Designed By hELLO
IT의 큰손
JQuery STEP 9 - JQuery_UI
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.