page

XE.page()의 기능을 사용하기 위해서는 xe-page.js파일을 로드하여야 합니다.

// blade파일(php)에서 로드할 경우
{{ XeFrontend::js('assets/core/xe-ui-component/js/xe-page.js')->appendTo('body')->load() }}

XE.page(url, target, options, callback)

target영역에 html을 로드하여 화면에 랜더링합니다. response로 html 및 js, css파일들의 경로를 전달 받습니다.

동작 순서

1. js, css파일 로드

2. html 로드

3. callback 실행

arguments

• url (string)

  • ajax가 호출될 url

• target (string)

  • html이 append될 selector

• options (object)

  • data (object) 전송 파라미터

  • type (string) http method 'get'|'post'

  • addType (string) target에 response html을 넣어주는 방식의 타입 append, prepend, before, after. 옵션을 명시하지 않을 경우 target영역에 html을 덮어 넣습니다.

callback (function)

html append이후에 실행될 callback

DOM Element에 data-* attruibute를 이용한 XE.page 사용 방법

xe.page.js파일을 로드하면 data-toggle="xe-page" attribute를 사용한 DOM에 click이벤트를 바인딩 합니다.

• assets/core/common/xe.page.js의 파일을 로드합니다.

• 클릭되는 DOM에 data-toggle='xe-page' attribute를 명시하여야 합니다.

• href or data-url에 ajax를 요청할 url정보를 명시합니다.

• data-target으로 append할 영역의 selector를 명시합니다.

• data-callback으로 callback명을 명시합니다.

• data-params로 요청시 전송할 파라미터 정보를 명시합니다. (JSON string)

<a href="/api/test" 
    data-toggle="xe-page" 
    data-params="{'param1':'value1'}" 
    data-target="#target" 
    data-callback="callbackFunc">[XE.page 실행]</a>