반응형 카테고리87 [jQuery 모바일] 다양한 전환효과를 주며 페이지를 이동 모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다. 4개의 페이지를 만들고 페이지 이동시 전환하는 효과를 적용하는 예제이다. footer에 data-position 속성값을 fixed로 주어 하단에 고정하였다. 먼저 data-role을 page로 정의한 section 4개를 만든다. 첫번째 페이지에서 ■ Front-End ■/jQuery Mobile 2023. 2. 11. [jQuery 모바일] 페이지를 추가하고 페이지를 이동해 보자 모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다. 두 개의 페이지를 만들고 첫 번째 페이지에서 두 번째 페이지로 전환하는 예제이다. 태그 대신 section과 header와 footer를 사용하였다. 개인적으로 블랙색상이 마음에 들어 테마 "b"로 설정하였다. 먼저 data-role을 page로 정의한 section 2개를 만든다. 첫 번째 페이지에서 두번째 페이지로 이동 아래는 전체 코드이다. 페이지 이동 1 첫번째 페이지 두번째 페이지로 이동 주한길 페이지 이동 2 두번째 페이지 첫번째 페이지로 이동 주한길 결과화면 위의 화면에서 링크를 클릭하면 아래의 페이지가 표시된다. jQuery Mobile에서 알아둘 속성 data-role.. ■ Front-End ■/jQuery Mobile 2023. 2. 11. [jQuery 모바일] 안녕, 제이쿼리 모바일 (Hello, jQuery Mobile) 모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다. jQuery Mobile을 주제로 Hello World를 시작으로 단계별로 진행해 보려고 한다. HTML과 CSS, JavaScript 그리고 jQuery는 사전에 학습하여 이미 알고 있다고 가정한다. jQuery Mobile 프레임워크를 적용하려면 먼저 HTML 페이지를 작성한다. 그리고 HTML 파일 Header Hello jQuery Mobile Footer 결과화면 div 태그에 data-theme 속성을 주면 테마를 설정할 수 있다. 이전 버전에는 테마가 a, b, c, d, e 다섯 개 있었는데 1.4.5 버전에는 a, b, c 가 정의되어 있다. 아래와 같이 data-ro.. ■ Front-End ■/jQuery Mobile 2023. 2. 11. 이전 1 ··· 5 6 7 8 다음 728x90