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

[jQueryUI] 툴팁으로 이미지 나오게 하기

Front-End/jQueryUI 2017. 1. 25. 13:59

툴팁으로 이미지 나오게 하기

1. 정의

- 툴팁으로 텍스트가 아닌 이미지를 나오게 한다

- data-photo 라는 변수를 선언하여 img url를 불러온다

2. 구현

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.min.css"/> <style> </style> </head> <ul id="list"> <li><a href="#" data-photo="img1">Flower</a></li> <li><a href="#" data-photo="img2">Light</a></li> </ul> <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(){ $('#list').tooltip({ items:'[data-photo]', content:function(){ var photo = $(this).data('photo'); return '<img src="'+photo+'.jpg"/>'; } }); }); </script>

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

[jQueryUI] 자동완성기능 - autoComplete (0)	2017.01.31
[jQueryUI] 간편 다단계 메뉴 구현 (0)	2017.01.25
[jQueryUI] 간편한 툴팁구현 (0)	2017.01.25
[jQueryUI] AJAX를 이용한 비동기적 대화상자 (0)	2017.01.23
[jQueyUI] 간단한 대화상자 구현 (0)	2017.01.19

리딩리드

,

[jQueryUI] 간편한 툴팁구현

Front-End/jQueryUI 2017. 1. 25. 13:42

간편한 툴팁구현

1. 정의

- 툴팁에 표시할 텍스트는 title 속성을 사용한다

- 이용할 수 있는 요소는 정해진 건 없다

2. 구문

$(대상요소).tooltip({매개변수:값,..})

1) 매개변수

매개변수	개요	기본값
items	툴팁을 적용할 요소/속성	[title]
content	툴팁의 내용, 텍스트를 반환	title속성의 값을 반환하는 함수
show	툴팁의 표시할 때 에니메이션
hide	툴팁을 감출 떄 애니메이션
tooltipClass	툴팁의 스타일 클래스
position	툴팁의 표시 위치	{my : "left top+15", at:"left bottom", collistion:
track	툴팁이 마우스의 움직임에 따라 갈지	false

3. 구현

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.min.css"/> <style> span[title]{ text-decoration: underline; cursor:pointer; } </style> </head> <div id="desc"> <p>Hello, <span title="Morning greet">Good morning</span></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(){ $(document).tooltip(); }); </script>

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

[jQueryUI] 간편 다단계 메뉴 구현 (0)	2017.01.25
[jQueryUI] 툴팁으로 이미지 나오게 하기 (0)	2017.01.25
[jQueryUI] AJAX를 이용한 비동기적 대화상자 (0)	2017.01.23
[jQueyUI] 간단한 대화상자 구현 (0)	2017.01.19
[jQueryUI] 간단한 탭 패널 구현 (0)	2017.01.19

리딩리드

,

[jQueryUI] AJAX를 이용한 비동기적 대화상자

Front-End/jQueryUI 2017. 1. 23. 19:36

AJAX를 이용한 비동기적 대화상자

- $.get()을 이용하여 비동기적으로 대화상자의 내용을 변경 한다

1. 구현

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Dialog</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.min.css"/> </head> <input class="open" data-path="dl" type="button" value="down"/> <input class="open" data-path="quest" type="button" value="flyer"/> <input class="open" data-path="help" type="button" value="question"/> <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(){ $('.open').click(function(){ var target = $(this); $.get(target.data('path')+'.html').done(function(data){ $('<div></div>').attr('title',target.val()).html(data).dialog({ width:500, height:400, modal:true }); }); }) ; }); </script>

- data-path를 이용하여 특정 파일의 html 을 호출 한다

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

[jQueryUI] 툴팁으로 이미지 나오게 하기 (0)	2017.01.25
[jQueryUI] 간편한 툴팁구현 (0)	2017.01.25
[jQueyUI] 간단한 대화상자 구현 (0)	2017.01.19
[jQueryUI] 간단한 탭 패널 구현 (0)	2017.01.19
[jQueryUI] 간단한 아코디언 패널 구현 (0)	2017.01.19

리딩리드

,

[jQueyUI] 간단한 대화상자 구현

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

간단한 대화상자 구현

1. 마크업 규칙

- 전체 요소 : <div>

2. 구문

- $(상자).dialog({매개변수:값..});

1) 매개변수

매개변수	개요	기본값
autoOpen	실행 시 대화상자 자동으로 연다	true
closeText	[닫기] 버튼	close
modal	모달 대화상자로 할지	false
position	대화상자 위치 표시
height	대화상자크기	auto
width	대화상자폭	300
resizable	대화상자 크기조절	true
buttons	버튼
closeOnEscape	esc로 닫을지	true
hide	닫을 때 에니메이션
show	열 떄 에니메이션

2) modal : true

- 대화상자가 열렸을시 다른 조작을 할 수 있는지 없는지 여부

3. 구현

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Dialog</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.min.css"/> </head> <button id="d1">donwload</button> <div id="dialog"> <p>You can download the sample</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, autoOpen:false, modal:true, buttons:{ 'down':function(){ location.href=''; }, 'close':function(){ $(this).dialog('close'); } } }) ; }); $('#d1').click(function(){ $('#dialog').dialog('open'); }); </script>

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

[jQueryUI] 간편한 툴팁구현 (0)	2017.01.25
[jQueryUI] AJAX를 이용한 비동기적 대화상자 (0)	2017.01.23
[jQueryUI] 간단한 탭 패널 구현 (0)	2017.01.19
[jQueryUI] 간단한 아코디언 패널 구현 (0)	2017.01.19
[jQueryUI] 위젯의 열고닫는 시각적효과 - hide, show, animate (0)	2017.01.18

리딩리드

,

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

[jQueryUI] 툴팁으로 이미지 나오게 하기

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

[jQueryUI] 간편한 툴팁구현

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

[jQueryUI] AJAX를 이용한 비동기적 대화상자

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

[jQueyUI] 간단한 대화상자 구현

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

공지사항

카테고리

태그목록

글 보관함

달력

링크

리딩리드

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바

« 2025/01 »
일	월	화	수	목	금	토
			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	31