반응형 전체 글149 [jQuery 모바일] 여러가지 다양한 항목들 모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다. jQuery Mobile에서 표현할 수 있는 여러가지 다양한 항목들을 표시해 보자. 결과 화면을 보고 나서 위에 있는 항목에서 부터 아래로 하나씩 확인해 본다. 상단을 보면 좌측에 뒤로가기 버튼과 우측에 확인 버튼이 있고 그 아래에 메뉴1, 메뉴2, 메뉴3을 표시하고 있는 내비게이션바가 있다. 아래와 같이 여러가지 항목들 뒤로 확인 메뉴 1 메뉴 2 메뉴 3 성별: 남 여 이름: 메모: 플립 스위치: Off On 범위슬라이더: 범위슬라이더: 슬라이더: 메뉴 4 메뉴 5 메뉴 6 주한길 jQuery Mobile에서 알아둘 속성 data-role="page | header | conten.. ■ Data Skill ■/jQuery Mobile 2023. 2. 11. [jQuery 모바일] 접을 수 있는 콘텐츠와 아코디언 모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다. 이번에는 접을 수 있는 콘텐츠와 아코디언을 만들어 보자. 접을 수 있는 콘텐츠는 div 태그의 data-role 속성에 collapsible 값을 주면 된다. 그리고 div 태그 안에 제목을 나타내기 위한 , , ...... 와 같은 태그와 설명을 나타내는 태그를 구성하면 된다. jQuery Mobile jQuery Mobile는 모바일 웹 사이트와 모든 스마트 폰, ...(중략)...계된 HTML5 기반 프레임워크입니다. 그리고 data-collapsed 속성에 false 값을 주면 처음 표시할 때 펼쳐서 보인다. 접을 수 있는 콘텐츠를 구성하는 것을 알고 있으면 아코디언을 만드는 .. ■ Data Skill ■/jQuery Mobile 2023. 2. 11. [jQuery 모바일] 화면을 구성하는 다양한 입력항목 모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다. 이번에는 화면을 구성하는 다양한 입력항목을 jQuery Mobile의 화면과 리스트뷰에 추가해 보자. 타이틀과 개요설명을 표시하기 위해 div 태그에 ui-body, ui-body-a으로 class 속성을 정의한다. jQuery Mobile jQuery Mobile는 모바일 웹 사이트와 모든 스마트 폰, 태블릿 및 ...(중략)...프레임워크입니다. div 태그 data-role속성에 collapsible 값을 설정하면 접고 펼 수 있는 설명항목을 구성할 수 있다. jQuery Mobile jQuery Mobile는 모바일 웹 사이트와 모든 스마트 폰, 태블릿 및 ...(중략)...프.. ■ Data Skill ■/jQuery Mobile 2023. 2. 11. [jQuery 모바일] 검색 리스트뷰의 놀라운 기능 모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다. 이번에는 jQuery Mobile의 리스트뷰에 검색기능을 추가해 보자. 리스트뷰를 구성하기 위한 ul 태그에 속성을 추가하는 것으로 훌륭한 검색항목과 기능이 생성된다. ul 태그에 data-filter 속성에 값을 true로 설정하고 data-filter-placeholder 속성에 검색어 입력 전에 표시될 문자열을 입력한다. 아래는 전체 코드이다. 검색 리스트뷰 jQuery 1 Now jQuery Mobile jQuery Mobile는 모바일 웹 사이트와 모든 스마트 폰, 태블릿 및 데스크탑 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크입니다. Good MEAN .. ■ Data Skill ■/jQuery Mobile 2023. 2. 11. [jQuery 모바일] 리스트뷰에 다양한 정보를 표현해보자 모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다. jQuery Mobile의 리스트뷰에 대해 좀 더 알아보자. ul 태그에 data-role속성 값을 listview로 설정하고 ul 태그 안에 li 태그를 구성하면 리스트뷰가 생성된다. ul 태그에 data-split-icon 속성에 값을 설정하고 li 태그 항목에 태그를 하나 더 추가하면 하나의 줄에서 각각 클릭 가능한 영역으로 분리된다. jQuery Mobile- MongoDB- AngularJS- Express- Node.js- 리스트뷰 항목으로 li 태그 구성시 태그 안에 , 태그를 입력하면 제목과 설명으로 구분하여 표시할 수 있다. jQuery Mobile jQuery Mob.. ■ Data Skill ■/jQuery Mobile 2023. 2. 11. [jQuery 모바일] 리스트뷰 기본을 익혀보자 모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다. 이번에는 jQuery Mobile의 리스트뷰의 기본에 대해서 몇가지 알아보자. ul 태그에 data-role속성 값을 listview로 설정하고 ul 태그 안에 li 태그를 구성하면 리스트뷰가 생성된다. HTML5 jQuery Mobile AngularJS Express MongoDB Node.js ul 태그에 대신에 ol 태그를 사용하면 번호가 붙은 리스트뷰가 표시된다. jQuery Mobile MongoDB AngularJS Express Node.js 리스트뷰 항목인 li 태그 값을 태그로 감싸면 클릭 가능한 항목으로 표시된다. jQuery Mobile MongoDB Angula.. ■ Data Skill ■/jQuery Mobile 2023. 2. 11. [jQuery 모바일] 네비게이션바와 툴바를 페이지에 달아보자 모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크탑 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다. 이번에는 jQuery Mobile의 네비게이션바와 툴바를 페이지에 추가해 보자. jQuery Mobile에서는 간단한 코드만으로 Header와 Footer에 네비게이션바와 툴바를 쉽게 생성할 수 있다. div 태그를 data-role 속성에 navbar 값을 설정하고 ul 태그에 li 항목으로 메뉴를 구성한다. Home Back Forward Refresh Search 위의 방법으로 첫페이지에서는 Header와 Footer에 네이게이션바를 구성했다. 두번째 페이지에서는 header 태그 안에 두개의 링그를 구성했다. Back 버튼은 좌측에 Home 버튼은 우측에 표시된다. 네이게이션바.. ■ Data Skill ■/jQuery Mobile 2023. 2. 11. [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.. ■ Data Skill ■/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로 설정하면 되고 .. ■ Data Skill ■/jQuery Mobile 2023. 2. 11. [jQuery 모바일] 다이얼로그 화면으로 팝업 모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다. 첫 페이지에서 다음 페이지 이동시 다이얼로그 화면으로 팝업 하는 예제다. 첫 번째 페이지에서 ■ Data Skill ■/jQuery Mobile 2023. 2. 11. [jQuery 모바일] 다양한 전환효과를 주며 페이지를 이동 모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다. 4개의 페이지를 만들고 페이지 이동시 전환하는 효과를 적용하는 예제이다. footer에 data-position 속성값을 fixed로 주어 하단에 고정하였다. 먼저 data-role을 page로 정의한 section 4개를 만든다. 첫번째 페이지에서 ■ Data Skill ■/jQuery Mobile 2023. 2. 11. [jQuery 모바일] 페이지를 추가하고 페이지를 이동해 보자 모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다. 두 개의 페이지를 만들고 첫 번째 페이지에서 두 번째 페이지로 전환하는 예제이다. 태그 대신 section과 header와 footer를 사용하였다. 개인적으로 블랙색상이 마음에 들어 테마 "b"로 설정하였다. 먼저 data-role을 page로 정의한 section 2개를 만든다. 첫 번째 페이지에서 두번째 페이지로 이동 아래는 전체 코드이다. 페이지 이동 1 첫번째 페이지 두번째 페이지로 이동 주한길 페이지 이동 2 두번째 페이지 첫번째 페이지로 이동 주한길 결과화면 위의 화면에서 링크를 클릭하면 아래의 페이지가 표시된다. jQuery Mobile에서 알아둘 속성 data-role.. ■ Data Skill ■/jQuery Mobile 2023. 2. 11. 이전 1 ··· 9 10 11 12 13 다음 728x90