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

[jQueryUI] 자동완성 후보목록의 정보 페이지 반영 - autocomplete(select)

Front-End/jQueryUI 2017. 1. 31. 18:04

자동완성 후보목록의 정보 페이지 반영 - autocomplete(select)

1. 정의

- 후보목록의 변수 중 details의 정보를 선택하면 페이지에 반영되도록 한다

2. 구문

$('#keywd').autocomplete({ source : data, select : function(e, ui){ if(ui.item){ $('#details').html(ui.item.details); } }, minLength:2 });

- select 매개변수에 후보 목록이 선택 되었을 시 이벤트 리스너 지정

1) 인수 ui

- jQueryUI의 모든 위젯은 이벤트 리스너의 인수로 객체 e, ui를 받는다

- e : 이벤트 객체

- ui : jQueryUI의 고유 객체

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" /> <style> </style> </head> <form> <label for="keywd">Key</label> <input id="keywd" type="search" size="20" maxlength="40"/> </form> <span id="details"></span> <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() { var data=[ {label:'accelerando', details:'빠르게'}, {label:'acent', details:'강하게'}, {label:'adagio',details:'느리게'}, {label:'best',details:'최고'}, {label:'bee',details:'벌'}, {label:'bird',details:'새'} ]; $('#keywd').autocomplete({ source : data, select : function(e, ui){ if(ui.item){ $('#details').html(ui.item.details); } }, minLength:2 }); }); </script>

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

[jQueryUI] 간편한 날짜 선택 팝업의 형식 변경 - datepicker(format) (0)	2017.02.02
[jQueryUI] 간편한 날짜 선택 팝업 구현 - datepicker() (0)	2017.02.02
[jQueryUI] 자동완성기능 후보 목록에 조건추가 - autocomplete(source) (0)	2017.01.31
[jQueryUI] 자동완성기능 - autoComplete (0)	2017.01.31
[jQueryUI] 간편 다단계 메뉴 구현 (0)	2017.01.25

리딩리드

,

[jQueryUI] 자동완성기능 후보 목록에 조건추가 - autocomplete(source)

Front-End/jQueryUI 2017. 1. 31. 17:39

자동완성기능 후보 목록에 조건추가 - autocomplete(source)

1. 정의

- 후보 목록중에 특정 한 값만 나오도록 source 매개변수에 콜백함수를 설정한다

2. 구문

$('#keywd').autocomplete({ source : function(request, response){ response( $.grep(data, function(v){ return v.indexOf(request.term) === 0; }) ); }, minLength:2 });

v : 배열 목록에 있는 값

request.term : 검색하는 값

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" /> <style> </style> </head> <form> <label for="keywd">Key</label> <input id="keywd" type="search" size="20" maxlength="40"/> </form> <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() { var data=[ 'accelerando', 'accent', 'adagio', 'best', 'bee', 'bird' ]; $('#keywd').autocomplete({ source : function(request, response){ response( $.grep(data, function(v){ return v.indexOf(request.term) === 0; }) ); }, minLength:2 }); }); </script>

- 결과는 같다.

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

[jQueryUI] 간편한 날짜 선택 팝업 구현 - datepicker() (0)	2017.02.02
[jQueryUI] 자동완성 후보목록의 정보 페이지 반영 - autocomplete(select) (0)	2017.01.31
[jQueryUI] 자동완성기능 - autoComplete (0)	2017.01.31
[jQueryUI] 간편 다단계 메뉴 구현 (0)	2017.01.25
[jQueryUI] 툴팁으로 이미지 나오게 하기 (0)	2017.01.25

리딩리드

,

[jQueryUI] 자동완성기능 - autoComplete

Front-End/jQueryUI 2017. 1. 31. 17:24

자동완성기능 - autoComplete

1. 정의

- 텍스트 상자의 자동완성 기능 구현

2. 구문

$(텍스트).autocomplete({매개변수: 값,..})

1) 매개변수

매개변수	개요	기본값
source	대상(배열, 파일명..)	(필수)
autoFocus	자동 앞부분 포커스	false
delay	키 입력으로 부터 목록 표시	300
minLength	후보 목록을 표시하는 최소 문자수	1
position	목록의 표시	my, at, collision

