티스토리 뷰
Framework7 작동 원리 정리
초기화
Framework7
을 사용하기 위해 기본 레이아웃이 되는 HTML을 작성하였으면 이제 행동을 부여할 JavaScript를 작성할 차례이다.
// 앱 초기화와 함께 옵션으로 안드로이드 머터리얼 테마 기능을 극대화
var someApp = new Framework7({material: true});
// 기본 뷰 지정, 지정하지 않을 경우 링크 등이 오작동
someApp.addView('.view-main', {dynamicNavbar: true});
// DOM 조작을 핸들링을 하기 위한 Dom7 오브젝트 생성
var $$ = Dom7;
- Framework7은 초기화 후 반드시 기본 뷰를 지정해야 한다. 지정하지 않을 경우 링크 등이 정상 작동하지 않는다.
- Framework7은 프레임워크의 특화된 고유의
Dom7
이라는 라이브러리를 제공한다. 기능과 사용법은jQuery
와 매우 유사하기 때문에 성능 최적화를 위해 HTML DOM 조작시 Dom7만 사용할 것을 권장한다.
페이지
페이지는 body > views > view > pages > page로 이어지는 Framework7의 렌더링 최소 단위이다.
<div data-page="some-page" class="page page-on-center">
...
</div>
- 모든 페이지는
class="page"
지정이 되어야 한며 각 페이지를 식별할 수 있는 유일한data-page
를 지정해야 한다. - Framework7 내에서 모든 링크는 AJAX로 로드된다. 각 링크는 위 페이지 단위의 HTML 조각만 가지고 있으면 된다. 또한, 각 페이지의 JavaScript 코드는 메인이 되는
index.html
페이지에 몰아서 작성한다.
// 링크 파라메터로 id 전달
<a href="article.html?id=65535">...</a>
// 페이지 로드시 전달된 파라메터 확인 가능
someApp.onPageInit('article', function (page) {
var id = page.query.id;
...
}).trigger();
onPageInit
이벤트는 페이지가 로드될 경우 발생한다. page 파라메터를 통해 페이지 메타 정보를 획득하여 필요한 기능을 수행할 수 있다. [관련 링크]
댓글
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- graylog
- 로드바이크
- 구동계
- chrome
- jstl
- CentOS
- Eclipse
- Kendo UI
- jsp
- java
- 알뜰폰
- JavaScript
- MySQL
- Tomcat
- DynamoDB
- kotlin
- node.js
- Spring Boot
- jpa
- Spring MVC 3
- spring
- 태그를 입력해 주세요.
- bootstrap
- 평속
- Kendo UI Web Grid
- JHipster
- maven
- 자전거
- 로드 바이크
- Docker
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
글 보관함