■ Front-End ■/jQuery Mobile18

• 

  [jQuery 모바일] 버튼을 그룹으로 묶어보자 모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크탑 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다. 이번에는 jQuery Mobile의 버튼을 그룹으로 묶는 것에 대해 알아보자. 논리적으로 동일한 성격의 버튼을 아래의 태그로 감싸면 쉽게 그룹으로 묶을 수 있다. 그룹으로 묶을 때 기본은 수직으로 버튼이 배열되지만 data-type 속성을 horizontal로 하면 수평으로 버튼을 배열한다. 마지막에 있는 버튼 그룹에는 data-theme를 b로 적용해 보았다. 다양한 버튼(그룹) Yes No Cancel Yes No Cancel Yes No Cancel Yes No Cancel Yes No Cancel 주한길 결과화면 jQuery Mobile에서 알아둘 속성 data-role="pa.. ■ Front-End ■/jQuery Mobile 2023. 2. 11.

• 

  [jQuery 모바일] 다양한 모양의 버튼을 만들어보자 모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크탑 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다. jQuery Mobile의 버튼에 대해서 알아보는 예제다. jQuery Mobile에서 버튼을 표현하는 방법은 아래와 같이 3가지가 있다. 첫번째는 처럼 input 태그에 button 타입으로 지정한다. 두번째는 태그로 지정하는 방법이 있다. 마지막으로 태그에 data-role 속성 값을 button 으로 지정한다. 버튼 1-1, 버튼 1-2, 버튼 1-3 이 설명한 순서대로 되어 있다. 기본적인 버튼의 모양은 모서리가 라운드 처리가 되어 있고 입체적 느낌을 주기위한 그림자가 있다. 그 속성을 제거하기 위해서는 모서리 라운드 처리는 data-corners를 false로 설정하면 되고 .. ■ Front-End ■/jQuery Mobile 2023. 2. 11.

• 

  [jQuery 모바일] 다이얼로그 화면으로 팝업 모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다. 첫 페이지에서 다음 페이지 이동시 다이얼로그 화면으로 팝업 하는 예제다. 첫 번째 페이지에서 ■ Front-End ■/jQuery Mobile 2023. 2. 11.

• 

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