jquery mobile

jQuery mobile

https://jquerymobile.com/ 과 http://jquery.com/ 에서 js와 style파일을 다운받아서 링크해두면 사용할 수 있음

기본 틀

<div data-role="page"> ← 각각의 페이지를 나타냄

<div data-role="header">

헤더 영역

</div>

<div data-role="content">

컨텐츠 영역

</div>

<div data-role="footer">

푸터 영역

</div>

</div>

page

한 HTML페이지내에서 여러개의 페이지를 작성할 수 있다.

페이지간의 이동은 해당 page div의 id로 이동한다.

<div data-role="page" id="home">

<div data-role="header"></div>

<div data-role="content">

<p><a href="#about">about페이지</a>로 이동합니다.</p>

<p><a href="sample3.html">상품페이지</a>로 이동합니다.</p>

</div>

<div data-role="footer"></div>

</div>

<div data-role="page" id="about">

</div>

→ 처음에는 맨 위에 있는 페이지 (home)만 화면에 보여지고

#about으로 가는 링크를 누르면 id가 about인 페이지가 화면에 띄워진다.

→ 다른 html 페이지로 이동할 때 주소가 바뀌지 않는다

data-transition

• 페이지 전환효과를 지정할 수 있다.

• fade, flip, flow, pop, slide, slidedown, slideup, turn 를 값으로 사용할 수 있다.

header, footer 영역에 버튼 달기

<a href="#" data-icon="info" class="ui-btn-right"></a>

→ data-icon="해당아이콘명" : 버튼에 아이콘을 함께 달 수 있다.

아이콘 목록은 http://api.jquerymobile.com/icons/ 참고

→ ui-btn-right : 버튼의 위치가 지정가능하다.

고정된 헤더와 푸터

• header나 footer에 data-position=”fixed” 속성을 달아두면 스크롤위치에 상관없이 각각 상단과 하단에 고정된다.

리스트

• ul에 data-role="listview" 속성을 달아주면 list의 형태로 출력됨

• li에 data-role="list-divider" 속성을 달아주면 리스트 구분자로써 나타내어진다.

• li태그 안에 넣은 <img>태그에 ui-li-icon이라는 클래스를 추가해주면 아이콘사이즈로 나타내어진다.

• <li>안의 내용을<a>태그로 묶어서 카테고리와 같은 모양으로 만들 수 있다.

• <a>태그는 두개까지 넣을 수 있음

• data-inset

• data-filter : 필터기능(검색)

---

 

학원 소개 페이지 만들기

1. 학원소개 페이지

2. 개설강좌 리스트 페이지

3. 학원소개 페이지

4. 학원약도 페이지

---

 

var obj = { }; ← 자바스크립트에서의 객체

var obj = {

name: “응수”,

age: 43,

add:function(){...} // add라는 이름의 function(값)도 넣을수 있다.

};

obj.clear = function(){..} // 위에서 정의한 obj객체에 없는 함수를 clear란 이름으로 추가

→ $(“#clear-btn”).click(function(){

obj.clear();       // 클릭을 누면 위에서 추가한 기능이 실현

});

javascript상에서 사용자 정의 메소드를 만들 때

객체를 만들어서 함수를 다 넣어두고 만들고 app.remove() 이런 형태로 쓰면 이름이 같은 다른 메소드와 충돌 날 일이 거의 생기지 않는다. 이런걸 모듈화 라고 함.

create 메소드 먼저 써야함