가카리의 공부방

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..

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..

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

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..

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..

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 첫 번째 페이지 헤더 첫 번째 페이지 내용 두 번째 페이지 전환 첫 번째 페이지 풋터 두 번째 페이지 헤더 두..

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요소임 처음에 }); }); $(..

1. 셀렉터 1) 별표 : 모든 노드 2) h3 : h3이라는 태그를 찾아라 3) .content : class ‘content’ 를 접근할때 4) #message : id가 message인 노드를 찾아라 5) div, .header, #menu : div태그와 header 클래스와 menu라는 id를 가지고 있는 노드를 찾아서 접근하자 2. 계층 셀렉터 1) div중에 id가 lectures인 자손 li 태그들을 의미(그 자식의 자식들은 자손) 2) div 밑에 자식 p를 의미 (바로 밑을 의미) 3) 아이디가 first인 다음 형제를 의미 (단수) 4) 아이디가 second인 다음 형제들을 의미 (복수) 3. 속성 셀렉터 -대괄호 안에 기술하는게 특징 1) div 태그에 id가 lectures인 li..

1. jQuery와 jQuery Mobile 자바스크립트 개발시 크로스 브라우징 문제 등을 쉽게 해결하는 기법을 jQuery 프레임워크에서 제공함. jQuery 2.x 는 인터넷 익스플로러 6,7,8은 지원을 안함 그래서 jQuery 1.x버젼으로 해봄 다음의 jquery.com과 jquerymobile.com 파일을 다운 받는다. 앱타나 스튜디오로 돌아가서 아래와 같이 js 폴더를 만들고 jquery.mobile-1.4.5.css 파일 jquery.mobile-1.4.5.js 파일 jquery-1.11.2.js 를 놓는다. 그리고 코드로 돌아가서 아래 link와 script 소스를 추가해준다. DOCTYPE html> 08-01 //우리 코드는 여기에 그리고 jquery 코드를 쉽게 짜기위한 앱타나 스..

실습 2: 가위 바위 보 게임 만들기 프로젝트명 : exercise02 파일명: index.html, rockscissorspaper.js (외부 스크립트) 요구사항 1. 사용자는 가위, 바위, 보 버튼을 눌러 게임을 진행합니다. 2. index.html은rockscissorspaper.js를 외부 스크립트로 참조합니다. 3. index.html은 game, result의 id를 가진 div 요소를 가집니다. 4. Game의 id를 가진 div 요소는 btnScissors, btnRock, btnPaper의 id를 가진 button 요소를 자식요소로 가집니다. 5. DOM 이벤트는 크로스 브라우징 문제가 있으므로 모든 이벤트와 관련된 함수를 만들 때는 크로스 브라우징 문제를 반드시 해결해야 합니다. 6...