HTML5 14

Javascript - jQuery Mobile 유틸리티

1. $.mobile.changePage() 메소드 2. $.mobile.loadPage() 메소드 3. $.mobile.loading() 메소드 19-01.html DOCTYPE html> 19-01 $(document).on('mobileinit', function() { $.mobile.loader.prototype.options.theme = "a"; $.mobile.loader.prototype.options.text = "loading"; $.mobile.loader.prototype.options.textonly = false; $.mobile.loader.prototype.options.textVisible = false; }); $(document).on('pagecreate', func..

Javascript - jQuery Mobile 이벤트

1. mobileinit 이벤트 위와 같이 중간에 넣어야 한다. 2. 기본 환경 설정 3. 페이지 초기화 이벤트 (pagebeforecreate, pagecreate, pageinit) 4. 페이지 변경 이벤트 (pagebeforechange, page change, pagechangefailed) 5. 페이지 전환 이벤트 (pagebeforeshow, pagebeforehide, pageshow, pagehide) 6. 페이지 로드 이벤트(pagebeforeload, pageload, pageloadfailed) 7. tap, taphold 이벤트 8. swipe, swipeleft, swiperight 이벤트 9. orientationchange 이벤트 18-01.html DOCTYPE html> 1..

Javascript - jQuery Mobile 컴포넌트 - 컨텐트 서식 적용, 테마롤러 사용법

1. 레이아웃 그리드 ui-block-a 클래스가 가장 맨 앞임 2. 콜렙서블 컨텐트 블록 3. 콜렙서블 셋(아코디언) 4. 테마롤러 디자인하기 테마롤러 사용법 http://themoeroller.jquerymobile.com으로 접속한뒤 사용하는 jquery 버젼을 설정해준다. 테마롤러를 이용하면 사용자 정의 css파일을 얻을 수 있다. 위의 팔레트에서 드래그앤 드롭으로 아래와같이 커스터마이징 테마를 쉽게 만들 수 있다. 다운로드 버튼을 누르면 다음과 같이 나와서 테마 이름을 쓰고 를 추가해서 써야된다고 써있다. 다운받은 파일을 풀어보면 다음과 같이 나온다. themes폴더를 카피해서 앱타나 스튜디오 프로젝트에 넣는다. 여기서 프로젝트.html파일에 첫번째는 자기가 만든 테마.css파일을 넣고 두번째는..

Javascript - jQuery Mobile 컴포넌트 - 폼

1. 필드 컨테이너 텍스트 입력 필드 그에 맞는 소프트 키보드가 나오게 설계되어있음 2. 슬라이더 3. 플립 토글 스위치 4. 라디오 버튼 5. 체크박스 버튼 6. 셀렉트 메뉴 1. 네이티브 옵션 메뉴 2. data-native-menu 옵션이 false 3. 여러개 선택하면 선택된 갯수가 나옴 16-01.html DOCTYPE html> 16-01 폼 요소 텍스트 입력 필드 슬라이더 플립 토글 스위치 라디오 버튼 체크박스 버튼 셀렉트 메뉴 © 2014 T academy 출력 화면 16-02.html DOCTYPE html> 16-02 텍스트 입력 필드 Home 이름 패스워드 이메일 전화 나이 URL 검색 내용 © 2014 T academy 출력 화면 16-03.html DOCTYPE html> 16-0..

Javascript - jQuery Mobile 컴포넌트 - 리스트뷰

1. 리스트뷰 li 는 리스트 ul unordered 리스트 ol은 ordered 리스트 2. 스플릿 버튼 리스트 3. 리스트 디바이더 4. 카운트 버블 5. 썸네일 리스트 6. 아이콘 리스트 7. 컨텐트 형식 적용하기 8. 인셋 스타일 9. 검색 필터 적용 리스트 15-01.html DOCTYPE html> 15-01 리스트 뷰 연결된 리스트 일련번호를 가진 리스트 중첩 리스트 스플릿 버튼 리스트 리스트 디바이더 카운트 버블 썸네일 리스트 아이콘 리스트 리스트 형식 적용 인셋 스타일 검색 필터 적용 © 2014 T academy 출력 화면 15-02.html DOCTYPE html> 15-02 연결된 리스트 Home item #1 item #2 item #3 item #4 item #5 © 2014 T..

Javascript - jQuery Mobile 컴포넌트 - 페이지, 버튼, 툴바

1. 단일 페이지와 다중 페이지에서 페이지 전환 14-01.html DOCTYPE html> 14-01 첫 번째 페이지 헤더 첫 번째 페이지 내용 두 번째 (내부)페이지 전환 세 번째 (외부)페이지 전환 첫 번째 페이지 풋터 두 번째 페이지 헤더 두 번째 (내부)페이지 내용 두 번째 페이지 풋터 14-02.html DOCTYPE html> 14-02 이 내용은 jQuery Mobile에 의해 DOM에 추가되지 않습니다. 세 번째 (외부)페이지 헤더 세 번째 (외부)페이지 내용 세번째 (외부)페이지 풋터 출력 화면 2. 페이지 전환 애니메이션 14-03.html DOCTYPE html> 14-03 첫 번째 페이지 헤더 첫 번째 페이지 내용 두 번째 페이지 전환 첫 번째 페이지 풋터 두 번째 페이지 헤더 두..

Javascript - jQuery 기본 효과, 페이딩, 슬라이딩

1. 기본 효과 13-01.html DOCTYPE html> 13-01 div.card { background:#ece023; width:30px; height:40px; margin:2px; float:left; line-height: 2; text-align: center; font-weight: bold; display: none; } $(document).ready(function() { $("#show").click(function () { $("div.card").first().show("fast", function showCard() { $(this).next("div.card").show("fast", showCard);//재귀호출함 //this는 first요소임 처음에 }); }); $(..

HTML - CSS에서 주석은 <!-- -->가 아닌 /* */이다

css 파일의 내용이 많아지면 이를 관리하기 위해서 주석을 활용하면 좋습니다. 주석은 소스상에서만 표시될뿐 실제적으로는 아무 영향을 미치지 않는 코드입니다. css의 주석은 /*로 시작하여 */로 끝납니다. 이 문단의 id는 red입니다. 일반적인 문단입니다. CSS 구문이 간단할때는 주석이 크게 필요하지 않지만 홈페이지의 모든 문서에 연결된 외부 CSS파일의 경우 CSS 구문이 아주 복잡합니다. 이때 주석을 적절하게 사용한다면 CSS 문서의 관리가 편해집니다. 출처 : http://www.homejjang.com/07/comment.php

Node.js - POST 요청 Node.js에서 처리 방법

POST request에서 데이터를 읽는 것은 Node.js에서 약간 복잡합니다. 첫 번째 단계로 들어오는 data를 listen을 합니다. 여기서 한가지 트릭은 data가 끝날 때까지 기다려야 하는 것입니다. 그래야 데이터를 잃지 않고 처리할 수 있기 때문입니다. 다음은 예제 샘플입니다. 예제 소스. var http = require('http'); var postHTML = '' + '' + '' + 'Input 1: ' + 'Input 2: ' + '' + '' + ''; http.createServer(function (req, res) { var body = ""; req.on('data', function (chunk) { body += chunk; }); req.on('end', functi..

반응형