Table of contents
Page
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파일들의 경로를 전달 받습니다.
동작 순서
- js, css파일 로드
- html 로드
- 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 = "https://www.xpressengine.com/plugin/gitbookMarkDownParser/parse//api/test"
data-toggle="xe-page"
data-params="{'param1':'value1'}"
data-target="#target"
data-callback="callbackFunc">[XE.page 실행]</a>