2) source

label : 후보 목록에 표시하는 텍스트

value : 텍스트 상자에 반영시키는 값

.....

- label, value는 필수이다

- 키가 하나라면

var data=[ 'accelerando', 'accent', 'adagio' ];

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" /> <style> </style> </head> <form> <label for="keywd">Key</label> <input id="keywd" type="search" size="20" maxlength="40"/> </form> <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() { var data=[ {label:'accelerando',details:'빠르게'}, {label:'accent',details:'강하게'}, {label:'adagio',details:'천천히'}, {label:'best',details:'최고'}, {label:'bee',details:'벌'} ]; $('#keywd').autocomplete({ source : data, minLength:2 }); }); </script> </textaera> </span><br /></b></span></p>

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

[jQueryUI] 자동완성 후보목록의 정보 페이지 반영 - autocomplete(select) (0)	2017.01.31
[jQueryUI] 자동완성기능 후보 목록에 조건추가 - autocomplete(source) (0)	2017.01.31
[jQueryUI] 간편 다단계 메뉴 구현 (0)	2017.01.25
[jQueryUI] 툴팁으로 이미지 나오게 하기 (0)	2017.01.25
[jQueryUI] 간편한 툴팁구현 (0)	2017.01.25

리딩리드

,

[jQueryUI] 간편 다단계 메뉴 구현

Front-End/jQueryUI 2017. 1. 25. 14:27

간편 다단계 메뉴 구현

1. 정의

- 메뉴 생성을 위한 마크업 룰

1) 메뉴 자체는 <ul><li>요소에서 나타남

2) 서브 메뉴는 <li>아래 <ul>요소 배치

3) 아이콘은 <li>아래의<span class="ui-icon-아이콘이름">으로 삽입

4) 메뉴 무효화: <li class=ui-state-disabled">

2. 구문

$(요소).menu({매개변수:값,...})

1) 매개변수

매개변수	개요	기본값
icons	서브 메뉴에 붙이는 아이콘	{submenu:"ui-icon-carat-1-e"}
menus	메뉴를 나타내는 컨테이너 요소	ul
position	서브메뉴 표시	my, at

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> .ui-menu { width: 180px; } </style> </head> <ul id="menu"> <li> <a href="top.html"><span class="ui-icon ui-icon-home"></span>꼭대기 페이지</a> </li> <li> <a href="medicine.html">약</a> <ul> <li><a href="common.html">일반</a> <ul> <li><a href="cold.html">감기</a> <ul> <li><a href="fever.html">Fever</a></li> <li><a href="gullet.html">gullet</a></li> <li><a href="cough.html">cough</a></li> </ul> </li> <li><a href="stomach.html">stomach</a> <ul> <li><a href="pain.html">pain</a></li> <li><a href="heavy.html">heavy</a></li> </ul> </li> </ul> </li> </ul> </li> <li class="ui-state-disabled"> <a href="map.html">위치</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(){ $('#menu').menu({ }); }); </script>

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

[jQueryUI] 자동완성기능 후보 목록에 조건추가 - autocomplete(source) (0)	2017.01.31
[jQueryUI] 자동완성기능 - autoComplete (0)	2017.01.31
[jQueryUI] 툴팁으로 이미지 나오게 하기 (0)	2017.01.25
[jQueryUI] 간편한 툴팁구현 (0)	2017.01.25
[jQueryUI] AJAX를 이용한 비동기적 대화상자 (0)	2017.01.23

리딩리드

,

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

[jQueryUI] 자동완성 후보목록의 정보 페이지 반영 - autocomplete(select)

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

[jQueryUI] 자동완성기능 후보 목록에 조건추가 - autocomplete(source)

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

[jQueryUI] 자동완성기능 - autoComplete

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

[jQueryUI] 간편 다단계 메뉴 구현

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

공지사항

카테고리

태그목록

글 보관함

달력

링크

리딩리드

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바

« 2024/05 »
일	월	화	수	목	금	토
			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