이번에는 datepicker를 이용하여 INPUT 태그에 연월일을 넣어보도록 하겠음
우선 text태그를 하나 넣어주고 직접 입력을 불가능하게 막아보도록 하자
readonly="readonly" 옵션을 주어서!! ㅎ
HTML코드
<input id="dateText" type="text" readonly="readonly" />
스크립트코드
$(function(){ $( "#dateText" ).datepicker({ //달력에 일자 선택시 text태그에 들어갈 연월일 포맷 dateFormat: 'yy-mm-dd', // changeYear, changeMonth 을 true로 주면 연/월 부분을 // selectbox로 날짜 이동가능 changeYear: true, changeMonth: true }); })
연월 selectbox를 만들기 싫으면 changeYear, changeMonth 옵션을 빼버리자~
기본적으로는
$( "#dateText" ).datepicker({});
이런식으로만 줘도 잘 나옴..
실행화면
1. 초기화면
2. text태그 클릭화면
3. datepicker selectbox 선택
4. 지정하면 달력변경
5. 일자 클릭후 화면
참 간단하다 ㅋㅋㅋ
모달창을 띄우고 싶다면 jQueryUI의 DIALOG 함수를 이용해보자 (0) | 2014.06.20 |
---|---|
jQueryUI에서 제공하는 Accordion을 이용해보자 (0) | 2014.06.20 |
jQueryUI를 이용하여 자동완성 구현하기(2) - Ajax 비동기통신 (7) | 2014.06.19 |
jQueryUI를 이용하여 자동완성기능을 제작해보자 - (1) (0) | 2014.06.19 |
jQueryUI 시작하기 - 다운로드부터 버튼출력까지 (0) | 2014.06.19 |
이번장의 설명은 json object롤 autocomplete를 만들어 보도록 하겠다
json-simple 다운로드 (json-simple-1.1.1.jar 기준)
이전 포스팅과는 별 다른거 바뀌는건 없고
서버용 테스트 파일 1개추가와 autocomplete.html에서
$( "#autocompleteText" ).autocomplete({}) << 이놈만 변경해보겠다.
우선 autocomplete.html 페이지에 autocomplete 소스만 수정해보자
스크립트코드
$(function(){ $( "#autocompleteText" ).autocomplete({ source : function( request, response ) { //많이 봤죠? jquery Ajax로 비동기 통신한 후 //json객체를 서버에서 내려받아서 리스트 뽑는 작업 $.ajax({ //호출할 URL url: "search.jsp", //우선 jsontype json으로 dataType: "json", // parameter 값이다. 여러개를 줄수도 있다. data: { //request.term >> 이거 자체가 text박스내에 입력된 값이다. searchValue: request.term }, success: function( result ) { //return 된놈을 response() 함수내에 다음과 같이 정의해서 뽑아온다. response( $.map( result, function( item ) { return { //label : 화면에 보여지는 텍스트 //value : 실제 text태그에 들어갈 값 //본인은 둘다 똑같이 줬음 //화면에 보여지는 text가 즉, value가 되기때문 label: item.data, value: item.data } }) ); } }); }, //최소 몇자 이상되면 통신을 시작하겠다라는 옵션 minLength: 2, //자동완성 목록에서 특정 값 선택시 처리하는 동작 구현 //구현없으면 단순 text태그내에 값이 들어간다. select: function( event, ui ) {} }); })
좀 길어졌지만 실질적으로 우리가 아는 $.ajax를 이용한것이다. 주석도 많이 달았고...
그럼 서버처리 부분을 보도록 하자 해당 소스를 php / jsp / spring framework 등등
응용해서 변경하면 될거 같다.
search.jsp 코드
String searchValue = request.getParameter("searchValue"); JSONArray arrayObj=new JSONArray(); JSONObject jsonObj = null; //////////// 임의의 데이터(db라 가정하자) //////////// ArrayList<String> dblist = new ArrayList<String>(); ArrayList<String> resultlist = new ArrayList<String>(); dblist.add("Afghanistan"); dblist.add("Albania"); dblist.add("Algeria"); dblist.add("American"); dblist.add("Samoa"); dblist.add("Andorra"); for(String str : dblist) { if(str.toLowerCase().startsWith(searchValue)) { resultlist.add(str); } } ///////////resultlist를 db에서 조회후 뽑아온 list라고 가정한다./////////// //뽑은 후 json파싱 for(String str : resultlist) { jsonObj = new JSONObject(); jsonObj.put("data", str); arrayObj.add(jsonObj); } PrintWriter pw = response.getWriter(); pw.print(arrayObj); pw.flush(); pw.close();
은근히 길어 보이지만 db라 가정한 arraylist 객체때문에 약간 소스가 길어진거임.
db연동을 하면 해당 담는 부분은 지워서 db호출을 하면 될것임.
모달창을 띄우고 싶다면 jQueryUI의 DIALOG 함수를 이용해보자 (0) | 2014.06.20 |
---|---|
jQueryUI에서 제공하는 Accordion을 이용해보자 (0) | 2014.06.20 |
jQueryUI에서 지원하는 달력 컴포넌트를 이용하여 TEXT태그에 값넣어보기 (0) | 2014.06.19 |
jQueryUI를 이용하여 자동완성기능을 제작해보자 - (1) (0) | 2014.06.19 |
jQueryUI 시작하기 - 다운로드부터 버튼출력까지 (0) | 2014.06.19 |
네이버,다음,구글등에서 검색키워드시 사용하는 기능인대 네이버처럼은 아니여도
심플하게 한번 만들어보자
처음에 button ui를 만들었을때 js와 css폴더만을 가지고 구현해보자
해당페이지를 먼저 보시는 분은 다음 링크에서 jqueryUI include하고난후 진행하자
html 파일명은 autocomplete.html이라고 했음
html코드
<input id="autocompleteText" type="text" />
스크립트코드
$(function(){ $( "#autocompleteText" ).autocomplete({ source: [ "개발로짜", "roqkffhwk", "tistory", "gksql", "안녕하세요" ] }); })
이번장은 단순하게 스크립트내에 배열형식으로 하여 출력해 보았으나 다음장에는 ajax를 이용하여
비동기방식으로 자동완성을 구현해보도록 하겠다
실행결과
모달창을 띄우고 싶다면 jQueryUI의 DIALOG 함수를 이용해보자 (0) | 2014.06.20 |
---|---|
jQueryUI에서 제공하는 Accordion을 이용해보자 (0) | 2014.06.20 |
jQueryUI에서 지원하는 달력 컴포넌트를 이용하여 TEXT태그에 값넣어보기 (0) | 2014.06.19 |
jQueryUI를 이용하여 자동완성 구현하기(2) - Ajax 비동기통신 (7) | 2014.06.19 |
jQueryUI 시작하기 - 다운로드부터 버튼출력까지 (0) | 2014.06.19 |
jQuery로 스크립트 및 화면제어가 가능하지만 ..
추가로 UI를 이용하고 싶다면 jQueryUI를 이용해서 개발에 이용하면 좋을 것 같다
우선은 사이트에 가서 다운로드를 받아봅시다.
위 화면과 같이 나오는데 다운로드 받고자 하는 version 체크를 해주고 아래로
스크롤을 쭉~ 내린다 .
그럼 다음화면처럼 테마 지정하고 다운로드 하는 버튼이 보이는데
만약 테마를 선택하긴 하겠는데 미리 해당 테마의 종류를 보고 싶다고 하시면
다운로드 받은 압축파일을 해제 하면 몇가지폴더와 index.html이 나오는데
실직적으로 필요한 것은 css/js폴더이다.
development-bundle -> demos 폴더내에 샘플 소스들이 아주 잘 나와있다.
그리고 추가적으로 로컬에서 볼수있는 api문서도 파일로 있음!
하지만, jQuery플러그인 소개인것처럼 demo 소스들을 기반으로 더욱 심플하게
샘플링을 해보고자 한다.
이번장에서는 BUTTON UI를 띄워보도록 하겠다.
우선은 압축푼 CSS/JS폴더를 프로젝트내에 넣어두자
본인은 위 폴더들을 jqueryui라는 폴더생성하여 그 안에 넣어두었다.
현재까지 나온버전은 어짜피 jquery 1.6이상 이므로 자체적으로 jQueryUI내에
존재하는 jquery 버전을 사용해도 무관함
cdn으로 include해도 상관없지만 자체적으로 jquery 1.10을 넣어줬으므로
1.10버전으로 사용하도록 하겠음.
자~ css1개와 js파일 2개를 html 페이지에 include를 해보자
<link href="/jqueryui/css/start/jquery-ui-1.10.4.custom.css" rel="stylesheet"> <script src="/jqueryui/js/jquery-1.10.2.js" type="text/javascript"></script> <script src="/jqueryui/js/jquery-ui-1.10.4.custom.js" type="text/javascript"></script>
샘플링에서 버튼태그를 생성할때 <button> 태그를 이용하였으나,
본인은 <input type="button"/> 태그를 이용하였음
결과는 똑같더라...
html 코드
<input type="button" id="button" value="버튼샘플" />
스크립트 코드
$(function(){ $("#button").button(); })
html자체적으로 버튼 태그 생성후 onload할때 .button() 함수를
호출해주면 버튼에 UI가 입혀진다.
함수 호출전 화면
함수 호출후 화면
오 UI적으로도 깔끔해지고 사이즈도 더 커졌다!! +_+ ㅋ
앞으로 jQueryUI에서 제공하는 몇가지를 소개해보도록 하겠음
모달창을 띄우고 싶다면 jQueryUI의 DIALOG 함수를 이용해보자 (0) | 2014.06.20 |
---|---|
jQueryUI에서 제공하는 Accordion을 이용해보자 (0) | 2014.06.20 |
jQueryUI에서 지원하는 달력 컴포넌트를 이용하여 TEXT태그에 값넣어보기 (0) | 2014.06.19 |
jQueryUI를 이용하여 자동완성 구현하기(2) - Ajax 비동기통신 (7) | 2014.06.19 |
jQueryUI를 이용하여 자동완성기능을 제작해보자 - (1) (0) | 2014.06.19 |