'Front-End/jQueryUI' 카테고리의 글 목록 (5 Page)

[jQueryUI] 간단한 탭 패널 구현

Front-End/jQueryUI 2017. 1. 19. 19:35

간단한 탭 구현

1. 마크업 규칙

- 탭 리스트 : <ul><li>

- 패널 본체 : <div>

- 탭과 패널 : 페이지내 링크로 표현

- 탭 패널 전체 : <div>

2. 구문

$(탭패널).tabs({매개변수: 값..})

1) 매개변수

매개변수	개요	기본값
active	실행 시열리는 패널	0
collapsible	패널을 닫히게 할지	false
disabled	무효로 하는 탭의 경우 모든 탭을 무효화	false
event	탭을 열 때의 이벤트	click
heightStyle	패널의 높이	content
hide	패널을 감출 때 애니메이션
show	패널을 표시 할 때 에니메이션

2) collapsible: true

- 패널을 펼치거나 접을 수 있다

3. 구현

<!DOCTYPE html> <head> <meta charset="UTF-8" /> <title>jQuery UI</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.min.css" /> </head> <div id="tabs"> <ul> <li><a href="#accordion">Accordion</a></li> <li><a href="#dialog">Dialog</a></li> <li><a href="#tooltip">Tooltip</a></li> </ul> <div id="accordion"> <p>This is accordion</p> </div> <div id="dialog"> <p>This is dialog</p> </div> <div id="tooltip"> <p>This is tooltip</p> </div> </div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script> $(function() { $('#tabs').tabs({ active:0, collapsible : true }); }); </script>

4. 외부 파일화

- 탭패널을 클릭하여 외부파일을 읽어 올 수 있다

<!DOCTYPE html> <head> <meta charset="UTF-8" /> <title>jQuery UI</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.min.css" /> </head> <div id="tabs"> <ul> <li><a href="accordion.html">Accordion</a></li> <li><a href="dialog.html">Dialog</a></li> <li><a href="tooltip.html">Tooltip</a></li> </ul> </div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script> $(function() { $('#tabs').tabs({ active:0, collapsible : true }); }); </script>

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueryUI] AJAX를 이용한 비동기적 대화상자 (0)	2017.01.23
[jQueyUI] 간단한 대화상자 구현 (0)	2017.01.19
[jQueryUI] 간단한 아코디언 패널 구현 (0)	2017.01.19
[jQueryUI] 위젯의 열고닫는 시각적효과 - hide, show, animate (0)	2017.01.18
[jQueryUI] 위젯위치 제어 - position 매개변수 (0)	2017.01.18

리딩리드

,

[jQueryUI] 간단한 아코디언 패널 구현

Front-End/jQueryUI 2017. 1. 19. 11:16

간단한 아코디언 패널 구현

- jQueryUI를 이용하여 간단하게 구현이 가능하다

1. 마크업 규칙

- 패널 전체 : <div>로 묶는다

- 타이틀 : 요소

- 콘텐츠: <div> 로 정의

2. 구문

$(패널리스트).accordion({매개변수: 값})

1) 매개변수

매개변수	개요	기본값
active	실행시 연 패널	0(앞부분)
animate	애니메이션 방법	{}
collapsible	패널을 전부 닫히게 할지	false
event	패널을 열 때의 이벤트	click
header	헤더가 되는 요소	> li > : first-child> : not(li):even
heightStyle	패널의 높이	auto
icons	적용하는 아이콘

2) heightStyle: content

- auto로 값을 하면 모든 패널의 높이가 같아서 특정 패널은 여백이 생길수 있다. content로 지정한다면 내용에 따라 높이가 변한다

3. 구현

<!DOCTYPE html> <head> <meta charset="UTF-8" /> <title>jQuery UI</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.min.css" /> </head> <div id="ac" > <h3>Panel</h3> <div id="accordion"> <p>This is a accordion</p> </div> <h3>Dialog</h3> <div id="dialog"> <p>Dialog</p> </div> <h3>tooltip</h3> <div id="tooltip"> <p>This is a tooltip</p> </div> </div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script> $(function() { $('#ac').accordion({ active:0 }); }); </script>

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueyUI] 간단한 대화상자 구현 (0)	2017.01.19
[jQueryUI] 간단한 탭 패널 구현 (0)	2017.01.19
[jQueryUI] 위젯의 열고닫는 시각적효과 - hide, show, animate (0)	2017.01.18
[jQueryUI] 위젯위치 제어 - position 매개변수 (0)	2017.01.18
[jQueryUI] jQueryUI 표준 아이콘 세트 이용하기 (0)	2017.01.16

