XpressEngine
  • INTRODUCE
  • 시작하기
    • 권장 사양
    • 터미널 환경 설치
    • 웹 환경 설치
    • 업데이트
    • 문제 해결(디버깅)
  • 사이트 설정
    • 회원 설정 및 관리
    • 관리자 비밀번호 설정
    • 사이트맵 추가 및 제거
    • 컨텐츠 관리 및 신고 집계
    • Store 토큰 설정
    • 익스텐션 설치 / 업데이트
    • 기본 테마 설정
    • SEO 설정
    • 다국어 설정
    • 캡챠 설정
  • 번들 플러그인
    • 미디어 라이브러리
    • 외부페이지 플러그인
    • 플러그인 업로드
  • 개발자 문서
    • 개요
    • 디렉토리 구조
    • 컴포넌트
    • 플러그인
    • 서비스
    • 라이프 사이클
    • 라우팅
    • 컨트롤러
    • 요청
    • 응답
    • 프레젠터
    • 뷰
    • 템플릿
  • 플러그인 개발
    • 개요
    • 기본경로 및 구조
    • 기본 플러그인 생성
    • 플러그인 정보 추가 및 수정
    • 관리자 사이트 메뉴 추가
    • 위젯 개발/제작
    • 모듈 개발/제작
    • 에디터 제작
    • 에디터 툴 제작
    • UI 오프젝트 제작
    • 토글 메뉴 제작
    • 다이나믹 필드 제작
    • 다이나믹 필드 스킨 제작
  • 테마 개발/제작
    • 기본경로 및 구조
    • 기본 테마 생성
    • 서브 테마 활용
    • 설정 파일 작성
    • 테마 편집 기능
  • 스킨 개발/제작
    • 기본경로 및 구조
    • 기본 스킨 생성
    • 설정 파일 작성
  • 서비스
    • 카테고리
    • 캡챠
    • 설정
    • 문서
    • 키생성(Keygen)
    • 메뉴/모듈
    • 이벤트/인터셉션
    • 파일/스토리지
    • 회원/인증
    • 모바일
    • 권한
    • 데이터베이스
    • 메일
    • 프론트엔드
    • 이미지처리
    • 세션
    • 헬퍼
    • 쿠키
    • UI오브젝트/폼빌더
    • 카운터
    • 휴지통
    • 유효성검사
    • 오류처리
    • 테마
    • 위젯박스
  • 프론트엔드 (JS)
    • 프론트 엔드 JS 시작하기
    • Lang
    • Page
    • Page Modal
    • Request
    • Validator
Powered by GitBook
On this page
  • Page Modal
  • XE.pageModal(url, options, callback)
  • DOM Element data-* attruibute를 이용한 XE.pageModal 사용 방법

Was this helpful?

  1. 프론트엔드 (JS)

Page Modal

Page Modal

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

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

XE.pageModal(url, options, callback)

xeModal을 실행하여 html을 해당 modal영역에 랜더링합니다. response로 html 및 js, css파일들의 경로를 전달 받습니다.

동작 순서

  1. js, css파일 로드

  2. html로드

  3. callback 실행

  4. xeModal 실행

arguments

  • url (string)

    • ajax가 호출될 url

  • options (object)

    • data (object) 전송 파라미터

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

  • callback (function)

    • html append이후에 실행될 callback

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

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

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

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

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

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

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

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

Controller 예시

class ExampleController extends Controller
{
    public function exampleReturnPopup()
    {
        //api_render 헬퍼 함수의 인자로 blade 파일의 경로를 지정하면 팝업으로 띄울 수 있도록 변환해줍니다. 
        return api_render('example_blade');
    }
}
PreviousPageNextRequest

Last updated 5 years ago

Was this helpful?