■ Front-End ■/jQuery Mobile18

• 

  [jQuery 모바일] 패널과 리스트 with JSON 모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다. 이번에는 화면 왼쪽에서 편리하게 사용할 수 있는 패널과 JSON 데이터를 읽어 목록에 추가하는 예제는 기본 템플릿에서 부터 만들어 보자. 패널 패널 밖을 누르거나 아래의 버튼을 클릭하세요. ■ Front-End ■/jQuery Mobile 2023. 2. 11.

• 

  [jQuery 모바일] 목록 테이블과 컬럼표시 연동 모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다. 아래는 기능을 선택하기 위한 팝업을 구성하는 태그이다. 기능을 선택하세요 상세 보기 수정 삭제 ​ 테이블 태그에 아래와 같이 속성을 정의하면 컬럼 표시 팝업이 표시됩니다. 아래는 전테 코드이다. 목록 테이블과 기능팝업 기능... 기능을 선택하세요 상세 보기 수정 삭제 순위 영화 제목 년도 평점 1 쇼생크 탈출 1995.01.28 9.44 2 라이언 일병 구하기 1998.09.12 9.41 3 매트릭스 1999.05.15 9.40 4 인생은 아름다워 1999.03.06 9.40 5 타이타닉 1998.02.20 9.39 주한길 처음 로딩 화면 기능 선택 팝업 ​ 컬럼 선택 : 순위, 년도.. ■ Front-End ■/jQuery Mobile 2023. 2. 11.

• 

  [jQuery 모바일] 펼치기,접기와 몇가지팁 바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다. jQuery Mobile에서 펼치기/접기가 가능한 collapsibleset에 대해서 알아보자. 다음과 같은 코드를 입력하면 각각의 표시영역에 대해서 펼치고 접기를 할 수가 있다. 표시영역 1 표시영역 2 표시영역 3 표시영역 첫번째를 보면 내용을 리스트뷰로 표시한 메세지함이다. 각각의 메세지에 대한 개수를 count로 표시하고 있다. 메세지함 보낸메세지12 받은메세지0 임시메세지4 휴지동328 표시영역 두번째를 보면 내용을 리스트뷰로 표시한 단어목록인데 data-autodividers 속성값을 true로 했다. 그렇게 설정을 하게되면 단어별로 자동으로 구분자가 표시된다. 영어단어 Ap.. ■ Front-End ■/jQuery Mobile 2023. 2. 11.

• 

  [jQuery 모바일] 여러가지 버튼과 리스트 모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다. 이번에는 jQuery Mobile에서 표현할 수 있는 여러 가지 버튼과 리스트에 대해서 알아보자. 아래의 코드는 작은 원형의 버튼을 표시한다. 각각의 class 를 보면 -plus, -minus, -delete, -check에 따라 해당하는 모양이 표시된다. Plus Minus Delete Check class에 ui-grid-a 값을 두면 2단으로 표시하고 class에 ui-grid-b 값을 두면 3단으로 표시한다. 그리고 ui-block-a, b, c, ...... 순서로 칼럼의 위치를 나타낸다. 아래의 코드는 제목과 본문을 표시할때 사용하는 코드이다. classs에 값을 설정하면.. ■ Front-End ■/jQuery Mobile 2023. 2. 11.

• 

  [jQuery 모바일] 여러가지 선택항목 (Select, Radio, Checkbox) 모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다. jQuery Mobile에서 표현할 수 있는 여러가지 다양한 선택항목들을 표시해 보자. 결과 화면을 보고 나서 위에 있는 항목에서 부터 아래로 하나씩 확인한다. 상단을 보면 좌측에 뒤로가기 버튼과 우측에 확인 버튼이 있고 그 아래에 메뉴1, 메뉴2, 메뉴3을 표시하고 있는 내비게이션바가 있다. 아래와 같이 여러가지 선택항목 뒤로 확인 메뉴 1 메뉴 2 메뉴 3 학년: 1학년 2학년 3학년 4학년 과목: 국어 영어 수학 외국어: 중국어 일본어 취미: 독서 음악 영화 여행 메뉴 4 메뉴 5 메뉴 6 주한길 jQuery Mobile에서 알아둘 속성 data-role="page | heade.. ■ Front-End ■/jQuery Mobile 2023. 2. 11.

• 

  [jQuery 모바일] 여러가지 다양한 항목들 모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다. jQuery Mobile에서 표현할 수 있는 여러가지 다양한 항목들을 표시해 보자. 결과 화면을 보고 나서 위에 있는 항목에서 부터 아래로 하나씩 확인해 본다. 상단을 보면 좌측에 뒤로가기 버튼과 우측에 확인 버튼이 있고 그 아래에 메뉴1, 메뉴2, 메뉴3을 표시하고 있는 내비게이션바가 있다. 아래와 같이 여러가지 항목들 뒤로 확인 메뉴 1 메뉴 2 메뉴 3 성별: 남 여 이름: 메모: 플립 스위치: Off On 범위슬라이더: 범위슬라이더: 슬라이더: 메뉴 4 메뉴 5 메뉴 6 주한길 jQuery Mobile에서 알아둘 속성 data-role="page | header | conten.. ■ Front-End ■/jQuery Mobile 2023. 2. 11.

• 

  [jQuery 모바일] 접을 수 있는 콘텐츠와 아코디언 모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다. 이번에는 접을 수 있는 콘텐츠와 아코디언을 만들어 보자. 접을 수 있는 콘텐츠는 div 태그의 data-role 속성에 collapsible 값을 주면 된다. 그리고 div 태그 안에 제목을 나타내기 위한 , , ...... 와 같은 태그와 설명을 나타내는 태그를 구성하면 된다. jQuery Mobile jQuery Mobile는 모바일 웹 사이트와 모든 스마트 폰, ...(중략)...계된 HTML5 기반 프레임워크입니다. 그리고 data-collapsed 속성에 false 값을 주면 처음 표시할 때 펼쳐서 보인다. 접을 수 있는 콘텐츠를 구성하는 것을 알고 있으면 아코디언을 만드는 .. ■ Front-End ■/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는 모바일 웹 사이트와 모든 스마트 폰, 태블릿 및 ...(중략)...프.. ■ Front-End ■/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 .. ■ Front-End ■/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.. ■ Front-End ■/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.. ■ Front-End ■/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 버튼은 우측에 표시된다. 네이게이션바.. ■ Front-End ■/jQuery Mobile 2023. 2. 11.