리딩리드

,

[jQueryUI] 위젯의 열고닫는 시각적효과 - hide, show, animate

Front-End/jQueryUI 2017. 1. 18. 17:57

위젯의 열고닫는 시각적효과 - hide, show, animate

1. 정의

- 매개변수에 따라 위젯의 표시/감춤 효과를 줄 때 사용

1) 위젯의 종류

- Accordion(animate)

- Dialog(show, hide)

- Tabs(show, hide)

- Tooltip(show, hide)

2. show/hide/animate 매개변수 값

데이터형	개요
Boolean	효과를 유효로 할지
Number	재생 시간
String	Easing의 이름

- Object

키 이름	개요
effect	효과의 이름(accordion x)
easing	Easing이름
duration	재생시간
delay	지연 시간(accordion x)

3. 예제

<!DOCTYPE html> <head> <meta charset="UTF-8" /> <title>jQuery UI</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.min.css" /> </head> <button id="btn">down</button> <div id="dialog" > <p> You can download here </p> </div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script> $(function() { $('#dialog').dialog({ width: 500, height: 400, modal: false, autoopen:false, show:{effect:'slide',duration:800}, hide : 1000, buttons: { 'down': function() { location.href = '#'; }, 'close': function() { $(this).dialog('close'); } }, position: { of : '#btn', at: 'right bottom', my: 'left top' } }); $('#btn').click(function() { $('#dialog').dialog('open'); }); }); </script>

- 나올 떄 슬라이드 처럼 나오고 사라질 때 페이드아웃 효과

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueryUI] 간단한 탭 패널 구현 (0)	2017.01.19
[jQueryUI] 간단한 아코디언 패널 구현 (0)	2017.01.19
[jQueryUI] 위젯위치 제어 - position 매개변수 (0)	2017.01.18
[jQueryUI] jQueryUI 표준 아이콘 세트 이용하기 (0)	2017.01.16
[jQueryUI] jQueryUI 이용 방법 (0)	2017.01.16

리딩리드

,

[jQueryUI] 위젯위치 제어 - position 매개변수

Front-End/jQueryUI 2017. 1. 18. 17:42

위젯위치 제어 - position 매개변수

1. 정의

- 위젯에서 position 매개변수 에 따라 리스트, 대화상자 등의 표시 위치 제어

1) 위젯 종류

- AutoComplete

- Dialog

- Menu

- Tooltip

2. Position 매개변수

키	개요
my (top, bottom, left, right, center)	자신의 위치
at (top, bottom, left, right, center)	기점이 되는 요소 상의 위치
of	기점이 되는 요소(셀렉터식, jquey 요소)
collision	화면에서 넘치는 경우의 처리

3. 예

<!DOCTYPE html> <head> <meta charset="UTF-8" /> <title>jQuery UI</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.min.css" /> </head> <button id="btn">down</button> <div id="dialog" > <p> You can download here </p> </div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script> $(function() { $('#dialog').dialog({ width: 500, height: 400, modal: false, buttons: { 'down': function() { location.href = '#'; }, 'close': function() { $(this).dialog('close'); } }, position: { of : '#btn', at: 'right bottom', my: 'left top' } }); $('#btn').click(function() { $('#dialog').dialog('open'); }); }); </script>

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueryUI] 간단한 아코디언 패널 구현 (0)	2017.01.19
[jQueryUI] 위젯의 열고닫는 시각적효과 - hide, show, animate (0)	2017.01.18
[jQueryUI] jQueryUI 표준 아이콘 세트 이용하기 (0)	2017.01.16
[jQueryUI] jQueryUI 이용 방법 (0)	2017.01.16
[jQueryUI] 드랍 요소 제어하기 - droppable[accept, scope] (0)	2017.01.12

리딩리드

,

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

'Front-End/jQueryUI'에 해당되는 글 38건

[jQueryUI] 간단한 탭 패널 구현

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueryUI] 간단한 아코디언 패널 구현

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueryUI] 위젯의 열고닫는 시각적효과 - hide, show, animate

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueryUI] 위젯위치 제어 - position 매개변수

'Front-End > jQueryUI' 카테고리의 다른 글

공지사항

카테고리

태그목록

글 보관함

달력

링크

리딩리드

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바