html55 html5 : 자동 업데이트 필드 구현하기 (keyup 이벤트) 자동 업데이트 필드 구현하는 방법은 간단하다.input 태그에 keyup 이벤트를 사용하면 된다. 그리고 변환하고자 하는 값의 공식을 알고 있으면 된다.예제는 평형을 제곱미터로 변환하는 프로그램이다. [결과화면] [소스] 평 = m2 2015. 1. 8. html5 : select box 값으로 검색하기 (data table 플러그인) 앞서 포스팅한 data table 플러그인을 사용한 테이블에 검색기능을 추가한다. select 박스에 특정열의 데이터를 유니크하게 뽑아 노출시키고,select 박스를 선택하면 해당하는 값이 있는 데이터만 검색되도록 한다.멀티선택을 지원한다. [결과화면] [소스] no지역이름위도경도교통편 [selectSearchTable.js] (function() { // 사용자 정의 정렬 설정하기 $.extend($.fn.dataTableExt.oSort, { "lastname-sort-pre": function (a) { return a.split(' ').reverse().join(' '); }, "lastname-sort-asc": function(a, b) { return a b ? .. 2015. 1. 7. html5 : 클라이언트에서 테이블 정렬하기 (data table 플러그인) 브라우저에서 간단히 사용할 수 있는 정렬되는 테이블 사용방법이다. jquery에서 제공하는 데이터 테이블 플러그인을 사용하면 아주 간단하다. 단 2줄의 import로 css와 테이블정렬기능이 가능해진다. [결과화면] [소스] no지역이름위도경도교통편 [js] (function() { // 사용자 정의 정렬 설정하기 $.extend($.fn.dataTableExt.oSort, { "lastname-sort-pre": function (a) { return a.split(' ').reverse().join(' '); }, "lastname-sort-asc": function(a, b) { return a b ? 1 : 0; }, "lastname-sort-desc": functio.. 2015. 1. 6. html5 : 끝이없는 스크롤 표현하기 sns나 카페앱에서 자주 볼 수 있는 한없는 스크롤 리스트를 만들어 보자. [결과화면] 처음 로딩시 오른쪽 스크롤을 보면 컨텐츠가 길어보이지 않는다. 스크롤을 아래로 내리는 것만으로 총 10개의 이미지를 보고 끝이난다. 스크롤이 상당히 아래로 내려왔음을 볼 수 있다. [소스] [js] (function() { // Our page getter calls the callback with a null error // argument and a simple string as content, but it can also // be an Ajax request. var page = 0; /* TODO : 아작스로 페이징처리하기 샘플코드 function getPage(cb) { $.get('/pages/' + pa.. 2015. 1. 5. html5 : 동적으로 시간 표시하기 (timeago 플러그인) 2분전에 댓글이 등록되었습니다. 이 웹페이지에 접속한지 10분이 경과되었습니다.등.. 동적으로 시간을 표시하는 방법을 알아본다. jquery의 timeago라는 플러그인을 사용하면 쉽다. [결과화면] [소스] abbr태그 이용 : 페이지 오픈한지 : time태그 이용 : [jquery.timeago.js] /** * Timeago is a jQuery plugin that makes it easy to support automatically * updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago"). * * @name timeago * @version 0.11.4 * @requires jQuery v1.2.3+ * @author Rya.. 2015. 1. 4. 이전 1 다음 728x90
